@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.32

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 (27) hide show
  1. package/components/InputGroup/input-group.css +61 -85
  2. package/components/InputGroup/input-group.scss +55 -61
  3. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  4. package/components/OptionsMenu/options-menu.css +0 -5
  5. package/components/OptionsMenu/options-menu.scss +0 -6
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  7. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  8. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  9. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  10. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  11. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  12. package/docs/components/Slider/examples/Slider.md +60 -38
  13. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  14. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  15. package/docs/demos/DataList/examples/DataList.md +158 -150
  16. package/docs/demos/Form/examples/BasicForms.md +77 -66
  17. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  18. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  19. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  20. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  21. package/docs/demos/Table/examples/Table.md +950 -902
  22. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  23. package/package.json +1 -1
  24. package/patternfly-no-reset.css +60 -79
  25. package/patternfly.css +60 -79
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
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": "5.0.0-alpha.31",
4
+ "version": "5.0.0-alpha.32",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-reset.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -15945,77 +15945,74 @@ textarea.pf-c-form-control {
15945
15945
  }
15946
15946
 
15947
15947
  .pf-c-input-group {
15948
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
15949
15948
  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
15949
+ --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
15950
+ --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
15951
+ --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
15952
+ --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
15953
+ --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
15954
+ --pf-c-input-group__item--BackgroundColor: transparent;
15955
+ --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
15956
+ --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
15957
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
15958
+ --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
15959
+ --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
15960
+ --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
15961
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
15962
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
15963
+ --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
15950
15964
  --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
15951
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
15952
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
15953
15965
  --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
15954
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
15955
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
15956
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
15957
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
15958
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
15959
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
15960
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
15961
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
15962
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15963
- --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
15966
+ --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
15967
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
15968
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15964
15969
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
15965
15970
  --pf-c-input-group--c-form-control--MarginRight: 0;
15966
- color: var(--pf-global--Color--100);
15967
15971
  display: flex;
15968
15972
  width: 100%;
15969
- background-color: var(--pf-c-input-group--BackgroundColor);
15970
- }
15971
- .pf-c-input-group.pf-m-plain {
15972
- --pf-c-input-group--BackgroundColor: transparent;
15973
- }
15974
- .pf-c-input-group > * + * {
15975
- margin-left: -1px;
15976
15973
  }
15977
- .pf-c-input-group > :focus,
15978
- .pf-c-input-group > :focus-within {
15979
- z-index: var(--pf-c-input-group--child--ZIndex);
15980
- }
15981
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
15982
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
15974
+
15975
+ .pf-c-input-group__item {
15976
+ position: relative;
15977
+ display: flex;
15978
+ min-width: var(--pf-c-input-group__item--MinWidth, revert);
15979
+ max-width: var(--pf-c-input-group__item--MaxWidth, revert);
15980
+ background-color: var(--pf-c-input-group__item--BackgroundColor);
15981
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
15982
+ }
15983
+ .pf-c-input-group__item:where(:not(:first-child)) {
15984
+ margin-left: var(--pf-c-input-group__item--MarginLeft);
15985
+ }
15986
+ .pf-c-input-group__item.pf-m-box {
15987
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
15988
+ padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
15989
+ padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
15990
+ border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
15991
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
15992
+ }
15993
+ .pf-c-input-group__item.pf-m-plain {
15994
+ --pf-c-input-group__item--MarginLeft: 0;
15995
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
15996
+ border: none;
15983
15997
  }
15984
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
15985
- .pf-c-input-group textarea {
15986
- flex: 2;
15987
- min-width: 0;
15998
+ .pf-c-input-group__item.pf-m-disabled {
15999
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
16000
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
16001
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
15988
16002
  }
15989
- .pf-c-input-group textarea {
15990
- min-height: var(--pf-c-input-group__textarea--MinHeight);
16003
+ .pf-c-input-group__item.pf-m-fill {
16004
+ flex-grow: 1;
15991
16005
  }
15992
16006
 
15993
16007
  .pf-c-input-group__text {
15994
- display: flex;
15995
- align-items: center;
15996
- padding-right: var(--pf-c-input-group__text--PaddingRight);
15997
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
16008
+ align-self: center;
15998
16009
  font-size: var(--pf-c-input-group__text--FontSize);
15999
16010
  color: var(--pf-c-input-group__text--Color);
16000
- text-align: center;
16001
- background-color: var(--pf-c-input-group__text--BackgroundColor);
16002
- border: var(--pf-c-input-group__text--BorderWidth) solid;
16003
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
16004
16011
  }
16005
16012
  label.pf-c-input-group__text {
16006
16013
  cursor: pointer;
16007
16014
  }
16008
16015
 
16009
- .pf-c-input-group__text.pf-m-plain {
16010
- --pf-c-input-group__text--BorderWidth: 0;
16011
- margin-left: 0;
16012
- }
16013
- .pf-c-input-group__text.pf-m-disabled {
16014
- --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
16015
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
16016
- --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
16017
- }
16018
-
16019
16016
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
16020
16017
  :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
16021
16018
  :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
@@ -16053,31 +16050,20 @@ label.pf-c-input-group__text {
16053
16050
  }
16054
16051
 
16055
16052
  :where(.pf-theme-dark) .pf-c-input-group {
16056
- --pf-c-input-group--BackgroundColor: transparent;
16057
- --pf-c-input-group__text--BorderTopColor: transparent;
16058
- --pf-c-input-group__text--BorderRightColor: transparent;
16059
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
16060
- --pf-c-input-group__text--BorderLeftColor: transparent;
16061
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
16053
+ --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
16054
+ --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
16055
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
16056
+ --pf-c-input-group__item--m-box--BorderTopColor: transparent;
16057
+ --pf-c-input-group__item--m-box--BorderRightColor: transparent;
16058
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
16059
+ --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
16060
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
16061
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16062
16062
  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
16063
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
16064
16063
  }
16065
16064
  :where(.pf-theme-dark) .pf-c-input-group > * + * {
16066
- margin-left: 0;
16067
- border-left: 1px solid var(--pf-global--palette--black-700);
16068
- }
16069
- :where(.pf-theme-dark) .pf-c-input-group__text {
16070
- --pf-c-input-group__text--BorderTopColor: transparent;
16071
- --pf-c-input-group__text--BorderRightColor: transparent;
16072
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
16073
- --pf-c-input-group__text--BorderLeftColor: transparent;
16074
- }
16075
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
16076
- --pf-c-input-group__text--BackgroundColor: transparent;
16077
- }
16078
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
16079
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
16080
- color: var(--pf-c-input-group__text--m-disabled--Color);
16065
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
16066
+ border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
16081
16067
  }
16082
16068
 
16083
16069
  .pf-c-jump-links {
@@ -21156,7 +21142,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21156
21142
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
21157
21143
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
21158
21144
  --pf-c-options-menu__toggle--MinWidth: 0;
21159
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
21160
21145
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
21161
21146
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
21162
21147
  --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -21264,7 +21249,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21264
21249
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
21265
21250
  max-width: 100%;
21266
21251
  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
21267
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
21268
21252
  color: var(--pf-c-options-menu__toggle--Color);
21269
21253
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
21270
21254
  border: none;
@@ -21282,9 +21266,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21282
21266
  display: inline-block;
21283
21267
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
21284
21268
  }
21285
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
21286
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
21287
- }
21288
21269
  .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
21289
21270
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
21290
21271
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);
package/patternfly.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @charset "UTF-8";
2
- .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-input-group, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
2
+ .pf-c-table, .pf-c-select, .pf-c-page__sidebar.pf-m-light, .pf-c-menu, .pf-c-masthead.pf-m-light-200, .pf-c-masthead.pf-m-light, .pf-c-form-control, .pf-c-data-list, .pf-c-context-selector__menu, .pf-c-chip-group, .pf-c-chip, .pf-c-calendar-month, .pf-c-banner.pf-m-gold, .pf-c-banner.pf-m-blue, .pf-c-alert, .pf-c-accordion, .pf-t-light {
3
3
  --pf-global--Color--100: var(--pf-global--Color--dark-100);
4
4
  --pf-global--Color--200: var(--pf-global--Color--dark-200);
5
5
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
@@ -16068,77 +16068,74 @@ textarea.pf-c-form-control {
16068
16068
  }
16069
16069
 
16070
16070
  .pf-c-input-group {
16071
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
16072
16071
  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
16072
+ --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
16073
+ --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
16074
+ --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
16075
+ --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
16076
+ --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
16077
+ --pf-c-input-group__item--BackgroundColor: transparent;
16078
+ --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
16079
+ --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
16080
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
16081
+ --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
16082
+ --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
16083
+ --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
16084
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
16085
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
16086
+ --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
16073
16087
  --pf-c-input-group__text--FontSize: var(--pf-global--FontSize--md);
16074
- --pf-c-input-group__text--PaddingRight: var(--pf-global--spacer--sm);
16075
- --pf-c-input-group__text--PaddingLeft: var(--pf-global--spacer--sm);
16076
16088
  --pf-c-input-group__text--Color: var(--pf-global--Color--dark-200);
16077
- --pf-c-input-group__text--BorderWidth: var(--pf-global--BorderWidth--sm);
16078
- --pf-c-input-group__text--BorderTopColor: var(--pf-global--BorderColor--300);
16079
- --pf-c-input-group__text--BorderRightColor: var(--pf-global--BorderColor--300);
16080
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--200);
16081
- --pf-c-input-group__text--BorderLeftColor: var(--pf-global--BorderColor--300);
16082
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--BackgroundColor--100);
16083
- --pf-c-input-group__textarea--MinHeight: var(--pf-global--spacer--xl);
16084
- --pf-c-input-group__text--m-disabled--Color: var(--pf-global--disabled-color--100);
16085
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
16086
- --pf-c-input-group__text--m-disabled--BorderBottomColor: transparent;
16089
+ --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
16090
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16091
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
16087
16092
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
16088
16093
  --pf-c-input-group--c-form-control--MarginRight: 0;
16089
- color: var(--pf-global--Color--100);
16090
16094
  display: flex;
16091
16095
  width: 100%;
16092
- background-color: var(--pf-c-input-group--BackgroundColor);
16093
- }
16094
- .pf-c-input-group.pf-m-plain {
16095
- --pf-c-input-group--BackgroundColor: transparent;
16096
- }
16097
- .pf-c-input-group > * + * {
16098
- margin-left: -1px;
16099
16096
  }
16100
- .pf-c-input-group > :focus,
16101
- .pf-c-input-group > :focus-within {
16102
- z-index: var(--pf-c-input-group--child--ZIndex);
16103
- }
16104
- .pf-c-input-group .pf-c-form-control[aria-invalid=true]:not(:last-child) {
16105
- margin-right: var(--pf-c-input-group--c-form-control--MarginRight);
16097
+
16098
+ .pf-c-input-group__item {
16099
+ position: relative;
16100
+ display: flex;
16101
+ min-width: var(--pf-c-input-group__item--MinWidth, revert);
16102
+ max-width: var(--pf-c-input-group__item--MaxWidth, revert);
16103
+ background-color: var(--pf-c-input-group__item--BackgroundColor);
16104
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
16105
+ }
16106
+ .pf-c-input-group__item:where(:not(:first-child)) {
16107
+ margin-left: var(--pf-c-input-group__item--MarginLeft);
16108
+ }
16109
+ .pf-c-input-group__item.pf-m-box {
16110
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
16111
+ padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
16112
+ padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
16113
+ border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
16114
+ border-color: var(--pf-c-input-group__item--m-box--BorderTopColor) var(--pf-c-input-group__item--m-box--BorderRightColor) var(--pf-c-input-group__item--m-box--BorderBottomColor) var(--pf-c-input-group__item--m-box--BorderLeftColor);
16115
+ }
16116
+ .pf-c-input-group__item.pf-m-plain {
16117
+ --pf-c-input-group__item--MarginLeft: 0;
16118
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
16119
+ border: none;
16106
16120
  }
16107
- .pf-c-input-group input:not([type=checkbox]):not([type=radio]),
16108
- .pf-c-input-group textarea {
16109
- flex: 2;
16110
- min-width: 0;
16121
+ .pf-c-input-group__item.pf-m-disabled {
16122
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
16123
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
16124
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
16111
16125
  }
16112
- .pf-c-input-group textarea {
16113
- min-height: var(--pf-c-input-group__textarea--MinHeight);
16126
+ .pf-c-input-group__item.pf-m-fill {
16127
+ flex-grow: 1;
16114
16128
  }
16115
16129
 
16116
16130
  .pf-c-input-group__text {
16117
- display: flex;
16118
- align-items: center;
16119
- padding-right: var(--pf-c-input-group__text--PaddingRight);
16120
- padding-left: var(--pf-c-input-group__text--PaddingLeft);
16131
+ align-self: center;
16121
16132
  font-size: var(--pf-c-input-group__text--FontSize);
16122
16133
  color: var(--pf-c-input-group__text--Color);
16123
- text-align: center;
16124
- background-color: var(--pf-c-input-group__text--BackgroundColor);
16125
- border: var(--pf-c-input-group__text--BorderWidth) solid;
16126
- border-color: var(--pf-c-input-group__text--BorderTopColor) var(--pf-c-input-group__text--BorderRightColor) var(--pf-c-input-group__text--BorderBottomColor) var(--pf-c-input-group__text--BorderLeftColor);
16127
16134
  }
16128
16135
  label.pf-c-input-group__text {
16129
16136
  cursor: pointer;
16130
16137
  }
16131
16138
 
16132
- .pf-c-input-group__text.pf-m-plain {
16133
- --pf-c-input-group__text--BorderWidth: 0;
16134
- margin-left: 0;
16135
- }
16136
- .pf-c-input-group__text.pf-m-disabled {
16137
- --pf-c-input-group__text--Color: var(--pf-c-input-group__text--m-disabled--Color);
16138
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
16139
- --pf-c-input-group__text--BorderBottomColor: var(--pf-c-input-group__text--m-disabled--BorderBottomColor);
16140
- }
16141
-
16142
16139
  :where(.pf-theme-dark) .pf-c-wizard__header, :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector,
16143
16140
  :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
16144
16141
  :where(.pf-theme-dark) .pf-c-page__header, :where(.pf-theme-dark) .pf-c-masthead, :where(.pf-theme-dark) .pf-c-login__header,
@@ -16176,31 +16173,20 @@ label.pf-c-input-group__text {
16176
16173
  }
16177
16174
 
16178
16175
  :where(.pf-theme-dark) .pf-c-input-group {
16179
- --pf-c-input-group--BackgroundColor: transparent;
16180
- --pf-c-input-group__text--BorderTopColor: transparent;
16181
- --pf-c-input-group__text--BorderRightColor: transparent;
16182
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
16183
- --pf-c-input-group__text--BorderLeftColor: transparent;
16184
- --pf-c-input-group__text--BackgroundColor: var(--pf-global--palette--black-600);
16176
+ --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
16177
+ --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
16178
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
16179
+ --pf-c-input-group__item--m-box--BorderTopColor: transparent;
16180
+ --pf-c-input-group__item--m-box--BorderRightColor: transparent;
16181
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
16182
+ --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
16183
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
16184
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16185
16185
  --pf-c-input-group__text--m-disabled--Color: var(--pf-global--palette--black-100);
16186
- --pf-c-input-group__text--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
16187
16186
  }
16188
16187
  :where(.pf-theme-dark) .pf-c-input-group > * + * {
16189
- margin-left: 0;
16190
- border-left: 1px solid var(--pf-global--palette--black-700);
16191
- }
16192
- :where(.pf-theme-dark) .pf-c-input-group__text {
16193
- --pf-c-input-group__text--BorderTopColor: transparent;
16194
- --pf-c-input-group__text--BorderRightColor: transparent;
16195
- --pf-c-input-group__text--BorderBottomColor: var(--pf-global--BorderColor--400);
16196
- --pf-c-input-group__text--BorderLeftColor: transparent;
16197
- }
16198
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-plain {
16199
- --pf-c-input-group__text--BackgroundColor: transparent;
16200
- }
16201
- :where(.pf-theme-dark) .pf-c-input-group__text.pf-m-disabled {
16202
- --pf-c-input-group__text--BackgroundColor: var(--pf-c-input-group__text--m-disabled--BackgroundColor);
16203
- color: var(--pf-c-input-group__text--m-disabled--Color);
16188
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
16189
+ border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
16204
16190
  }
16205
16191
 
16206
16192
  .pf-c-jump-links {
@@ -21279,7 +21265,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21279
21265
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
21280
21266
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
21281
21267
  --pf-c-options-menu__toggle--MinWidth: 0;
21282
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
21283
21268
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
21284
21269
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
21285
21270
  --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -21387,7 +21372,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21387
21372
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
21388
21373
  max-width: 100%;
21389
21374
  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
21390
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
21391
21375
  color: var(--pf-c-options-menu__toggle--Color);
21392
21376
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
21393
21377
  border: none;
@@ -21405,9 +21389,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21405
21389
  display: inline-block;
21406
21390
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
21407
21391
  }
21408
- .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
21409
- line-height: var(--pf-c-options-menu__toggle--LineHeight);
21410
- }
21411
21392
  .pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
21412
21393
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
21413
21394
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);