@patternfly/patternfly 6.0.0-prerelease.6 → 6.0.0-prerelease.7

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/Button/button.css +2 -2
  2. package/components/Button/button.scss +2 -2
  3. package/components/Check/check.css +2 -2
  4. package/components/Check/check.scss +2 -2
  5. package/components/MenuToggle/menu-toggle.css +2 -2
  6. package/components/MenuToggle/menu-toggle.scss +2 -2
  7. package/components/Pagination/pagination.css +1 -1
  8. package/components/Pagination/pagination.scss +1 -1
  9. package/components/Radio/radio.css +2 -2
  10. package/components/Radio/radio.scss +2 -2
  11. package/components/Slider/slider.css +1 -1
  12. package/components/Slider/slider.scss +1 -1
  13. package/components/_index.css +10 -10
  14. package/package.json +1 -1
  15. package/patternfly-no-globals.css +10 -10
  16. package/patternfly.css +10 -10
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -215,7 +215,7 @@
215
215
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
216
216
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
217
217
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
218
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
218
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
219
219
  --pf-v6-c-button__progress--Opacity: 0;
220
220
  --pf-v6-c-button__progress--TranslateY: -50%;
221
221
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -226,7 +226,7 @@
226
226
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
227
227
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
228
228
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
229
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
229
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
230
230
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
231
231
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
232
232
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
package/components/Button/button.scss CHANGED
@@ -260,7 +260,7 @@
260
260
  --#{$button}__icon--m-end--MarginInlineStart: 0;
261
261
 
262
262
  // Progress
263
- --#{$button}__progress--width: calc(var(--#{$spinner}--m-md--diameter) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
263
+ --#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
264
264
  --#{$button}__progress--Opacity: 0;
265
265
  --#{$button}__progress--TranslateY: -50%;
266
266
  --#{$button}__progress--TranslateX: 0;
@@ -271,7 +271,7 @@
271
271
  --#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
272
272
  --#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
273
273
  --#{$button}--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width));
274
- --#{$button}--m-in-progress--m-plain--Color: var(--#{$spinner}--Color);
274
+ --#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
275
275
  --#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
276
276
  --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
277
277
 
package/components/Check/check.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .pf-v6-c-check {
3
3
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
4
4
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
5
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
5
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
6
6
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
7
7
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -25,7 +25,7 @@
25
25
  .pf-v6-c-check.pf-m-standalone {
26
26
  display: inline-grid;
27
27
  grid-template-columns: auto;
28
- min-height: var(--pf-v6-c-check--MinHeight);
28
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
29
29
  }
30
30
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
31
31
  align-self: center;
package/components/Check/check.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @include pf-root($check) {
4
4
  --#{$check}--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
5
5
  --#{$check}--AccentColor: var(--pf-t--global--color--brand--default);
6
- --#{$check}--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
6
+ --#{$check}--m-standalone--MinHeight: calc(var(--#{$check}__label--FontSize) * var(--#{$check}__label--LineHeight));
7
7
 
8
8
  // TODO: update to `--#{$check}--FontSize` `--#{$check}--LineHeight`
9
9
  --#{$check}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -33,7 +33,7 @@
33
33
  &.pf-m-standalone {
34
34
  display: inline-grid;
35
35
  grid-template-columns: auto;
36
- min-height: var(--#{$check}--MinHeight);
36
+ min-height: var(--#{$check}--m-standalone--MinHeight);
37
37
 
38
38
  .#{$check}__input {
39
39
  align-self: center;
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -32,9 +32,9 @@
32
32
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
33
33
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
34
34
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
35
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
35
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
36
36
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
37
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
37
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
38
38
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
39
39
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
40
40
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -49,11 +49,11 @@
49
49
  --#{$menu-toggle}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
50
50
 
51
51
  // * Menu toggle icon
52
- --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
52
+ --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
53
53
  --#{$menu-toggle}__icon--Color: var(--pf-t--global--icon--color--regular);
54
54
 
55
55
  // * Menu toggle toggle icon
56
- --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
56
+ --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight));
57
57
  --#{$menu-toggle}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
58
58
 
59
59
  // * Menu toggle primary
package/components/Pagination/pagination.css CHANGED
@@ -9,7 +9,7 @@
9
9
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
10
10
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
11
11
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
12
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
12
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
13
13
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
14
14
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
15
15
  --pf-v6-c-pagination__total-items--Display: block;
package/components/Pagination/pagination.scss CHANGED
@@ -19,7 +19,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
19
19
  // nav page select
20
20
  --#{$pagination}__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
21
21
  --#{$pagination}__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
22
- --#{$pagination}__nav-page-select--c-form-control--width-base: calc((var(--#{$form-control}--PaddingInlineEnd) + var(--#{$form-control}--PaddingInlineStart)) + (var(--#{$form-control}--before--BorderWidth) * 2));
22
+ --#{$pagination}__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
23
23
  --#{$pagination}__nav-page-select--c-form-control--width-chars: 2;
24
24
  --#{$pagination}__nav-page-select--c-form-control--Width: calc(var(--#{$pagination}__nav-page-select--c-form-control--width-base) + (var(--#{$pagination}__nav-page-select--c-form-control--width-chars) * 1ch));
25
25
 
package/components/Radio/radio.css CHANGED
@@ -2,7 +2,7 @@
2
2
  .pf-v6-c-radio {
3
3
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
4
4
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
5
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
5
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
6
6
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
7
7
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
8
8
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -26,7 +26,7 @@
26
26
  .pf-v6-c-radio.pf-m-standalone {
27
27
  display: inline-grid;
28
28
  grid-template-columns: auto;
29
- height: var(--pf-v6-c-check--Height);
29
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
30
30
  }
31
31
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
32
32
  align-self: center;
package/components/Radio/radio.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @include pf-root($radio) {
4
4
  --#{$radio}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
5
5
  --#{$radio}--AccentColor: var(--pf-t--global--icon--color--brand--default);
6
- --#{$radio}--Height: calc(var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight));
6
+ --#{$radio}--m-standalone--MinHeight: calc(var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight));
7
7
 
8
8
  // TODO: update to `--#{$radio}--FontSize` `--#{$radio}--LineHeight`
9
9
  --#{$radio}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -34,7 +34,7 @@
34
34
  &.pf-m-standalone {
35
35
  display: inline-grid;
36
36
  grid-template-columns: auto;
37
- height: var(--#{$check}--Height);
37
+ min-height: var(--#{$radio}--m-standalone--MinHeight);
38
38
 
39
39
  .#{$radio}__input {
40
40
  align-self: center;
package/components/Slider/slider.css CHANGED
@@ -46,7 +46,7 @@
46
46
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
47
47
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
48
48
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
49
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
49
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
50
50
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
51
51
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
52
52
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
package/components/Slider/slider.scss CHANGED
@@ -59,7 +59,7 @@
59
59
 
60
60
  // value
61
61
  --#{$slider}__value--MarginInlineStart: var(--pf-t--global--spacer--md);
62
- --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingInlineStart) + var(--#{$form-control}--PaddingInlineEnd) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
62
+ --#{$slider}__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
63
63
  --#{$slider}__value--c-form-control--width-chars: 3;
64
64
  --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + var(--#{$slider}__value--c-form-control--width-chars) * 1ch);
65
65
  --#{$slider}__value--m-floating--TranslateX: -50%;
package/components/_index.css CHANGED
@@ -1632,7 +1632,7 @@ button.pf-v6-c-breadcrumb__link {
1632
1632
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
1633
1633
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1634
1634
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1635
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
1635
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1636
1636
  --pf-v6-c-button__progress--Opacity: 0;
1637
1637
  --pf-v6-c-button__progress--TranslateY: -50%;
1638
1638
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -1643,7 +1643,7 @@ button.pf-v6-c-breadcrumb__link {
1643
1643
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1644
1644
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1645
1645
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
1646
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
1646
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
1647
1647
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1648
1648
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1649
1649
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
@@ -2548,7 +2548,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2548
2548
  .pf-v6-c-check {
2549
2549
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2550
2550
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2551
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2551
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2552
2552
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2553
2553
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2554
2554
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -2571,7 +2571,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2571
2571
  .pf-v6-c-check.pf-m-standalone {
2572
2572
  display: inline-grid;
2573
2573
  grid-template-columns: auto;
2574
- min-height: var(--pf-v6-c-check--MinHeight);
2574
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2575
2575
  }
2576
2576
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2577
2577
  align-self: center;
@@ -9986,9 +9986,9 @@ ul.pf-v6-c-list {
9986
9986
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9987
9987
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
9988
9988
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
9989
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9989
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
9990
9990
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
9991
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
9991
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
9992
9992
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
9993
9993
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9994
9994
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
@@ -12026,7 +12026,7 @@ ul.pf-v6-c-list {
12026
12026
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
12027
12027
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
12028
12028
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
12029
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
12029
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
12030
12030
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
12031
12031
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
12032
12032
  --pf-v6-c-pagination__total-items--Display: block;
@@ -13447,7 +13447,7 @@ ul.pf-v6-c-list {
13447
13447
  .pf-v6-c-radio {
13448
13448
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
13449
13449
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
13450
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
13450
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
13451
13451
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
13452
13452
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
13453
13453
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -13471,7 +13471,7 @@ ul.pf-v6-c-list {
13471
13471
  .pf-v6-c-radio.pf-m-standalone {
13472
13472
  display: inline-grid;
13473
13473
  grid-template-columns: auto;
13474
- height: var(--pf-v6-c-check--Height);
13474
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
13475
13475
  }
13476
13476
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
13477
13477
  align-self: center;
@@ -14172,7 +14172,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14172
14172
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
14173
14173
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
14174
14174
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
14175
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
14175
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
14176
14176
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
14177
14177
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
14178
14178
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
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-prerelease.6",
4
+ "version": "6.0.0-prerelease.7",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -9063,7 +9063,7 @@ button.pf-v6-c-breadcrumb__link {
9063
9063
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
9064
9064
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
9065
9065
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9066
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
9066
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
9067
9067
  --pf-v6-c-button__progress--Opacity: 0;
9068
9068
  --pf-v6-c-button__progress--TranslateY: -50%;
9069
9069
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -9074,7 +9074,7 @@ button.pf-v6-c-breadcrumb__link {
9074
9074
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
9075
9075
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
9076
9076
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
9077
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
9077
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
9078
9078
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
9079
9079
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
9080
9080
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
@@ -9979,7 +9979,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9979
9979
  .pf-v6-c-check {
9980
9980
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
9981
9981
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9982
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
9982
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
9983
9983
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
9984
9984
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
9985
9985
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -10002,7 +10002,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10002
10002
  .pf-v6-c-check.pf-m-standalone {
10003
10003
  display: inline-grid;
10004
10004
  grid-template-columns: auto;
10005
- min-height: var(--pf-v6-c-check--MinHeight);
10005
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
10006
10006
  }
10007
10007
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
10008
10008
  align-self: center;
@@ -17417,9 +17417,9 @@ ul.pf-v6-c-list {
17417
17417
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
17418
17418
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
17419
17419
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17420
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
17420
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17421
17421
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
17422
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
17422
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17423
17423
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
17424
17424
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
17425
17425
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
@@ -19457,7 +19457,7 @@ ul.pf-v6-c-list {
19457
19457
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
19458
19458
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
19459
19459
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
19460
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
19460
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
19461
19461
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
19462
19462
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
19463
19463
  --pf-v6-c-pagination__total-items--Display: block;
@@ -20878,7 +20878,7 @@ ul.pf-v6-c-list {
20878
20878
  .pf-v6-c-radio {
20879
20879
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
20880
20880
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
20881
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
20881
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
20882
20882
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
20883
20883
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
20884
20884
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -20902,7 +20902,7 @@ ul.pf-v6-c-list {
20902
20902
  .pf-v6-c-radio.pf-m-standalone {
20903
20903
  display: inline-grid;
20904
20904
  grid-template-columns: auto;
20905
- height: var(--pf-v6-c-check--Height);
20905
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
20906
20906
  }
20907
20907
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
20908
20908
  align-self: center;
@@ -21603,7 +21603,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21603
21603
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
21604
21604
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
21605
21605
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
21606
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
21606
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
21607
21607
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
21608
21608
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
21609
21609
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
package/patternfly.css CHANGED
@@ -9184,7 +9184,7 @@ button.pf-v6-c-breadcrumb__link {
9184
9184
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
9185
9185
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
9186
9186
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9187
- --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
9187
+ --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
9188
9188
  --pf-v6-c-button__progress--Opacity: 0;
9189
9189
  --pf-v6-c-button__progress--TranslateY: -50%;
9190
9190
  --pf-v6-c-button__progress--TranslateX: 0;
@@ -9195,7 +9195,7 @@ button.pf-v6-c-breadcrumb__link {
9195
9195
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
9196
9196
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
9197
9197
  --pf-v6-c-button--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width));
9198
- --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
9198
+ --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
9199
9199
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
9200
9200
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
9201
9201
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
@@ -10100,7 +10100,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10100
10100
  .pf-v6-c-check {
10101
10101
  --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
10102
10102
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
10103
- --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10103
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10104
10104
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
10105
10105
  --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
10106
10106
  --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -10123,7 +10123,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
10123
10123
  .pf-v6-c-check.pf-m-standalone {
10124
10124
  display: inline-grid;
10125
10125
  grid-template-columns: auto;
10126
- min-height: var(--pf-v6-c-check--MinHeight);
10126
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
10127
10127
  }
10128
10128
  .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
10129
10129
  align-self: center;
@@ -17538,9 +17538,9 @@ ul.pf-v6-c-list {
17538
17538
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
17539
17539
  --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
17540
17540
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17541
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
17541
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17542
17542
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
17543
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
17543
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17544
17544
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
17545
17545
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
17546
17546
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
@@ -19578,7 +19578,7 @@ ul.pf-v6-c-list {
19578
19578
  --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
19579
19579
  --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
19580
19580
  --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
19581
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
19581
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--border--width--control--default) * 2);
19582
19582
  --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
19583
19583
  --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
19584
19584
  --pf-v6-c-pagination__total-items--Display: block;
@@ -20999,7 +20999,7 @@ ul.pf-v6-c-list {
20999
20999
  .pf-v6-c-radio {
21000
21000
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
21001
21001
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
21002
- --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
21002
+ --pf-v6-c-radio--m-standalone--MinHeight: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
21003
21003
  --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
21004
21004
  --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
21005
21005
  --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -21023,7 +21023,7 @@ ul.pf-v6-c-list {
21023
21023
  .pf-v6-c-radio.pf-m-standalone {
21024
21024
  display: inline-grid;
21025
21025
  grid-template-columns: auto;
21026
- height: var(--pf-v6-c-check--Height);
21026
+ min-height: var(--pf-v6-c-radio--m-standalone--MinHeight);
21027
21027
  }
21028
21028
  .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
21029
21029
  align-self: center;
@@ -21724,7 +21724,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21724
21724
  --pf-v6-c-slider__thumb--before--TranslateX: -50%;
21725
21725
  --pf-v6-c-slider__thumb--before--TranslateY: -50%;
21726
21726
  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
21727
- --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
21727
+ --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-t--global--spacer--control--horizontal--default) + 1.25rem);
21728
21728
  --pf-v6-c-slider__value--c-form-control--width-chars: 3;
21729
21729
  --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
21730
21730
  --pf-v6-c-slider__value--m-floating--TranslateX: -50%;