@patternfly/patternfly 6.0.0-alpha.147 → 6.0.0-alpha.149

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 (18) hide show
  1. package/components/Breadcrumb/breadcrumb.css +2 -6
  2. package/components/Breadcrumb/breadcrumb.scss +2 -9
  3. package/components/Icon/icon.css +5 -5
  4. package/components/Icon/icon.scss +5 -5
  5. package/components/MenuToggle/menu-toggle.css +6 -0
  6. package/components/MenuToggle/menu-toggle.scss +6 -0
  7. package/components/_index.css +13 -11
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  9. package/docs/components/Menu/examples/Menu.md +2 -2
  10. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  11. package/docs/components/Nav/examples/Navigation.md +10 -11
  12. package/docs/demos/CardView/examples/CardView.md +3 -3
  13. package/docs/demos/Nav/examples/Nav.md +3 -3
  14. package/package.json +1 -1
  15. package/patternfly-no-globals.css +13 -11
  16. package/patternfly.css +13 -11
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/Breadcrumb/breadcrumb.css CHANGED
@@ -15,10 +15,9 @@
15
15
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
16
16
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
17
17
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
18
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
19
19
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
21
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
20
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
22
21
  }
23
22
 
24
23
  .pf-v6-c-breadcrumb {
@@ -89,9 +88,6 @@ button.pf-v6-c-breadcrumb__link {
89
88
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
90
89
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
91
90
  }
92
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
93
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
94
- }
95
91
 
96
92
  .pf-v6-c-breadcrumb__heading {
97
93
  display: inline;
package/components/Breadcrumb/breadcrumb.scss CHANGED
@@ -26,12 +26,9 @@
26
26
 
27
27
  // breadcrumb dropdown
28
28
  --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
- --#{$breadcrumb}__menu-toggle--MarginInlineEnd: calc(var(--#{$breadcrumb}__item--MarginInlineEnd) * -1);
29
+ --#{$breadcrumb}__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
30
30
  --#{$breadcrumb}__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
- --#{$breadcrumb}__menu-toggle--MarginInlineStart: calc(var(--#{$breadcrumb}__item-divider--MarginInlineEnd) * -1);
32
-
33
- // breadcrumb toggle
34
- --#{$breadcrumb}__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
31
+ --#{$breadcrumb}__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
35
32
  }
36
33
 
37
34
  .#{$breadcrumb} {
@@ -114,10 +111,6 @@
114
111
  margin-block-end: var(--#{$breadcrumb}__menu-toggle--MarginBlockEnd);
115
112
  margin-inline-start: var(--#{$breadcrumb}__menu-toggle--MarginInlineStart);
116
113
  margin-inline-end: var(--#{$breadcrumb}__menu-toggle--MarginInlineEnd);
117
-
118
- .#{$menu-toggle} {
119
- line-height: var(--#{$breadcrumb}__menu-toggle--c-menu-toggle--LineHeight);
120
- }
121
114
  }
122
115
 
123
116
  .#{$breadcrumb}__heading {
package/components/Icon/icon.css CHANGED
@@ -35,11 +35,11 @@
35
35
  --pf-v6-c-icon--m-inline--Height: 1em;
36
36
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
37
37
  --pf-v6-c-icon__content--Color: initial;
38
- --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
39
- --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
40
- --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
41
- --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
42
- --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
38
+ --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
39
+ --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
40
+ --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
41
+ --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
42
+ --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
43
43
  --pf-v6-c-icon--m-inline__content--Color: initial;
44
44
  --pf-v6-c-icon__content--FontSize: 1em;
45
45
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
package/components/Icon/icon.scss CHANGED
@@ -50,11 +50,11 @@
50
50
 
51
51
  // Content color
52
52
  --#{$icon}__content--Color: initial;
53
- --#{$icon}__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
54
- --#{$icon}__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
55
- --#{$icon}__content--m-success--Color: var(--pf-t--global--color--status--success--default);
56
- --#{$icon}__content--m-info--Color: var(--pf-t--global--color--status--info--default);
57
- --#{$icon}__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
53
+ --#{$icon}__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
54
+ --#{$icon}__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
55
+ --#{$icon}__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
56
+ --#{$icon}__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
57
+ --#{$icon}__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
58
58
  --#{$icon}--m-inline__content--Color: initial;
59
59
 
60
60
  // Content sizes
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -106,6 +106,9 @@
106
106
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
107
107
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
108
108
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
109
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
110
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
111
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
109
112
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
110
113
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
111
114
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -243,6 +246,9 @@
243
246
  .pf-v6-c-menu-toggle.pf-m-small {
244
247
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
245
248
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
249
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
250
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
251
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
246
252
  }
247
253
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
248
254
  background-color: transparent;
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -162,6 +162,9 @@
162
162
  // * Menu toggle small
163
163
  --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
164
164
  --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
165
+ --#{$menu-toggle}--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
166
+ --#{$menu-toggle}--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
167
+ --#{$menu-toggle}--m-small__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
165
168
 
166
169
  // Status icon
167
170
  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -329,6 +332,9 @@
329
332
  &.pf-m-small {
330
333
  --#{$menu-toggle}--PaddingBlockStart: var(--#{$menu-toggle}--m-small--PaddingBlockStart);
331
334
  --#{$menu-toggle}--PaddingBlockEnd: var(--#{$menu-toggle}--m-small--PaddingBlockEnd);
335
+ --#{$menu-toggle}--FontSize: var(--#{$menu-toggle}--m-small--FontSize);
336
+ --#{$menu-toggle}--ColumnGap: var(--#{$menu-toggle}--m-small--ColumnGap);
337
+ --#{$menu-toggle}__controls--MinWidth: var(--#{$menu-toggle}--m-small__controls--MinWidth);
332
338
  }
333
339
 
334
340
  &:has(.#{$button}) {
package/components/_index.css CHANGED
@@ -1267,10 +1267,9 @@
1267
1267
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
1268
1268
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
1269
1269
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1270
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
1270
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
1271
1271
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1272
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
1273
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1272
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
1274
1273
  }
1275
1274
 
1276
1275
  .pf-v6-c-breadcrumb {
@@ -1341,9 +1340,6 @@ button.pf-v6-c-breadcrumb__link {
1341
1340
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
1342
1341
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
1343
1342
  }
1344
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
1345
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
1346
- }
1347
1343
 
1348
1344
  .pf-v6-c-breadcrumb__heading {
1349
1345
  display: inline;
@@ -7161,11 +7157,11 @@ select ~ .pf-v6-c-form-control__utilities {
7161
7157
  --pf-v6-c-icon--m-inline--Height: 1em;
7162
7158
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
7163
7159
  --pf-v6-c-icon__content--Color: initial;
7164
- --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
7165
- --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
7166
- --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
7167
- --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
7168
- --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
7160
+ --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
7161
+ --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
7162
+ --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
7163
+ --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
7164
+ --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
7169
7165
  --pf-v6-c-icon--m-inline__content--Color: initial;
7170
7166
  --pf-v6-c-icon__content--FontSize: 1em;
7171
7167
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
@@ -10042,6 +10038,9 @@ ul.pf-v6-c-list {
10042
10038
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
10043
10039
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
10044
10040
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10041
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
10042
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
10043
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
10045
10044
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
10046
10045
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10047
10046
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -10179,6 +10178,9 @@ ul.pf-v6-c-list {
10179
10178
  .pf-v6-c-menu-toggle.pf-m-small {
10180
10179
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
10181
10180
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
10181
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
10182
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
10183
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
10182
10184
  }
10183
10185
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
10184
10186
  background-color: transparent;
package/docs/components/Breadcrumb/examples/Breadcrumb.md CHANGED
@@ -161,7 +161,7 @@ cssPrefix: pf-v6-c-breadcrumb
161
161
  </span>
162
162
  <span class="pf-v6-c-breadcrumb__dropdown">
163
163
  <button
164
- class="pf-v6-c-menu-toggle pf-m-plain"
164
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
165
165
  type="button"
166
166
  aria-expanded="false"
167
167
  aria-label="Menu toggle"
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -4588,7 +4588,7 @@ cssPrefix: pf-v6-c-menu
4588
4588
  </span>
4589
4589
  <span class="pf-v6-c-breadcrumb__dropdown">
4590
4590
  <button
4591
- class="pf-v6-c-menu-toggle pf-m-plain"
4591
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4592
4592
  type="button"
4593
4593
  aria-expanded="false"
4594
4594
  aria-label="Menu toggle"
@@ -4820,7 +4820,7 @@ cssPrefix: pf-v6-c-menu
4820
4820
  </span>
4821
4821
  <span class="pf-v6-c-breadcrumb__dropdown">
4822
4822
  <button
4823
- class="pf-v6-c-menu-toggle pf-m-plain"
4823
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4824
4824
  type="button"
4825
4825
  aria-expanded="false"
4826
4826
  aria-label="Menu toggle"
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -75,7 +75,7 @@ cssPrefix: pf-v6-c-menu-toggle
75
75
 
76
76
  &nbsp;
77
77
  <button
78
- class="pf-v6-c-menu-toggle pf-m-plain"
78
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
79
79
  type="button"
80
80
  aria-expanded="false"
81
81
  aria-label="Menu toggle"
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -138,7 +138,7 @@ cssPrefix: pf-v6-c-nav
138
138
  ```html
139
139
  <nav class="pf-v6-c-nav" aria-label="Global">
140
140
  <ul class="pf-v6-c-nav__list" role="list">
141
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
141
+ <li class="pf-v6-c-nav__item pf-m-expanded">
142
142
  <button
143
143
  class="pf-v6-c-nav__link"
144
144
  aria-expanded="true"
@@ -180,7 +180,7 @@ cssPrefix: pf-v6-c-nav
180
180
  </ul>
181
181
  </section>
182
182
  </li>
183
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
183
+ <li class="pf-v6-c-nav__item pf-m-expanded">
184
184
  <button
185
185
  class="pf-v6-c-nav__link"
186
186
  aria-expanded="true"
@@ -213,7 +213,7 @@ cssPrefix: pf-v6-c-nav
213
213
  </ul>
214
214
  </section>
215
215
  </li>
216
- <li class="pf-v6-c-nav__item pf-m-expandable">
216
+ <li class="pf-v6-c-nav__item">
217
217
  <button
218
218
  class="pf-v6-c-nav__link"
219
219
  aria-expanded="false"
@@ -255,7 +255,7 @@ cssPrefix: pf-v6-c-nav
255
255
  ```html
256
256
  <nav class="pf-v6-c-nav" aria-label="Global">
257
257
  <ul class="pf-v6-c-nav__list" role="list">
258
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
258
+ <li class="pf-v6-c-nav__item pf-m-expanded">
259
259
  <button class="pf-v6-c-nav__link" aria-expanded="true">
260
260
  <span class="pf-v6-c-nav__link-text">Link 1</span>
261
261
  <span class="pf-v6-c-nav__toggle">
@@ -288,7 +288,7 @@ cssPrefix: pf-v6-c-nav
288
288
  </ul>
289
289
  </section>
290
290
  </li>
291
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
291
+ <li class="pf-v6-c-nav__item pf-m-expanded">
292
292
  <button class="pf-v6-c-nav__link" aria-expanded="true">
293
293
  <span class="pf-v6-c-nav__link-text">Link 2</span>
294
294
  <span class="pf-v6-c-nav__toggle">
@@ -327,7 +327,7 @@ cssPrefix: pf-v6-c-nav
327
327
  <span class="pf-v6-c-nav__link-text">Link 1 (not expandable)</span>
328
328
  </a>
329
329
  </li>
330
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
330
+ <li class="pf-v6-c-nav__item pf-m-expanded">
331
331
  <button
332
332
  class="pf-v6-c-nav__link"
333
333
  aria-expanded="true"
@@ -357,7 +357,7 @@ cssPrefix: pf-v6-c-nav
357
357
  </ul>
358
358
  </section>
359
359
  </li>
360
- <li class="pf-v6-c-nav__item pf-m-expandable">
360
+ <li class="pf-v6-c-nav__item">
361
361
  <button
362
362
  class="pf-v6-c-nav__link"
363
363
  aria-expanded="false"
@@ -425,7 +425,7 @@ cssPrefix: pf-v6-c-nav
425
425
  <span class="pf-v6-c-nav__link-text">Releases</span>
426
426
  </a>
427
427
  </li>
428
- <li class="pf-v6-c-nav__item pf-m-expandable">
428
+ <li class="pf-v6-c-nav__item">
429
429
  <button
430
430
  class="pf-v6-c-nav__link"
431
431
  aria-expanded="false"
@@ -457,7 +457,7 @@ cssPrefix: pf-v6-c-nav
457
457
  </ul>
458
458
  </section>
459
459
  </li>
460
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
460
+ <li class="pf-v6-c-nav__item pf-m-expanded">
461
461
  <button
462
462
  class="pf-v6-c-nav__link"
463
463
  aria-expanded="true"
@@ -485,7 +485,7 @@ cssPrefix: pf-v6-c-nav
485
485
  <span class="pf-v6-c-nav__link-text">Openshift</span>
486
486
  </a>
487
487
  </li>
488
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
488
+ <li class="pf-v6-c-nav__item pf-m-expanded">
489
489
  <button
490
490
  class="pf-v6-c-nav__link"
491
491
  aria-expanded="true"
@@ -2506,7 +2506,6 @@ The navigation system relies on several different sub-components:
2506
2506
  | `.pf-m-full-width` | `.pf-v6-c-nav` | Modifies nav for to full width of parent. |
2507
2507
  | `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
2508
2508
  | `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
2509
- | `.pf-m-expandable` | `.pf-v6-c-nav__item` | Modifies for the expandable state. |
2510
2509
  | `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |
2511
2510
  | `.pf-m-current` | `.pf-v6-c-nav__link` | Modifies for the current state. |
2512
2511
  | `.pf-m-hover` | `.pf-v6-c-nav__link` | Modifies for the hover state. |
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -203,7 +203,7 @@ section: patterns
203
203
  aria-label="Global"
204
204
  >
205
205
  <ul class="pf-v6-c-nav__list" role="list">
206
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
206
+ <li class="pf-v6-c-nav__item pf-m-expanded">
207
207
  <button
208
208
  class="pf-v6-c-nav__link"
209
209
  aria-expanded="true"
@@ -258,7 +258,7 @@ section: patterns
258
258
  </ul>
259
259
  </section>
260
260
  </li>
261
- <li class="pf-v6-c-nav__item pf-m-expandable">
261
+ <li class="pf-v6-c-nav__item">
262
262
  <button
263
263
  class="pf-v6-c-nav__link"
264
264
  aria-expanded="false"
@@ -290,7 +290,7 @@ section: patterns
290
290
  </ul>
291
291
  </section>
292
292
  </li>
293
- <li class="pf-v6-c-nav__item pf-m-expandable">
293
+ <li class="pf-v6-c-nav__item">
294
294
  <button
295
295
  class="pf-v6-c-nav__link"
296
296
  aria-expanded="false"
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -885,7 +885,7 @@ section: components
885
885
  aria-label="Global"
886
886
  >
887
887
  <ul class="pf-v6-c-nav__list" role="list">
888
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
888
+ <li class="pf-v6-c-nav__item pf-m-expanded">
889
889
  <button
890
890
  class="pf-v6-c-nav__link"
891
891
  aria-expanded="true"
@@ -940,7 +940,7 @@ section: components
940
940
  </ul>
941
941
  </section>
942
942
  </li>
943
- <li class="pf-v6-c-nav__item pf-m-expandable">
943
+ <li class="pf-v6-c-nav__item">
944
944
  <button
945
945
  class="pf-v6-c-nav__link"
946
946
  aria-expanded="false"
@@ -972,7 +972,7 @@ section: components
972
972
  </ul>
973
973
  </section>
974
974
  </li>
975
- <li class="pf-v6-c-nav__item pf-m-expandable">
975
+ <li class="pf-v6-c-nav__item">
976
976
  <button
977
977
  class="pf-v6-c-nav__link"
978
978
  aria-expanded="false"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.147",
4
+ "version": "6.0.0-alpha.149",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -7287,10 +7287,9 @@
7287
7287
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
7288
7288
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
7289
7289
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7290
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
7290
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7291
7291
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7292
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
7293
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
7292
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
7294
7293
  }
7295
7294
 
7296
7295
  .pf-v6-c-breadcrumb {
@@ -7361,9 +7360,6 @@ button.pf-v6-c-breadcrumb__link {
7361
7360
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
7362
7361
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
7363
7362
  }
7364
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
7365
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
7366
- }
7367
7363
 
7368
7364
  .pf-v6-c-breadcrumb__heading {
7369
7365
  display: inline;
@@ -13181,11 +13177,11 @@ select ~ .pf-v6-c-form-control__utilities {
13181
13177
  --pf-v6-c-icon--m-inline--Height: 1em;
13182
13178
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
13183
13179
  --pf-v6-c-icon__content--Color: initial;
13184
- --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
13185
- --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
13186
- --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
13187
- --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
13188
- --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
13180
+ --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
13181
+ --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
13182
+ --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
13183
+ --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
13184
+ --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
13189
13185
  --pf-v6-c-icon--m-inline__content--Color: initial;
13190
13186
  --pf-v6-c-icon__content--FontSize: 1em;
13191
13187
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
@@ -16062,6 +16058,9 @@ ul.pf-v6-c-list {
16062
16058
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
16063
16059
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
16064
16060
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
16061
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
16062
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
16063
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
16065
16064
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
16066
16065
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
16067
16066
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -16199,6 +16198,9 @@ ul.pf-v6-c-list {
16199
16198
  .pf-v6-c-menu-toggle.pf-m-small {
16200
16199
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
16201
16200
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
16201
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
16202
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
16203
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
16202
16204
  }
16203
16205
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
16204
16206
  background-color: transparent;
package/patternfly.css CHANGED
@@ -7404,10 +7404,9 @@ h6) {
7404
7404
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
7405
7405
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
7406
7406
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7407
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
7407
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
7408
7408
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7409
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
7410
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
7409
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
7411
7410
  }
7412
7411
 
7413
7412
  .pf-v6-c-breadcrumb {
@@ -7478,9 +7477,6 @@ button.pf-v6-c-breadcrumb__link {
7478
7477
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
7479
7478
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
7480
7479
  }
7481
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
7482
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
7483
- }
7484
7480
 
7485
7481
  .pf-v6-c-breadcrumb__heading {
7486
7482
  display: inline;
@@ -13298,11 +13294,11 @@ select ~ .pf-v6-c-form-control__utilities {
13298
13294
  --pf-v6-c-icon--m-inline--Height: 1em;
13299
13295
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
13300
13296
  --pf-v6-c-icon__content--Color: initial;
13301
- --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
13302
- --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
13303
- --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
13304
- --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
13305
- --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
13297
+ --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
13298
+ --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
13299
+ --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
13300
+ --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
13301
+ --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
13306
13302
  --pf-v6-c-icon--m-inline__content--Color: initial;
13307
13303
  --pf-v6-c-icon__content--FontSize: 1em;
13308
13304
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
@@ -16179,6 +16175,9 @@ ul.pf-v6-c-list {
16179
16175
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
16180
16176
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
16181
16177
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
16178
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
16179
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
16180
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
16182
16181
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
16183
16182
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
16184
16183
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -16316,6 +16315,9 @@ ul.pf-v6-c-list {
16316
16315
  .pf-v6-c-menu-toggle.pf-m-small {
16317
16316
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
16318
16317
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
16318
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
16319
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
16320
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
16319
16321
  }
16320
16322
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
16321
16323
  background-color: transparent;