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

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.
@@ -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;
@@ -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 {
@@ -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;
@@ -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}) {
@@ -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;
@@ -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;
@@ -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"
@@ -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"
@@ -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/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.148",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -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;
@@ -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;
@@ -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;