@patternfly/patternfly 6.0.0-alpha.51 → 6.0.0-alpha.53

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 (15) hide show
  1. package/components/Button/button.css +7 -2
  2. package/components/Button/button.scss +7 -2
  3. package/components/FormControl/form-control.css +3 -3
  4. package/components/FormControl/form-control.scss +3 -3
  5. package/components/InputGroup/input-group.css +22 -38
  6. package/components/InputGroup/input-group.scss +21 -29
  7. package/components/NumberInput/number-input.css +8 -8
  8. package/components/NumberInput/number-input.scss +7 -12
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +40 -55
  11. package/patternfly-theme-dark-unversioned.css +40 -55
  12. package/patternfly.css +40 -55
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
  15. package/components/InputGroup/themes/dark/input-group.scss +0 -22
package/patternfly-no-globals.css CHANGED
@@ -7788,6 +7788,7 @@ button.pf-v5-c-breadcrumb__link {
7788
7788
 
7789
7789
  :root,
7790
7790
  .pf-v5-c-button {
7791
+ --pf-v5-c-button--Display: inline-block;
7791
7792
  --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
7792
7793
  --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
7793
7794
  --pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -7805,6 +7806,7 @@ button.pf-v5-c-breadcrumb__link {
7805
7806
  --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
7806
7807
  --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
7807
7808
  --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
7809
+ --pf-v5-c-button--MixBlendMode: normal;
7808
7810
  --pf-v5-c-button--hover--BackgroundColor: transparent;
7809
7811
  --pf-v5-c-button--hover--BorderColor: transparent;
7810
7812
  --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -7853,6 +7855,7 @@ button.pf-v5-c-breadcrumb__link {
7853
7855
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
7854
7856
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
7855
7857
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7858
+ --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7856
7859
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
7857
7860
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
7858
7861
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -8004,7 +8007,7 @@ button.pf-v5-c-breadcrumb__link {
8004
8007
 
8005
8008
  .pf-v5-c-button {
8006
8009
  position: relative;
8007
- display: var(--pf-v5-c-button--Display, initial);
8010
+ display: var(--pf-v5-c-button--Display);
8008
8011
  flex: var(--pf-v5-c-button--Flex, initial);
8009
8012
  align-items: var(--pf-v5-c-button--AlignItems, initial);
8010
8013
  justify-content: var(--pf-v5-c-button--JustifyContent, initial);
@@ -8027,6 +8030,7 @@ button.pf-v5-c-breadcrumb__link {
8027
8030
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
8028
8031
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
8029
8032
  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
8033
+ mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
8030
8034
  }
8031
8035
  .pf-v5-c-button::after {
8032
8036
  position: absolute;
@@ -8093,6 +8097,7 @@ button.pf-v5-c-breadcrumb__link {
8093
8097
  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
8094
8098
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
8095
8099
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
8100
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
8096
8101
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
8097
8102
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
8098
8103
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
@@ -8218,6 +8223,7 @@ button.pf-v5-c-breadcrumb__link {
8218
8223
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
8219
8224
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
8220
8225
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
8226
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8221
8227
  --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8222
8228
  --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8223
8229
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
@@ -8232,7 +8238,6 @@ button.pf-v5-c-breadcrumb__link {
8232
8238
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8233
8239
  --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8234
8240
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
8235
- mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8236
8241
  }
8237
8242
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
8238
8243
  min-width: auto;
@@ -15567,13 +15572,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15567
15572
  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
15568
15573
  --pf-v5-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15569
15574
  --pf-v5-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
15570
- --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
15575
+ --pf-v5-c-form-control--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15571
15576
  --pf-v5-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15572
15577
  --pf-v5-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
15573
- --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
15578
+ --pf-v5-c-form-control--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15574
15579
  --pf-v5-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15575
15580
  --pf-v5-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
15576
- --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
15581
+ --pf-v5-c-form-control--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15577
15582
  --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
15578
15583
  --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
15579
15584
  --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
@@ -16145,35 +16150,40 @@ select ~ .pf-v5-c-form-control__utilities {
16145
16150
  display: none;
16146
16151
  }
16147
16152
 
16153
+ :root,
16148
16154
  .pf-v5-c-input-group {
16149
- --pf-v5-c-input-group--child--ZIndex: var(--pf-v5-global--ZIndex--xs);
16150
- --pf-v5-c-input-group__item--offset: var(--pf-v5-global--BorderWidth--sm);
16151
- --pf-v5-c-input-group__item--MarginLeft: calc(var(--pf-v5-c-input-group__item--offset) * -1);
16152
- --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-v5-c-input-group__item--offset);
16153
- --pf-v5-c-input-group__item--BorderColor--base: var(--pf-v5-global--BorderColor--300);
16154
- --pf-v5-c-input-group__item--BorderColor--accent: var(--pf-v5-global--BorderColor--200);
16155
+ --pf-v5-c-input-group--Gap: var(--pf-t--global--spacer--xs);
16156
+ --pf-v5-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
16157
+ --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
16158
+ --pf-v5-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
16155
16159
  --pf-v5-c-input-group__item--BackgroundColor: transparent;
16156
- --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-v5-global--spacer--sm);
16157
- --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-v5-global--spacer--sm);
16158
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
16159
- --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--offset);
16160
+ --pf-v5-c-input-group__item--AlignItems: start;
16161
+ --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
16162
+ --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
16163
+ --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
16164
+ --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
16165
+ --pf-v5-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
16160
16166
  --pf-v5-c-input-group__item--m-box--BorderTopColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16161
16167
  --pf-v5-c-input-group__item--m-box--BorderRightColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16162
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--accent);
16168
+ --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16163
16169
  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16164
16170
  --pf-v5-c-input-group__item--m-plain--BackgroundColor: transparent;
16165
- --pf-v5-c-input-group__text--FontSize: var(--pf-v5-global--FontSize--md);
16166
- --pf-v5-c-input-group__text--Color: var(--pf-v5-global--Color--dark-200);
16167
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
16168
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16169
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
16171
+ --pf-v5-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
16172
+ --pf-v5-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
16173
+ --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
16174
+ --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16175
+ }
16176
+
16177
+ .pf-v5-c-input-group {
16170
16178
  display: flex;
16179
+ gap: var(--pf-v5-c-input-group--Gap);
16171
16180
  width: 100%;
16172
16181
  }
16173
16182
 
16174
16183
  .pf-v5-c-input-group__item {
16175
16184
  position: relative;
16176
16185
  display: flex;
16186
+ align-items: var(--pf-v5-c-input-group__item--AlignItems);
16177
16187
  min-width: var(--pf-v5-c-input-group__item--MinWidth, revert);
16178
16188
  max-width: var(--pf-v5-c-input-group__item--MaxWidth, revert);
16179
16189
  background-color: var(--pf-v5-c-input-group__item--BackgroundColor);
@@ -16182,9 +16192,6 @@ select ~ .pf-v5-c-form-control__utilities {
16182
16192
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
16183
16193
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
16184
16194
  }
16185
- .pf-v5-c-input-group__item:where(:not(:first-child)) {
16186
- margin-inline-start: var(--pf-v5-c-input-group__item--MarginLeft);
16187
- }
16188
16195
  .pf-v5-c-input-group__item.pf-m-box {
16189
16196
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-box--BackgroundColor);
16190
16197
  padding-inline-start: var(--pf-v5-c-input-group__item--m-box--PaddingLeft);
@@ -16194,15 +16201,14 @@ select ~ .pf-v5-c-form-control__utilities {
16194
16201
  border-block-end-color: var(--pf-v5-c-input-group__item--m-box--BorderBottomColor);
16195
16202
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
16196
16203
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
16204
+ border-radius: var(--pf-v5-c-input-group__item--m-box--BorderRadius);
16197
16205
  }
16198
16206
  .pf-v5-c-input-group__item.pf-m-plain {
16199
- --pf-v5-c-input-group__item--MarginLeft: 0;
16200
16207
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-plain--BackgroundColor);
16201
16208
  border: none;
16202
16209
  }
16203
16210
  .pf-v5-c-input-group__item.pf-m-disabled {
16204
16211
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-disabled--BackgroundColor);
16205
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--m-disabled--BorderBottomColor);
16206
16212
  --pf-v5-c-input-group__text--Color: var(--pf-v5-c-input-group__item--m-disabled__text--Color);
16207
16213
  }
16208
16214
  .pf-v5-c-input-group__item.pf-m-fill {
@@ -16218,27 +16224,6 @@ label.pf-v5-c-input-group__text {
16218
16224
  cursor: pointer;
16219
16225
  }
16220
16226
 
16221
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
16222
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16223
- }
16224
-
16225
- :where(.pf-v5-theme-dark) .pf-v5-c-input-group {
16226
- --pf-v5-c-input-group__item--BorderLeftWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
16227
- --pf-v5-c-input-group__item--BorderLeftColor: var(--pf-v5-global--palette--black-700);
16228
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16229
- --pf-v5-c-input-group__item--m-box--BorderTopColor: transparent;
16230
- --pf-v5-c-input-group__item--m-box--BorderRightColor: transparent;
16231
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
16232
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
16233
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
16234
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16235
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
16236
- }
16237
- :where(.pf-v5-theme-dark) .pf-v5-c-input-group > * + * {
16238
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
16239
- border-inline-start: var(--pf-v5-c-input-group__item--BorderLeftWidth) solid var(--pf-v5-c-input-group__item--BorderLeftColor);
16240
- }
16241
-
16242
16227
  .pf-v5-c-jump-links {
16243
16228
  --pf-v5-c-jump-links__list--Display: flex;
16244
16229
  --pf-v5-c-jump-links__list--PaddingTop: 0;
@@ -29776,12 +29761,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
29776
29761
  direction: rtl;
29777
29762
  }
29778
29763
  }
29764
+ :root,
29779
29765
  .pf-v5-c-number-input {
29780
- --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
29781
- --pf-v5-c-number-input__icon--FontSize: var(--pf-v5-global--FontSize--xs);
29782
- --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
29783
- --pf-v5-c-number-input--c-form-control--width-icon: 0px;
29784
- --pf-v5-c-number-input--m-status--c-form-control--width-icon: var(--pf-v5-global--spacer--xl);
29766
+ --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
29767
+ --pf-v5-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
29768
+ --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
29769
+ --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
29785
29770
  --pf-v5-c-number-input--c-form-control--width-chars: 4;
29786
29771
  --pf-v5-c-number-input--c-form-control--Width:
29787
29772
  calc(
@@ -29789,12 +29774,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
29789
29774
  var(--pf-v5-c-number-input--c-form-control--width-base) + var(--pf-v5-c-number-input--c-form-control--width-chars) * 1ch
29790
29775
  ) + var(--pf-v5-c-number-input--c-form-control--width-icon)
29791
29776
  );
29777
+ }
29778
+
29779
+ .pf-v5-c-number-input {
29792
29780
  display: inline-flex;
29793
29781
  align-items: center;
29794
29782
  }
29795
- .pf-v5-c-number-input.pf-m-status {
29796
- --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
29797
- }
29798
29783
  .pf-v5-c-number-input .pf-v5-c-form-control {
29799
29784
  width: var(--pf-v5-c-number-input--c-form-control--Width);
29800
29785
  }
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -7905,6 +7905,7 @@ button.pf-v5-c-breadcrumb__link {
7905
7905
 
7906
7906
  :root,
7907
7907
  .pf-v5-c-button {
7908
+ --pf-v5-c-button--Display: inline-block;
7908
7909
  --pf-v5-c-button--PaddingTop: var(--pf-t--global--spacer--sm);
7909
7910
  --pf-v5-c-button--PaddingRight: var(--pf-t--global--spacer--lg);
7910
7911
  --pf-v5-c-button--PaddingBottom: var(--pf-t--global--spacer--sm);
@@ -7922,6 +7923,7 @@ button.pf-v5-c-breadcrumb__link {
7922
7923
  --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-button--BorderRadius);
7923
7924
  --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-button--BorderRadius);
7924
7925
  --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-button--BorderRadius);
7926
+ --pf-v5-c-button--MixBlendMode: normal;
7925
7927
  --pf-v5-c-button--hover--BackgroundColor: transparent;
7926
7928
  --pf-v5-c-button--hover--BorderColor: transparent;
7927
7929
  --pf-v5-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -7970,6 +7972,7 @@ button.pf-v5-c-breadcrumb__link {
7970
7972
  --pf-v5-c-button--m-link--PaddingLeft: var(--pf-t--global--spacer--md);
7971
7973
  --pf-v5-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
7972
7974
  --pf-v5-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
7975
+ --pf-v5-c-button--m-link--MixBlendMode: var(--pf-t--global--background--color--action--plain--hover--blend);
7973
7976
  --pf-v5-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
7974
7977
  --pf-v5-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
7975
7978
  --pf-v5-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -8121,7 +8124,7 @@ button.pf-v5-c-breadcrumb__link {
8121
8124
 
8122
8125
  .pf-v5-c-button {
8123
8126
  position: relative;
8124
- display: var(--pf-v5-c-button--Display, initial);
8127
+ display: var(--pf-v5-c-button--Display);
8125
8128
  flex: var(--pf-v5-c-button--Flex, initial);
8126
8129
  align-items: var(--pf-v5-c-button--AlignItems, initial);
8127
8130
  justify-content: var(--pf-v5-c-button--JustifyContent, initial);
@@ -8144,6 +8147,7 @@ button.pf-v5-c-breadcrumb__link {
8144
8147
  border-start-end-radius: var(--pf-v5-c-button--BorderStartEndRadius);
8145
8148
  border-end-start-radius: var(--pf-v5-c-button--BorderEndStartRadius);
8146
8149
  border-end-end-radius: var(--pf-v5-c-button--BorderEndEndRadius);
8150
+ mix-blend-mode: var(--pf-v5-c-button--MixBlendMode);
8147
8151
  }
8148
8152
  .pf-v5-c-button::after {
8149
8153
  position: absolute;
@@ -8210,6 +8214,7 @@ button.pf-v5-c-breadcrumb__link {
8210
8214
  --pf-v5-c-button--Color: var(--pf-v5-c-button--m-link--Color);
8211
8215
  --pf-v5-c-button--BorderRadius: var(--pf-v5-c-button--m-link--BorderRadius);
8212
8216
  --pf-v5-c-button--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor);
8217
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-link--MixBlendMode);
8213
8218
  --pf-v5-c-button__icon--Color: var(--pf-v5-c-button--m-link__icon--Color);
8214
8219
  --pf-v5-c-button--hover--Color: var(--pf-v5-c-button--m-link--hover--Color);
8215
8220
  --pf-v5-c-button--hover--BackgroundColor: var(--pf-v5-c-button--m-link--hover--BackgroundColor);
@@ -8335,6 +8340,7 @@ button.pf-v5-c-breadcrumb__link {
8335
8340
  --pf-v5-c-button--PaddingRight: var(--pf-v5-c-button--m-plain--PaddingRight);
8336
8341
  --pf-v5-c-button--PaddingBottom: var(--pf-v5-c-button--m-plain--PaddingBottom);
8337
8342
  --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-button--m-plain--PaddingLeft);
8343
+ --pf-v5-c-button--MixBlendMode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8338
8344
  --pf-v5-c-button--m-small--PaddingTop: var(--pf-v5-c-button--m-plain--m-small--PaddingTop);
8339
8345
  --pf-v5-c-button--m-small--PaddingRight: var(--pf-v5-c-button--m-plain--m-small--PaddingRight);
8340
8346
  --pf-v5-c-button--m-small--PaddingBottom: var(--pf-v5-c-button--m-plain--m-small--PaddingBottom);
@@ -8349,7 +8355,6 @@ button.pf-v5-c-breadcrumb__link {
8349
8355
  --pf-v5-c-button--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color);
8350
8356
  --pf-v5-c-button__progress--Color: var(--pf-v5-c-button--m-in-progress--m-plain--Color);
8351
8357
  min-width: var(--pf-v5-c-button--m-plain--MinWidth);
8352
- mix-blend-mode: var(--pf-v5-c-button--m-plain--MixBlendMode);
8353
8358
  }
8354
8359
  .pf-v5-c-button.pf-m-plain.pf-m-no-padding {
8355
8360
  min-width: auto;
@@ -15684,13 +15689,13 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
15684
15689
  --pf-v5-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
15685
15690
  --pf-v5-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15686
15691
  --pf-v5-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
15687
- --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-t--global--spacer--xl);
15692
+ --pf-v5-c-form-control--m-success--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15688
15693
  --pf-v5-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15689
15694
  --pf-v5-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
15690
- --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-t--global--spacer--xl);
15695
+ --pf-v5-c-form-control--m-warning--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15691
15696
  --pf-v5-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
15692
15697
  --pf-v5-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
15693
- --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-t--global--spacer--xl);
15698
+ --pf-v5-c-form-control--m-error--PaddingRight: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-form-control--ColumnGap));
15694
15699
  --pf-v5-c-form-control--m-error--icon--width: var(--pf-v5-c-form-control--FontSize);
15695
15700
  --pf-v5-c-form-control--m-icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-icon--icon--width) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
15696
15701
  --pf-v5-c-form-control--m-icon--icon--width: var(--pf-v5-c-form-control--FontSize);
@@ -16262,35 +16267,40 @@ select ~ .pf-v5-c-form-control__utilities {
16262
16267
  display: none;
16263
16268
  }
16264
16269
 
16270
+ :root,
16265
16271
  .pf-v5-c-input-group {
16266
- --pf-v5-c-input-group--child--ZIndex: var(--pf-v5-global--ZIndex--xs);
16267
- --pf-v5-c-input-group__item--offset: var(--pf-v5-global--BorderWidth--sm);
16268
- --pf-v5-c-input-group__item--MarginLeft: calc(var(--pf-v5-c-input-group__item--offset) * -1);
16269
- --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-v5-c-input-group__item--offset);
16270
- --pf-v5-c-input-group__item--BorderColor--base: var(--pf-v5-global--BorderColor--300);
16271
- --pf-v5-c-input-group__item--BorderColor--accent: var(--pf-v5-global--BorderColor--200);
16272
+ --pf-v5-c-input-group--Gap: var(--pf-t--global--spacer--xs);
16273
+ --pf-v5-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
16274
+ --pf-v5-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
16275
+ --pf-v5-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
16272
16276
  --pf-v5-c-input-group__item--BackgroundColor: transparent;
16273
- --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-v5-global--spacer--sm);
16274
- --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-v5-global--spacer--sm);
16275
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
16276
- --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--offset);
16277
+ --pf-v5-c-input-group__item--AlignItems: start;
16278
+ --pf-v5-c-input-group__item--m-box--PaddingRight: var(--pf-t--global--spacer--sm);
16279
+ --pf-v5-c-input-group__item--m-box--PaddingLeft: var(--pf-t--global--spacer--sm);
16280
+ --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
16281
+ --pf-v5-c-input-group__item--m-box--BorderWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
16282
+ --pf-v5-c-input-group__item--m-box--BorderRadius: var(--pf-t--global--border--radius--small);
16277
16283
  --pf-v5-c-input-group__item--m-box--BorderTopColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16278
16284
  --pf-v5-c-input-group__item--m-box--BorderRightColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16279
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--accent);
16285
+ --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16280
16286
  --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderColor--base);
16281
16287
  --pf-v5-c-input-group__item--m-plain--BackgroundColor: transparent;
16282
- --pf-v5-c-input-group__text--FontSize: var(--pf-v5-global--FontSize--md);
16283
- --pf-v5-c-input-group__text--Color: var(--pf-v5-global--Color--dark-200);
16284
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
16285
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16286
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
16288
+ --pf-v5-c-input-group__text--FontSize: var(--pf-t--global--font--size--body--default);
16289
+ --pf-v5-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
16290
+ --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
16291
+ --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
16292
+ }
16293
+
16294
+ .pf-v5-c-input-group {
16287
16295
  display: flex;
16296
+ gap: var(--pf-v5-c-input-group--Gap);
16288
16297
  width: 100%;
16289
16298
  }
16290
16299
 
16291
16300
  .pf-v5-c-input-group__item {
16292
16301
  position: relative;
16293
16302
  display: flex;
16303
+ align-items: var(--pf-v5-c-input-group__item--AlignItems);
16294
16304
  min-width: var(--pf-v5-c-input-group__item--MinWidth, revert);
16295
16305
  max-width: var(--pf-v5-c-input-group__item--MaxWidth, revert);
16296
16306
  background-color: var(--pf-v5-c-input-group__item--BackgroundColor);
@@ -16299,9 +16309,6 @@ select ~ .pf-v5-c-form-control__utilities {
16299
16309
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
16300
16310
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
16301
16311
  }
16302
- .pf-v5-c-input-group__item:where(:not(:first-child)) {
16303
- margin-inline-start: var(--pf-v5-c-input-group__item--MarginLeft);
16304
- }
16305
16312
  .pf-v5-c-input-group__item.pf-m-box {
16306
16313
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-box--BackgroundColor);
16307
16314
  padding-inline-start: var(--pf-v5-c-input-group__item--m-box--PaddingLeft);
@@ -16311,15 +16318,14 @@ select ~ .pf-v5-c-form-control__utilities {
16311
16318
  border-block-end-color: var(--pf-v5-c-input-group__item--m-box--BorderBottomColor);
16312
16319
  border-inline-start-color: var(--pf-v5-c-input-group__item--m-box--BorderLeftColor);
16313
16320
  border-inline-end-color: var(--pf-v5-c-input-group__item--m-box--BorderRightColor);
16321
+ border-radius: var(--pf-v5-c-input-group__item--m-box--BorderRadius);
16314
16322
  }
16315
16323
  .pf-v5-c-input-group__item.pf-m-plain {
16316
- --pf-v5-c-input-group__item--MarginLeft: 0;
16317
16324
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-plain--BackgroundColor);
16318
16325
  border: none;
16319
16326
  }
16320
16327
  .pf-v5-c-input-group__item.pf-m-disabled {
16321
16328
  --pf-v5-c-input-group__item--BackgroundColor: var(--pf-v5-c-input-group__item--m-disabled--BackgroundColor);
16322
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-c-input-group__item--m-disabled--BorderBottomColor);
16323
16329
  --pf-v5-c-input-group__text--Color: var(--pf-v5-c-input-group__item--m-disabled__text--Color);
16324
16330
  }
16325
16331
  .pf-v5-c-input-group__item.pf-m-fill {
@@ -16335,27 +16341,6 @@ label.pf-v5-c-input-group__text {
16335
16341
  cursor: pointer;
16336
16342
  }
16337
16343
 
16338
- :where(.pf-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
16339
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
16340
- }
16341
-
16342
- :where(.pf-theme-dark) .pf-v5-c-input-group {
16343
- --pf-v5-c-input-group__item--BorderLeftWidth: var(--pf-v5-c-input-group__item--BorderWidth--base);
16344
- --pf-v5-c-input-group__item--BorderLeftColor: var(--pf-v5-global--palette--black-700);
16345
- --pf-v5-c-input-group__item--m-box--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
16346
- --pf-v5-c-input-group__item--m-box--BorderTopColor: transparent;
16347
- --pf-v5-c-input-group__item--m-box--BorderRightColor: transparent;
16348
- --pf-v5-c-input-group__item--m-box--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
16349
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: transparent;
16350
- --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
16351
- --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16352
- --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--300);
16353
- }
16354
- :where(.pf-theme-dark) .pf-v5-c-input-group > * + * {
16355
- --pf-v5-c-input-group__item--m-box--BorderLeftColor: var(--pf-v5-c-input-group__item--BorderLeftColor);
16356
- border-inline-start: var(--pf-v5-c-input-group__item--BorderLeftWidth) solid var(--pf-v5-c-input-group__item--BorderLeftColor);
16357
- }
16358
-
16359
16344
  .pf-v5-c-jump-links {
16360
16345
  --pf-v5-c-jump-links__list--Display: flex;
16361
16346
  --pf-v5-c-jump-links__list--PaddingTop: 0;
@@ -29893,12 +29878,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
29893
29878
  direction: rtl;
29894
29879
  }
29895
29880
  }
29881
+ :root,
29896
29882
  .pf-v5-c-number-input {
29897
- --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-v5-global--spacer--sm);
29898
- --pf-v5-c-number-input__icon--FontSize: var(--pf-v5-global--FontSize--xs);
29899
- --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-v5-global--spacer--sm) * 2 + var(--pf-v5-global--BorderWidth--sm) * 2);
29900
- --pf-v5-c-number-input--c-form-control--width-icon: 0px;
29901
- --pf-v5-c-number-input--m-status--c-form-control--width-icon: var(--pf-v5-global--spacer--xl);
29883
+ --pf-v5-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
29884
+ --pf-v5-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
29885
+ --pf-v5-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
29886
+ --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
29902
29887
  --pf-v5-c-number-input--c-form-control--width-chars: 4;
29903
29888
  --pf-v5-c-number-input--c-form-control--Width:
29904
29889
  calc(
@@ -29906,12 +29891,12 @@ label.pf-v5-c-radio, .pf-v5-c-radio__label,
29906
29891
  var(--pf-v5-c-number-input--c-form-control--width-base) + var(--pf-v5-c-number-input--c-form-control--width-chars) * 1ch
29907
29892
  ) + var(--pf-v5-c-number-input--c-form-control--width-icon)
29908
29893
  );
29894
+ }
29895
+
29896
+ .pf-v5-c-number-input {
29909
29897
  display: inline-flex;
29910
29898
  align-items: center;
29911
29899
  }
29912
- .pf-v5-c-number-input.pf-m-status {
29913
- --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
29914
- }
29915
29900
  .pf-v5-c-number-input .pf-v5-c-form-control {
29916
29901
  width: var(--pf-v5-c-number-input--c-form-control--Width);
29917
29902
  }