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

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 (37) hide show
  1. package/components/DatePicker/date-picker.css +0 -8
  2. package/components/DatePicker/date-picker.scss +0 -9
  3. package/components/HelperText/helper-text.css +4 -0
  4. package/components/HelperText/helper-text.scss +5 -0
  5. package/components/InputGroup/input-group.css +61 -85
  6. package/components/InputGroup/input-group.scss +55 -61
  7. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  8. package/components/OptionsMenu/options-menu.css +0 -5
  9. package/components/OptionsMenu/options-menu.scss +0 -6
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  11. package/docs/components/DatePicker/examples/DatePicker.md +129 -94
  12. package/docs/components/FileUpload/examples/FileUpload.md +136 -96
  13. package/docs/components/Form/examples/Form.md +94 -73
  14. package/docs/components/HelperText/examples/HelperText.md +13 -24
  15. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  16. package/docs/components/Login/examples/Login.md +67 -30
  17. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  18. package/docs/components/Progress/examples/Progress.md +1 -1
  19. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  20. package/docs/components/Slider/examples/Slider.md +60 -38
  21. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  22. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  23. package/docs/demos/Alert/examples/Alert.md +105 -58
  24. package/docs/demos/DataList/examples/DataList.md +158 -150
  25. package/docs/demos/Form/examples/BasicForms.md +191 -191
  26. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  27. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  28. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  29. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +100 -84
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  31. package/docs/demos/Table/examples/Table.md +950 -902
  32. package/docs/demos/Toolbar/examples/Toolbar.md +330 -299
  33. package/package.json +2 -2
  34. package/patternfly-no-reset.css +64 -87
  35. package/patternfly.css +64 -87
  36. package/patternfly.min.css +1 -1
  37. 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.33",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,7 +42,7 @@
42
42
  "@commitlint/config-conventional": "^17.4.2",
43
43
  "@fortawesome/fontawesome": "^1.1.8",
44
44
  "@octokit/rest": "^19.0.7",
45
- "@patternfly/documentation-framework": "1.10.2",
45
+ "@patternfly/documentation-framework": "1.10.3",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "4.82.113",
48
48
  "@patternfly/react-core": "4.276.6",
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);
@@ -12335,9 +12335,6 @@ label.pf-c-check, .pf-c-check__label,
12335
12335
  --pf-c-date-picker--m-top__calendar--Top: 0;
12336
12336
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
12337
12337
  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
12338
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
12339
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
12340
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
12341
12338
  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
12342
12339
  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
12343
12340
  --pf-c-date-picker__input--c-form-control--width-chars: 10;
@@ -12355,11 +12352,6 @@ label.pf-c-check, .pf-c-check__label,
12355
12352
 
12356
12353
  .pf-c-date-picker__helper-text {
12357
12354
  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
12358
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
12359
- color: var(--pf-c-date-picker__helper-text--Color);
12360
- }
12361
- .pf-c-date-picker__helper-text.pf-m-error {
12362
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
12363
12355
  }
12364
12356
 
12365
12357
  .pf-c-date-picker__input .pf-c-form-control {
@@ -15659,6 +15651,10 @@ textarea.pf-c-form-control {
15659
15651
  gap: var(--pf-c-helper-text--Gap);
15660
15652
  font-size: var(--pf-c-helper-text--FontSize);
15661
15653
  }
15654
+ .pf-c-helper-text.pf-m-hidden {
15655
+ visibility: hidden;
15656
+ opacity: 0;
15657
+ }
15662
15658
 
15663
15659
  .pf-c-helper-text__item {
15664
15660
  display: flex;
@@ -15945,77 +15941,74 @@ textarea.pf-c-form-control {
15945
15941
  }
15946
15942
 
15947
15943
  .pf-c-input-group {
15948
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
15949
15944
  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
15945
+ --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
15946
+ --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
15947
+ --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
15948
+ --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
15949
+ --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
15950
+ --pf-c-input-group__item--BackgroundColor: transparent;
15951
+ --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
15952
+ --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
15953
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
15954
+ --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
15955
+ --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
15956
+ --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
15957
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
15958
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
15959
+ --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
15950
15960
  --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
15961
  --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;
15962
+ --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
15963
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
15964
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
15964
15965
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
15965
15966
  --pf-c-input-group--c-form-control--MarginRight: 0;
15966
- color: var(--pf-global--Color--100);
15967
15967
  display: flex;
15968
15968
  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
15969
  }
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);
15970
+
15971
+ .pf-c-input-group__item {
15972
+ position: relative;
15973
+ display: flex;
15974
+ min-width: var(--pf-c-input-group__item--MinWidth, revert);
15975
+ max-width: var(--pf-c-input-group__item--MaxWidth, revert);
15976
+ background-color: var(--pf-c-input-group__item--BackgroundColor);
15977
+ 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);
15978
+ }
15979
+ .pf-c-input-group__item:where(:not(:first-child)) {
15980
+ margin-left: var(--pf-c-input-group__item--MarginLeft);
15981
+ }
15982
+ .pf-c-input-group__item.pf-m-box {
15983
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
15984
+ padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
15985
+ padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
15986
+ border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
15987
+ 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);
15988
+ }
15989
+ .pf-c-input-group__item.pf-m-plain {
15990
+ --pf-c-input-group__item--MarginLeft: 0;
15991
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
15992
+ border: none;
15983
15993
  }
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;
15994
+ .pf-c-input-group__item.pf-m-disabled {
15995
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
15996
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
15997
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
15988
15998
  }
15989
- .pf-c-input-group textarea {
15990
- min-height: var(--pf-c-input-group__textarea--MinHeight);
15999
+ .pf-c-input-group__item.pf-m-fill {
16000
+ flex-grow: 1;
15991
16001
  }
15992
16002
 
15993
16003
  .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);
16004
+ align-self: center;
15998
16005
  font-size: var(--pf-c-input-group__text--FontSize);
15999
16006
  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
16007
  }
16005
16008
  label.pf-c-input-group__text {
16006
16009
  cursor: pointer;
16007
16010
  }
16008
16011
 
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
16012
  :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
16013
  :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
16021
16014
  :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 +16046,20 @@ label.pf-c-input-group__text {
16053
16046
  }
16054
16047
 
16055
16048
  :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);
16049
+ --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
16050
+ --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
16051
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
16052
+ --pf-c-input-group__item--m-box--BorderTopColor: transparent;
16053
+ --pf-c-input-group__item--m-box--BorderRightColor: transparent;
16054
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
16055
+ --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
16056
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
16057
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16062
16058
  --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
16059
  }
16065
16060
  :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);
16061
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
16062
+ border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
16081
16063
  }
16082
16064
 
16083
16065
  .pf-c-jump-links {
@@ -21156,7 +21138,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21156
21138
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
21157
21139
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
21158
21140
  --pf-c-options-menu__toggle--MinWidth: 0;
21159
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
21160
21141
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
21161
21142
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
21162
21143
  --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -21264,7 +21245,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21264
21245
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
21265
21246
  max-width: 100%;
21266
21247
  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
21248
  color: var(--pf-c-options-menu__toggle--Color);
21269
21249
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
21270
21250
  border: none;
@@ -21282,9 +21262,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21282
21262
  display: inline-block;
21283
21263
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
21284
21264
  }
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
21265
  .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
21266
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
21290
21267
  --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);
@@ -12458,9 +12458,6 @@ label.pf-c-check, .pf-c-check__label,
12458
12458
  --pf-c-date-picker--m-top__calendar--Top: 0;
12459
12459
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
12460
12460
  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
12461
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
12462
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
12463
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
12464
12461
  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
12465
12462
  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
12466
12463
  --pf-c-date-picker__input--c-form-control--width-chars: 10;
@@ -12478,11 +12475,6 @@ label.pf-c-check, .pf-c-check__label,
12478
12475
 
12479
12476
  .pf-c-date-picker__helper-text {
12480
12477
  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
12481
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
12482
- color: var(--pf-c-date-picker__helper-text--Color);
12483
- }
12484
- .pf-c-date-picker__helper-text.pf-m-error {
12485
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
12486
12478
  }
12487
12479
 
12488
12480
  .pf-c-date-picker__input .pf-c-form-control {
@@ -15782,6 +15774,10 @@ textarea.pf-c-form-control {
15782
15774
  gap: var(--pf-c-helper-text--Gap);
15783
15775
  font-size: var(--pf-c-helper-text--FontSize);
15784
15776
  }
15777
+ .pf-c-helper-text.pf-m-hidden {
15778
+ visibility: hidden;
15779
+ opacity: 0;
15780
+ }
15785
15781
 
15786
15782
  .pf-c-helper-text__item {
15787
15783
  display: flex;
@@ -16068,77 +16064,74 @@ textarea.pf-c-form-control {
16068
16064
  }
16069
16065
 
16070
16066
  .pf-c-input-group {
16071
- --pf-c-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
16072
16067
  --pf-c-input-group--child--ZIndex: var(--pf-global--ZIndex--xs);
16068
+ --pf-c-input-group__item--offset: var(--pf-global--BorderWidth--sm);
16069
+ --pf-c-input-group__item--MarginLeft: calc(var(--pf-c-input-group__item--offset) * -1);
16070
+ --pf-c-input-group__item--BorderWidth--base: var(--pf-c-input-group__item--offset);
16071
+ --pf-c-input-group__item--BorderColor--base: var(--pf-global--BorderColor--300);
16072
+ --pf-c-input-group__item--BorderColor--accent: var(--pf-global--BorderColor--200);
16073
+ --pf-c-input-group__item--BackgroundColor: transparent;
16074
+ --pf-c-input-group__item--m-box--PaddingRight: var(--pf-global--spacer--sm);
16075
+ --pf-c-input-group__item--m-box--PaddingLeft: var(--pf-global--spacer--sm);
16076
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
16077
+ --pf-c-input-group__item--m-box--BorderWidth: var(--pf-c-input-group__item--offset);
16078
+ --pf-c-input-group__item--m-box--BorderTopColor: var(--pf-c-input-group__item--BorderColor--base);
16079
+ --pf-c-input-group__item--m-box--BorderRightColor: var(--pf-c-input-group__item--BorderColor--base);
16080
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--BorderColor--accent);
16081
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderColor--base);
16082
+ --pf-c-input-group__item--m-plain--BackgroundColor: transparent;
16073
16083
  --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
16084
  --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;
16085
+ --pf-c-input-group__item--m-disabled__text--Color: var(--pf-global--disabled-color--100);
16086
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16087
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
16087
16088
  --pf-c-input-group--c-form-control--invalid--ZIndex: var(--pf-global--ZIndex--xs);
16088
16089
  --pf-c-input-group--c-form-control--MarginRight: 0;
16089
- color: var(--pf-global--Color--100);
16090
16090
  display: flex;
16091
16091
  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
16092
  }
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);
16093
+
16094
+ .pf-c-input-group__item {
16095
+ position: relative;
16096
+ display: flex;
16097
+ min-width: var(--pf-c-input-group__item--MinWidth, revert);
16098
+ max-width: var(--pf-c-input-group__item--MaxWidth, revert);
16099
+ background-color: var(--pf-c-input-group__item--BackgroundColor);
16100
+ 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);
16101
+ }
16102
+ .pf-c-input-group__item:where(:not(:first-child)) {
16103
+ margin-left: var(--pf-c-input-group__item--MarginLeft);
16104
+ }
16105
+ .pf-c-input-group__item.pf-m-box {
16106
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-box--BackgroundColor);
16107
+ padding-right: var(--pf-c-input-group__item--m-box--PaddingRight);
16108
+ padding-left: var(--pf-c-input-group__item--m-box--PaddingLeft);
16109
+ border: var(--pf-c-input-group__item--m-box--BorderWidth) solid;
16110
+ 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);
16111
+ }
16112
+ .pf-c-input-group__item.pf-m-plain {
16113
+ --pf-c-input-group__item--MarginLeft: 0;
16114
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-plain--BackgroundColor);
16115
+ border: none;
16106
16116
  }
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;
16117
+ .pf-c-input-group__item.pf-m-disabled {
16118
+ --pf-c-input-group__item--BackgroundColor: var(--pf-c-input-group__item--m-disabled--BackgroundColor);
16119
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-c-input-group__item--m-disabled--BorderBottomColor);
16120
+ --pf-c-input-group__text--Color: var(--pf-c-input-group__item--m-disabled__text--Color);
16111
16121
  }
16112
- .pf-c-input-group textarea {
16113
- min-height: var(--pf-c-input-group__textarea--MinHeight);
16122
+ .pf-c-input-group__item.pf-m-fill {
16123
+ flex-grow: 1;
16114
16124
  }
16115
16125
 
16116
16126
  .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);
16127
+ align-self: center;
16121
16128
  font-size: var(--pf-c-input-group__text--FontSize);
16122
16129
  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
16130
  }
16128
16131
  label.pf-c-input-group__text {
16129
16132
  cursor: pointer;
16130
16133
  }
16131
16134
 
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
16135
  :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
16136
  :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-],
16144
16137
  :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 +16169,20 @@ label.pf-c-input-group__text {
16176
16169
  }
16177
16170
 
16178
16171
  :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);
16172
+ --pf-c-input-group__item--BorderLeftWidth: var(--pf-c-input-group__item--BorderWidth--base);
16173
+ --pf-c-input-group__item--BorderLeftColor: var(--pf-global--palette--black-700);
16174
+ --pf-c-input-group__item--m-box--BackgroundColor: var(--pf-global--BackgroundColor--400);
16175
+ --pf-c-input-group__item--m-box--BorderTopColor: transparent;
16176
+ --pf-c-input-group__item--m-box--BorderRightColor: transparent;
16177
+ --pf-c-input-group__item--m-box--BorderBottomColor: var(--pf-global--BorderColor--400);
16178
+ --pf-c-input-group__item--m-box--BorderLeftColor: transparent;
16179
+ --pf-c-input-group__item--m-disabled--BackgroundColor: var(--pf-global--disabled-color--200);
16180
+ --pf-c-input-group__item--m-disabled--BorderBottomColor: transparent;
16185
16181
  --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
16182
  }
16188
16183
  :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);
16184
+ --pf-c-input-group__item--m-box--BorderLeftColor: var(--pf-c-input-group__item--BorderLeftColor);
16185
+ border-left: var(--pf-c-input-group__item--BorderLeftWidth) solid var(--pf-c-input-group__item--BorderLeftColor);
16204
16186
  }
16205
16187
 
16206
16188
  .pf-c-jump-links {
@@ -21279,7 +21261,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21279
21261
  --pf-c-options-menu__toggle--PaddingBottom: var(--pf-global--spacer--form-element);
21280
21262
  --pf-c-options-menu__toggle--PaddingLeft: var(--pf-global--spacer--sm);
21281
21263
  --pf-c-options-menu__toggle--MinWidth: 0;
21282
- --pf-c-options-menu__toggle--LineHeight: var(--pf-global--LineHeight--md);
21283
21264
  --pf-c-options-menu__toggle--BorderWidth: var(--pf-global--BorderWidth--sm);
21284
21265
  --pf-c-options-menu__toggle--BorderTopColor: var(--pf-global--BorderColor--300);
21285
21266
  --pf-c-options-menu__toggle--BorderRightColor: var(--pf-global--BorderColor--300);
@@ -21387,7 +21368,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21387
21368
  min-width: var(--pf-c-options-menu__toggle--MinWidth);
21388
21369
  max-width: 100%;
21389
21370
  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
21371
  color: var(--pf-c-options-menu__toggle--Color);
21392
21372
  background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
21393
21373
  border: none;
@@ -21405,9 +21385,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
21405
21385
  display: inline-block;
21406
21386
  color: var(--pf-c-options-menu__toggle--m-plain--Color);
21407
21387
  }
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
21388
  .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
21389
  --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
21413
21390
  --pf-c-options-menu--m-plain__toggle-icon--Color: var(--pf-c-options-menu--m-plain--hover__toggle-icon--Color);