@patternfly/patternfly 5.0.0-alpha.53 → 5.0.0-alpha.54

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 (39) hide show
  1. package/components/FormControl/form-control.css +164 -214
  2. package/components/FormControl/form-control.scss +175 -281
  3. package/components/FormControl/themes/dark/form-control.scss +1 -2
  4. package/components/NumberInput/number-input.css +0 -1
  5. package/components/NumberInput/number-input.scss +0 -1
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  7. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  8. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  9. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  10. package/docs/components/Form/examples/Form.md +165 -145
  11. package/docs/components/FormControl/examples/FormControl.md +439 -475
  12. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  13. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  14. package/docs/components/Login/examples/Login.md +92 -82
  15. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  16. package/docs/components/Pagination/examples/Pagination.md +100 -89
  17. package/docs/components/Select/examples/Select.md +77 -68
  18. package/docs/components/Slider/examples/Slider.md +31 -44
  19. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  20. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  21. package/docs/components/Wizard/examples/Wizard.md +280 -245
  22. package/docs/demos/Alert/examples/Alert.md +69 -57
  23. package/docs/demos/Button/examples/Button.md +54 -48
  24. package/docs/demos/CardView/examples/CardView.md +9 -8
  25. package/docs/demos/DataList/examples/DataList.md +36 -32
  26. package/docs/demos/Form/examples/BasicForms.md +247 -227
  27. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  28. package/docs/demos/Modal/examples/Modal.md +14 -21
  29. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  30. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  31. package/docs/demos/Table/examples/Table.md +99 -88
  32. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  33. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  34. package/package.json +3 -3
  35. package/patternfly-no-globals.css +161 -212
  36. package/patternfly.css +161 -212
  37. package/patternfly.min.css +1 -1
  38. package/patternfly.min.css.map +1 -1
  39. package/docs/components/FormControl/examples/FormControl.css +0 -5
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.53",
4
+ "version": "5.0.0-alpha.54",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -42,10 +42,10 @@
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": "2.0.0-alpha.34",
45
+ "@patternfly/documentation-framework": "2.0.0-alpha.40",
46
46
  "@patternfly/patternfly-a11y": "4.3.1",
47
47
  "@patternfly/react-code-editor": "5.0.0-alpha.92",
48
- "@patternfly/react-core": "5.0.0-alpha.91",
48
+ "@patternfly/react-core": "5.0.0-alpha.98",
49
49
  "@patternfly/react-table": "5.0.0-alpha.93",
50
50
  "@starptech/prettyhtml": "^0.10.0",
51
51
  "cheerio": "^1.0.0-rc.12",
@@ -14702,9 +14702,11 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14702
14702
  }
14703
14703
 
14704
14704
  .pf-v5-c-form-control {
14705
+ --pf-v5-c-form-control--ColumnGap: var(--pf-v5-global--spacer--sm);
14705
14706
  --pf-v5-c-form-control--Color: var(--pf-v5-global--Color--100);
14706
14707
  --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--md);
14707
14708
  --pf-v5-c-form-control--LineHeight: var(--pf-v5-global--LineHeight--md);
14709
+ --pf-v5-c-form-control--Resize: none;
14708
14710
  --pf-v5-c-form-control--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
14709
14711
  --pf-v5-c-form-control--BorderTopColor: var(--pf-v5-global--BorderColor--300);
14710
14712
  --pf-v5-c-form-control--BorderRightColor: var(--pf-v5-global--BorderColor--300);
@@ -14712,7 +14714,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14712
14714
  --pf-v5-c-form-control--BorderLeftColor: var(--pf-v5-global--BorderColor--300);
14713
14715
  --pf-v5-c-form-control--BorderRadius: 0;
14714
14716
  --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
14715
- --pf-v5-c-form-control--Width: 100%;
14717
+ --pf-v5-c-form-control--Width: auto;
14716
14718
  --pf-v5-c-form-control--Height: calc(var(--pf-v5-c-form-control--FontSize) * var(--pf-v5-c-form-control--LineHeight) + var(--pf-v5-c-form-control--BorderWidth) * 2 + var(--pf-v5-c-form-control--PaddingTop) + var(--pf-v5-c-form-control--PaddingBottom));
14717
14719
  --pf-v5-c-form-control--inset--base: var(--pf-v5-global--spacer--sm);
14718
14720
  --pf-v5-c-form-control--PaddingTop: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
@@ -14726,134 +14728,101 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14726
14728
  --pf-v5-c-form-control--m-expanded--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14727
14729
  --pf-v5-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
14728
14730
  --pf-v5-c-form-control--m-expanded--BorderBottomColor: var(--pf-v5-global--primary-color--100);
14729
- --pf-v5-c-form-control--placeholder--Color: var(--pf-v5-global--Color--dark-200);
14730
- --pf-v5-c-form-control--placeholder--child--Color: var(--pf-v5-global--Color--100);
14731
- --pf-v5-c-form-control--disabled--Color: var(--pf-v5-global--disabled-color--100);
14732
- --pf-v5-c-form-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
14733
- --pf-v5-c-form-control--disabled--BorderColor: transparent;
14734
- --pf-v5-c-form-control--readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
14735
- --pf-v5-c-form-control--readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14736
- --pf-v5-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
14737
- --pf-v5-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
14738
- --pf-v5-c-form-control--readonly--focus--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14739
- --pf-v5-c-form-control--readonly--m-plain--BackgroundColor: transparent;
14740
- --pf-v5-c-form-control--readonly--m-plain--inset--base: 0;
14741
- --pf-v5-c-form-control--success--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14742
- --pf-v5-c-form-control--success--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--success--BorderBottomWidth));
14743
- --pf-v5-c-form-control--success--BorderBottomColor: var(--pf-v5-global--success-color--100);
14744
- --pf-v5-c-form-control--success--PaddingRight: var(--pf-v5-global--spacer--xl);
14745
- --pf-v5-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-v5-c-form-control--PaddingLeft));
14746
- --pf-v5-c-form-control--success--BackgroundPositionY: center;
14747
- --pf-v5-c-form-control--success--BackgroundPosition: var(--pf-v5-c-form-control--success--BackgroundPositionX) var(--pf-v5-c-form-control--success--BackgroundPositionY);
14748
- --pf-v5-c-form-control--success--BackgroundSizeX: var(--pf-v5-c-form-control--FontSize);
14749
- --pf-v5-c-form-control--success--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize);
14750
- --pf-v5-c-form-control--success--BackgroundSize: var(--pf-v5-c-form-control--success--BackgroundSizeX) var(--pf-v5-c-form-control--success--BackgroundSizeY);
14751
- --pf-v5-c-form-control--success--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%235ba352' d='M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z'/%3E%3C/svg%3E");
14731
+ --pf-v5-c-form-control--m-placeholder--Color: var(--pf-v5-global--Color--dark-200);
14732
+ --pf-v5-c-form-control--m-placeholder--child--Color: var(--pf-v5-global--Color--100);
14733
+ --pf-v5-c-form-control--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
14734
+ --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
14735
+ --pf-v5-c-form-control--m-disabled--BorderColor: transparent;
14736
+ --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-global--disabled-color--300);
14737
+ --pf-v5-c-form-control--m-readonly--hover--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14738
+ --pf-v5-c-form-control--m-readonly--focus--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-global--BorderWidth--sm));
14739
+ --pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
14740
+ --pf-v5-c-form-control--m-readonly--focus--BorderBottomColor: var(--pf-v5-global--BorderColor--200);
14741
+ --pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
14742
+ --pf-v5-c-form-control--m-readonly--m-plain--inset--base: 0;
14743
+ --pf-v5-c-form-control--m-success--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14744
+ --pf-v5-c-form-control--m-success--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
14745
+ --pf-v5-c-form-control--m-success--BorderBottomColor: var(--pf-v5-global--success-color--100);
14746
+ --pf-v5-c-form-control--m-success--PaddingRight: var(--pf-v5-global--spacer--xl);
14752
14747
  --pf-v5-c-form-control--m-warning--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14753
14748
  --pf-v5-c-form-control--m-warning--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
14754
14749
  --pf-v5-c-form-control--m-warning--BorderBottomColor: var(--pf-v5-global--warning-color--100);
14755
14750
  --pf-v5-c-form-control--m-warning--PaddingRight: var(--pf-v5-global--spacer--xl);
14756
- --pf-v5-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-v5-c-form-control--PaddingLeft) - 0.0625rem));
14757
- --pf-v5-c-form-control--m-warning--BackgroundPositionY: center;
14758
- --pf-v5-c-form-control--m-warning--BackgroundPosition: var(--pf-v5-c-form-control--m-warning--BackgroundPositionX) var(--pf-v5-c-form-control--m-warning--BackgroundPositionY);
14759
- --pf-v5-c-form-control--m-warning--BackgroundSizeX: 1.25rem;
14760
- --pf-v5-c-form-control--m-warning--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize);
14761
- --pf-v5-c-form-control--m-warning--BackgroundSize: var(--pf-v5-c-form-control--m-warning--BackgroundSizeX) var(--pf-v5-c-form-control--m-warning--BackgroundSizeY);
14762
- --pf-v5-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
14763
- --pf-v5-c-form-control--invalid--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14764
- --pf-v5-c-form-control--invalid--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--invalid--BorderBottomWidth));
14765
- --pf-v5-c-form-control--invalid--BorderBottomColor: var(--pf-v5-global--danger-color--100);
14766
- --pf-v5-c-form-control--invalid--PaddingRight: var(--pf-v5-global--spacer--xl);
14767
- --pf-v5-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-v5-c-form-control--PaddingLeft));
14768
- --pf-v5-c-form-control--invalid--BackgroundPositionY: center;
14769
- --pf-v5-c-form-control--invalid--BackgroundPosition: var(--pf-v5-c-form-control--invalid--BackgroundPositionX) var(--pf-v5-c-form-control--invalid--BackgroundPositionY);
14770
- --pf-v5-c-form-control--invalid--BackgroundSizeX: var(--pf-v5-c-form-control--FontSize);
14771
- --pf-v5-c-form-control--invalid--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize);
14772
- --pf-v5-c-form-control--invalid--BackgroundSize: var(--pf-v5-c-form-control--invalid--BackgroundSizeX) var(--pf-v5-c-form-control--invalid--BackgroundSizeY);
14773
- --pf-v5-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
14774
- --pf-v5-c-form-control--invalid--exclamation--Background: var(--pf-v5-c-form-control--invalid--BackgroundUrl) var(--pf-v5-c-form-control--invalid--BackgroundPosition) / var(--pf-v5-c-form-control--invalid--BackgroundSize) no-repeat;
14775
- --pf-v5-c-form-control--invalid--Background: var(--pf-v5-c-form-control--BackgroundColor) var(--pf-v5-c-form-control--invalid--exclamation--Background);
14776
- --pf-v5-c-form-control--m-search--PaddingLeft: var(--pf-v5-global--spacer--xl);
14777
- --pf-v5-c-form-control--m-search--BackgroundPosition: var(--pf-v5-c-form-control--PaddingRight);
14778
- --pf-v5-c-form-control--m-search--BackgroundSize: var(--pf-v5-c-form-control--FontSize) var(--pf-v5-c-form-control--FontSize);
14779
- --pf-v5-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
14780
- --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--BackgroundSizeX) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14781
- --pf-v5-c-form-control--m-icon--BackgroundUrl: none;
14782
- --pf-v5-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-v5-c-form-control--inset--base));
14783
- --pf-v5-c-form-control--m-icon--BackgroundPositionY: center;
14784
- --pf-v5-c-form-control--m-icon--BackgroundSizeX: var(--pf-v5-c-form-control--FontSize);
14785
- --pf-v5-c-form-control--m-icon--BackgroundSizeY: var(--pf-v5-c-form-control--FontSize);
14751
+ --pf-v5-c-form-control--m-error--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
14752
+ --pf-v5-c-form-control--m-error--PaddingBottom: calc(var(--pf-v5-global--spacer--form-element) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
14753
+ --pf-v5-c-form-control--m-error--BorderBottomColor: var(--pf-v5-global--danger-color--100);
14754
+ --pf-v5-c-form-control--m-error--PaddingRight: var(--pf-v5-global--spacer--xl);
14755
+ --pf-v5-c-form-control--m-error--IconWidth: var(--pf-v5-c-form-control--FontSize);
14756
+ --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--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14757
+ --pf-v5-c-form-control--m-icon--IconWidth: var(--pf-v5-c-form-control--FontSize);
14786
14758
  --pf-v5-c-form-control--m-icon--icon--spacer: var(--pf-v5-global--spacer--sm);
14787
- --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--invalid--BackgroundSizeX) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14788
- --pf-v5-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-v5-c-form-control--m-icon--BackgroundPositionX) - var(--pf-v5-c-form-control--m-icon--icon--spacer) - var(--pf-v5-c-form-control--invalid--BackgroundSizeX));
14789
- --pf-v5-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-v5-c-form-control--invalid--BackgroundUrl), var(--pf-v5-c-form-control--m-icon--BackgroundUrl);
14790
- --pf-v5-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-v5-c-form-control--invalid--BackgroundPosition), var(--pf-v5-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-v5-c-form-control--m-icon--BackgroundPositionY);
14791
- --pf-v5-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-v5-c-form-control--invalid--BackgroundSize), var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) var(--pf-v5-c-form-control--m-icon--BackgroundSizeY);
14792
- --pf-v5-c-form-control--m-icon--success--BackgroundUrl: var(--pf-v5-c-form-control--success--BackgroundUrl), var(--pf-v5-c-form-control--m-icon--BackgroundUrl);
14793
- --pf-v5-c-form-control--m-icon--success--BackgroundPosition: var(--pf-v5-c-form-control--success--BackgroundPosition), var(--pf-v5-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-v5-c-form-control--m-icon--BackgroundPositionY);
14794
- --pf-v5-c-form-control--m-icon--success--BackgroundSize: var(--pf-v5-c-form-control--success--BackgroundSize), var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) var(--pf-v5-c-form-control--m-icon--BackgroundSizeY);
14795
- --pf-v5-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-v5-c-form-control--m-warning--BackgroundUrl), var(--pf-v5-c-form-control--m-icon--BackgroundUrl);
14796
- --pf-v5-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-v5-c-form-control--m-warning--BackgroundPosition), var(--pf-v5-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-v5-c-form-control--m-icon--BackgroundPositionY);
14797
- --pf-v5-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-v5-c-form-control--m-warning--BackgroundSize), var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) var(--pf-v5-c-form-control--m-icon--BackgroundSizeY);
14798
- --pf-v5-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
14799
- --pf-v5-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
14759
+ --pf-v5-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-v5-c-form-control--inset--base) + var(--pf-v5-c-form-control--m-error--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer) + var(--pf-v5-c-form-control--m-icon--IconWidth) + var(--pf-v5-c-form-control--m-icon--icon--spacer));
14800
14760
  --pf-v5-c-form-control__select--PaddingRight: calc(var(--pf-v5-global--spacer--lg) + var(--pf-v5-c-form-control--BorderWidth) + var(--pf-v5-c-form-control--BorderWidth));
14801
14761
  --pf-v5-c-form-control__select--PaddingLeft: calc(var(--pf-v5-global--spacer--sm) - var(--pf-v5-c-form-control--BorderWidth));
14802
- --pf-v5-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
14803
- --pf-v5-c-form-control__select--BackgroundSize: .625em;
14804
- --pf-v5-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-v5-global--spacer--md) + 1px);
14805
- --pf-v5-c-form-control__select--BackgroundPositionY: center;
14806
- --pf-v5-c-form-control__select--BackgroundPosition: var(--pf-v5-c-form-control__select--BackgroundPositionX) var(--pf-v5-c-form-control__select--BackgroundPositionY);
14807
- --pf-v5-c-form-control__select--success--PaddingRight: var(--pf-v5-global--spacer--3xl);
14808
- --pf-v5-c-form-control__select--success--BackgroundPosition: calc(var(--pf-v5-c-form-control__select--BackgroundPositionX) - var(--pf-v5-global--spacer--lg));
14809
- --pf-v5-c-form-control__select--m-warning--PaddingRight: var(--pf-v5-global--spacer--3xl);
14810
- --pf-v5-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-v5-c-form-control__select--BackgroundPositionX) - var(--pf-v5-global--spacer--lg) + 0.0625rem);
14811
- --pf-v5-c-form-control__select--invalid--PaddingRight: var(--pf-v5-global--spacer--3xl);
14812
- --pf-v5-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-v5-c-form-control__select--BackgroundPositionX) - var(--pf-v5-global--spacer--lg));
14762
+ --pf-v5-c-form-control__select--m-success--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
14763
+ --pf-v5-c-form-control__select--m-warning--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
14764
+ --pf-v5-c-form-control__select--m-error--m-status--PaddingRight: var(--pf-v5-global--spacer--3xl);
14813
14765
  --pf-v5-c-form-control--textarea--Width: var(--pf-v5-c-form-control--Width);
14814
14766
  --pf-v5-c-form-control--textarea--Height: auto;
14815
- --pf-v5-c-form-control--textarea--success--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14816
- --pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14817
- --pf-v5-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--PaddingLeft);
14818
- --pf-v5-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-v5-c-form-control--FontSize);
14819
- --pf-v5-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-v5-global--spacer--md) + 7px);
14820
- --pf-v5-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-v5-global--spacer--md) + 1px - var(--pf-v5-global--spacer--lg));
14821
- --pf-v5-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-v5-global--spacer--md) - var(--pf-v5-global--spacer--lg) + 0.0625rem);
14822
- --pf-v5-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-v5-global--spacer--md) - var(--pf-v5-global--spacer--lg));
14767
+ --pf-v5-c-form-control__icon--Color: var(--pf-v5-global--icon--Color--light);
14768
+ --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-global--icon--Color--light);
14769
+ --pf-v5-c-form-control--m-success__icon--m-status--Color: var(--pf-v5-global--success-color--100);
14770
+ --pf-v5-c-form-control--m-warning__icon--m-status--Color: var(--pf-v5-global--warning-color--100);
14771
+ --pf-v5-c-form-control--m-error__icon--m-status--Color: var(--pf-v5-global--danger-color--100);
14772
+ --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
14773
+ --pf-v5-c-form-control__utilities--Gap: var(--pf-v5-global--spacer--sm);
14774
+ --pf-v5-c-form-control__utilities--PaddingTop: var(--pf-v5-c-form-control--inset--base);
14775
+ --pf-v5-c-form-control__utilities--PaddingRight: var(--pf-v5-c-form-control--inset--base);
14776
+ --pf-v5-c-form-control__toggle-icon--PaddingRight: var(--pf-v5-c-form-control--inset--base);
14777
+ --pf-v5-c-form-control__toggle-icon--PaddingLeft: var(--pf-v5-c-form-control--inset--base);
14778
+ --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - (2 * var(--pf-v5-c-form-control--BorderWidth)));
14779
+ --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-global--Color--100);
14780
+ --pf-v5-c-form-control--m-disabled__toggle-icon--Color: var(--pf-v5-global--disabled-color--100);
14823
14781
  color: var(--pf-v5-c-form-control--Color);
14782
+ position: relative;
14783
+ display: grid;
14784
+ grid-template-columns: 1fr auto;
14785
+ column-gap: var(--pf-v5-c-form-control--ColumnGap);
14786
+ align-items: start;
14824
14787
  width: var(--pf-v5-c-form-control--Width);
14825
- padding: var(--pf-v5-c-form-control--PaddingTop) var(--pf-v5-c-form-control--PaddingRight) var(--pf-v5-c-form-control--PaddingBottom) var(--pf-v5-c-form-control--PaddingLeft);
14826
14788
  font-size: var(--pf-v5-c-form-control--FontSize);
14827
14789
  line-height: var(--pf-v5-c-form-control--LineHeight);
14790
+ resize: var(--pf-v5-c-form-control--Resize);
14828
14791
  background-color: var(--pf-v5-c-form-control--BackgroundColor);
14829
- background-repeat: no-repeat;
14830
14792
  border: var(--pf-v5-c-form-control--BorderWidth) solid;
14831
14793
  border-color: var(--pf-v5-c-form-control--BorderTopColor) var(--pf-v5-c-form-control--BorderRightColor) var(--pf-v5-c-form-control--BorderBottomColor) var(--pf-v5-c-form-control--BorderLeftColor);
14832
14794
  border-radius: var(--pf-v5-c-form-control--BorderRadius);
14795
+ }
14796
+ .pf-v5-c-form-control > :is(input, select, textarea) {
14797
+ grid-row: 1/2;
14798
+ grid-column: 1/-1;
14799
+ padding: var(--pf-v5-c-form-control--PaddingTop) var(--pf-v5-c-form-control--PaddingRight) var(--pf-v5-c-form-control--PaddingBottom) var(--pf-v5-c-form-control--PaddingLeft);
14800
+ color: var(--pf-v5-c-form-control--Color);
14801
+ background-color: transparent;
14802
+ border: none;
14833
14803
  -moz-appearance: none;
14834
14804
  -webkit-appearance: none;
14835
14805
  }
14836
- .pf-v5-c-form-control::placeholder {
14837
- color: var(--pf-v5-c-form-control--placeholder--Color);
14806
+ .pf-v5-c-form-control > ::placeholder {
14807
+ color: var(--pf-v5-c-form-control--m-placeholder--Color);
14838
14808
  }
14839
- .pf-v5-c-form-control:not(textarea) {
14840
- height: var(--pf-v5-c-form-control--Height);
14809
+ .pf-v5-c-form-control > :is(input, select) {
14841
14810
  text-overflow: ellipsis;
14842
14811
  }
14843
- .pf-v5-c-form-control[readonly] {
14844
- background-color: var(--pf-v5-c-form-control--readonly--BackgroundColor);
14812
+ .pf-v5-c-form-control.pf-m-readonly {
14813
+ --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--BackgroundColor);
14845
14814
  }
14846
- .pf-v5-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):hover {
14847
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--readonly--hover--BorderBottomColor);
14815
+ .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):hover {
14816
+ --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--hover--BorderBottomColor);
14848
14817
  }
14849
- .pf-v5-c-form-control[readonly]:not(.pf-m-success):not([aria-invalid=true]):focus {
14850
- --pf-v5-c-form-control--focus--PaddingBottom: var(--pf-v5-c-form-control--readonly--focus--PaddingBottom);
14851
- --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-c-form-control--readonly--focus--BorderBottomWidth);
14852
- --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-c-form-control--readonly--focus--BorderBottomColor);
14818
+ .pf-v5-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error):focus {
14819
+ --pf-v5-c-form-control--focus--PaddingBottom: var(--pf-v5-c-form-control--m-readonly--focus--PaddingBottom);
14820
+ --pf-v5-c-form-control--focus--BorderBottomWidth: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomWidth);
14821
+ --pf-v5-c-form-control--focus--BorderBottomColor: var(--pf-v5-c-form-control--m-readonly--focus--BorderBottomColor);
14853
14822
  }
14854
- .pf-v5-c-form-control[readonly].pf-m-plain {
14855
- --pf-v5-c-form-control--readonly--BackgroundColor: var(--pf-v5-c-form-control--readonly--m-plain--BackgroundColor);
14856
- --pf-v5-c-form-control--inset--base: var(--pf-v5-c-form-control--readonly--m-plain--inset--base);
14823
+ .pf-v5-c-form-control.pf-m-readonly.pf-m-plain {
14824
+ --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--pf-v5-c-form-control--m-readonly--m-plain--BackgroundColor);
14825
+ --pf-v5-c-form-control--inset--base: var(--pf-v5-c-form-control--m-readonly--m-plain--inset--base);
14857
14826
  border-color: transparent;
14858
14827
  }
14859
14828
  .pf-v5-c-form-control:hover {
@@ -14861,154 +14830,136 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14861
14830
  }
14862
14831
  .pf-v5-c-form-control:focus {
14863
14832
  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--focus--BorderBottomColor);
14864
- padding-bottom: var(--pf-v5-c-form-control--focus--PaddingBottom);
14833
+ --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
14834
+ --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--focus--BorderBottomWidth));
14835
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--focus--PaddingBottom);
14865
14836
  border-bottom-width: var(--pf-v5-c-form-control--focus--BorderBottomWidth);
14866
14837
  }
14867
14838
  .pf-v5-c-form-control.pf-m-expanded {
14868
14839
  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-expanded--BorderBottomColor);
14869
- padding-bottom: var(--pf-v5-c-form-control--m-expanded--PaddingBottom);
14840
+ --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
14841
+ --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth));
14842
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-expanded--PaddingBottom);
14870
14843
  border-bottom-width: var(--pf-v5-c-form-control--m-expanded--BorderBottomWidth);
14871
14844
  }
14872
- .pf-v5-c-form-control:disabled {
14873
- --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--disabled--BackgroundColor);
14874
- color: var(--pf-v5-c-form-control--disabled--Color);
14845
+ .pf-v5-c-form-control.pf-m-disabled {
14846
+ --pf-v5-c-form-control--BackgroundColor: var(--pf-v5-c-form-control--m-disabled--BackgroundColor);
14847
+ --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-disabled--Color);
14848
+ --pf-v5-c-form-control__toggle-icon--Color: var(--pf-v5-c-form-control--m-disabled__toggle-icon--Color);
14875
14849
  cursor: not-allowed;
14876
- border-color: var(--pf-v5-c-form-control--disabled--BorderColor);
14877
- }
14878
- .pf-v5-c-form-control[aria-invalid=true] {
14879
- --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--invalid--PaddingRight);
14880
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--invalid--BorderBottomColor);
14881
- padding-bottom: var(--pf-v5-c-form-control--invalid--PaddingBottom);
14882
- background-image: var(--pf-v5-c-form-control--invalid--BackgroundUrl);
14883
- background-position: var(--pf-v5-c-form-control--invalid--BackgroundPosition);
14884
- background-size: var(--pf-v5-c-form-control--invalid--BackgroundSize);
14885
- border-bottom-width: var(--pf-v5-c-form-control--invalid--BorderBottomWidth);
14886
- }
14887
- .pf-v5-c-form-control[aria-invalid=true].pf-m-icon {
14850
+ border-color: var(--pf-v5-c-form-control--m-disabled--BorderColor);
14851
+ }
14852
+ .pf-v5-c-form-control.pf-m-error {
14853
+ --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-error--PaddingRight);
14854
+ --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-error--BorderBottomColor);
14855
+ --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-error__icon--m-status--Color);
14856
+ --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
14857
+ --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-error--BorderBottomWidth));
14858
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-error--PaddingBottom);
14859
+ --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-error--m-status--PaddingRight);
14860
+ border-bottom-width: var(--pf-v5-c-form-control--m-error--BorderBottomWidth);
14861
+ }
14862
+ .pf-v5-c-form-control.pf-m-error.pf-m-icon {
14888
14863
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
14889
- background-image: var(--pf-v5-c-form-control--m-icon--invalid--BackgroundUrl);
14890
- background-position: var(--pf-v5-c-form-control--m-icon--invalid--BackgroundPosition);
14891
- background-size: var(--pf-v5-c-form-control--m-icon--invalid--BackgroundSize);
14892
14864
  }
14893
14865
  .pf-v5-c-form-control.pf-m-success {
14894
- --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--success--PaddingRight);
14895
- --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--success--BorderBottomColor);
14896
- padding-bottom: var(--pf-v5-c-form-control--success--PaddingBottom);
14897
- background-image: var(--pf-v5-c-form-control--success--BackgroundUrl);
14898
- background-position: var(--pf-v5-c-form-control--success--BackgroundPosition);
14899
- background-size: var(--pf-v5-c-form-control--success--BackgroundSize);
14900
- border-bottom-width: var(--pf-v5-c-form-control--success--BorderBottomWidth);
14866
+ --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-success--PaddingRight);
14867
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-success--PaddingBottom);
14868
+ --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-success--BorderBottomColor);
14869
+ --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-success__icon--m-status--Color);
14870
+ --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
14871
+ --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-success--BorderBottomWidth));
14872
+ --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-success--m-status--PaddingRight);
14873
+ border-bottom-width: var(--pf-v5-c-form-control--m-success--BorderBottomWidth);
14901
14874
  }
14902
14875
  .pf-v5-c-form-control.pf-m-success.pf-m-icon {
14903
14876
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
14904
- background-image: var(--pf-v5-c-form-control--m-icon--success--BackgroundUrl);
14905
- background-position: var(--pf-v5-c-form-control--m-icon--success--BackgroundPosition);
14906
- background-size: var(--pf-v5-c-form-control--m-icon--success--BackgroundSize);
14907
14877
  }
14908
14878
  .pf-v5-c-form-control.pf-m-warning {
14909
14879
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-warning--PaddingRight);
14880
+ --pf-v5-c-form-control--PaddingBottom: var(--pf-v5-c-form-control--m-warning--PaddingBottom);
14910
14881
  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-c-form-control--m-warning--BorderBottomColor);
14911
- padding-bottom: var(--pf-v5-c-form-control--m-warning--PaddingBottom);
14912
- background-image: var(--pf-v5-c-form-control--m-warning--BackgroundUrl);
14913
- background-position: var(--pf-v5-c-form-control--m-warning--BackgroundPosition);
14914
- background-size: var(--pf-v5-c-form-control--m-warning--BackgroundSize);
14882
+ --pf-v5-c-form-control__icon--m-status--Color: var(--pf-v5-c-form-control--m-warning__icon--m-status--Color);
14883
+ --pf-v5-c-form-control__icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
14884
+ --pf-v5-c-form-control__toggle-icon--Height: calc(var(--pf-v5-c-form-control--Height) - var(--pf-v5-c-form-control--m-warning--BorderBottomWidth));
14885
+ --pf-v5-c-form-control__select--PaddingRight: var(--pf-v5-c-form-control__select--m-warning--m-status--PaddingRight);
14915
14886
  border-bottom-width: var(--pf-v5-c-form-control--m-warning--BorderBottomWidth);
14916
14887
  }
14917
14888
  .pf-v5-c-form-control.pf-m-warning.pf-m-icon {
14918
14889
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--icon--PaddingRight);
14919
- background-image: var(--pf-v5-c-form-control--m-icon--m-warning--BackgroundUrl);
14920
- background-position: var(--pf-v5-c-form-control--m-icon--m-warning--BackgroundPosition);
14921
- background-size: var(--pf-v5-c-form-control--m-icon--m-warning--BackgroundSize);
14922
- }
14923
- .pf-v5-c-form-control.pf-m-search {
14924
- --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control--m-search--PaddingLeft);
14925
- background-image: var(--pf-v5-c-form-control--m-search--BackgroundUrl);
14926
- background-position: var(--pf-v5-c-form-control--m-search--BackgroundPosition);
14927
- background-size: var(--pf-v5-c-form-control--m-search--BackgroundSize);
14928
14890
  }
14929
14891
  .pf-v5-c-form-control.pf-m-icon {
14930
14892
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control--m-icon--PaddingRight);
14931
- background-image: var(--pf-v5-c-form-control--m-icon--BackgroundUrl);
14932
- background-position: var(--pf-v5-c-form-control--m-icon--BackgroundPositionX) var(--pf-v5-c-form-control--m-icon--BackgroundPositionY);
14933
- background-size: var(--pf-v5-c-form-control--m-icon--BackgroundSizeX) var(--pf-v5-c-form-control--m-icon--BackgroundSizeY);
14934
- }
14935
- .pf-v5-c-form-control.pf-m-icon.pf-m-calendar {
14936
- --pf-v5-c-form-control--m-icon--BackgroundUrl: var(--pf-v5-c-form-control--m-calendar--BackgroundUrl);
14937
- }
14938
- .pf-v5-c-form-control.pf-m-icon.pf-m-clock {
14939
- --pf-v5-c-form-control--m-icon--BackgroundUrl: var(--pf-v5-c-form-control--m-clock--BackgroundUrl);
14940
- }
14941
- .pf-v5-c-form-control.pf-m-icon-sprite {
14942
- --pf-v5-c-form-control--success--BackgroundUrl: var(--pf-v5-c-form-control--m-icon-sprite--success--BackgroundUrl);
14943
- --pf-v5-c-form-control--m-warning--BackgroundUrl: var(--pf-v5-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
14944
- --pf-v5-c-form-control--invalid--BackgroundUrl: var(--pf-v5-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
14945
- --pf-v5-c-form-control__select--BackgroundUrl: var(--pf-v5-c-form-control--m-icon-sprite__select--BackgroundUrl);
14946
- --pf-v5-c-form-control--m-search--BackgroundUrl: var(--pf-v5-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
14947
- --pf-v5-c-form-control--m-calendar--BackgroundUrl: var(--pf-v5-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
14948
- --pf-v5-c-form-control--m-clock--BackgroundUrl: var(--pf-v5-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
14949
- --pf-v5-c-form-control__select--BackgroundSize: var(--pf-v5-c-form-control--m-icon-sprite__select--BackgroundSize);
14950
- --pf-v5-c-form-control__select--BackgroundPositionX: var(--pf-v5-c-form-control--m-icon-sprite__select--BackgroundPositionX);
14951
- --pf-v5-c-form-control__select--success--BackgroundPosition: var(--pf-v5-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
14952
- --pf-v5-c-form-control__select--m-warning--BackgroundPosition: var(--pf-v5-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
14953
- --pf-v5-c-form-control__select--invalid--BackgroundPosition: var(--pf-v5-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
14954
- }
14955
- select.pf-v5-c-form-control {
14893
+ }
14894
+ .pf-v5-c-form-control > select {
14956
14895
  --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--PaddingRight);
14957
14896
  --pf-v5-c-form-control--PaddingLeft: var(--pf-v5-c-form-control__select--PaddingLeft);
14958
- background-image: var(--pf-v5-c-form-control__select--BackgroundUrl);
14959
- background-position: var(--pf-v5-c-form-control__select--BackgroundPosition);
14960
- background-size: var(--pf-v5-c-form-control__select--BackgroundSize);
14961
14897
  }
14962
14898
  @-moz-document url-prefix() {
14963
- select.pf-v5-c-form-control {
14899
+ .pf-v5-c-form-control > select {
14964
14900
  --pf-v5-c-form-control--PaddingRight: calc(var(--pf-v5-c-form-control__select--PaddingRight) - 1px);
14965
14901
  --pf-v5-c-form-control--PaddingLeft: calc(var(--pf-v5-c-form-control__select--PaddingLeft) - 4px);
14966
14902
  }
14967
14903
  }
14968
- select.pf-v5-c-form-control[aria-invalid=true] {
14969
- --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--invalid--PaddingRight);
14970
- --pf-v5-c-form-control--invalid--BackgroundPosition: var(--pf-v5-c-form-control__select--invalid--BackgroundPosition);
14971
- background-image: var(--pf-v5-c-form-control__select--BackgroundUrl), var(--pf-v5-c-form-control--invalid--BackgroundUrl);
14972
- background-position: var(--pf-v5-c-form-control__select--BackgroundPosition), var(--pf-v5-c-form-control--invalid--BackgroundPosition);
14973
- background-size: var(--pf-v5-c-form-control__select--BackgroundSize), var(--pf-v5-c-form-control--invalid--BackgroundSize);
14904
+ .pf-v5-c-form-control.pf-m-placeholder > select {
14905
+ --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--Color);
14974
14906
  }
14975
- select.pf-v5-c-form-control.pf-m-success {
14976
- --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--success--PaddingRight);
14977
- --pf-v5-c-form-control--success--BackgroundPosition: var(--pf-v5-c-form-control__select--success--BackgroundPosition);
14978
- background-image: var(--pf-v5-c-form-control__select--BackgroundUrl), var(--pf-v5-c-form-control--success--BackgroundUrl);
14979
- background-position: var(--pf-v5-c-form-control__select--BackgroundPosition), var(--pf-v5-c-form-control--success--BackgroundPosition);
14980
- background-size: var(--pf-v5-c-form-control__select--BackgroundSize), var(--pf-v5-c-form-control--success--BackgroundSize);
14907
+ .pf-v5-c-form-control.pf-m-placeholder > select > * {
14908
+ --pf-v5-c-form-control--Color: var(--pf-v5-c-form-control--m-placeholder--child--Color);
14981
14909
  }
14982
- select.pf-v5-c-form-control.pf-m-warning {
14983
- --pf-v5-c-form-control--PaddingRight: var(--pf-v5-c-form-control__select--m-warning--PaddingRight);
14984
- background-image: var(--pf-v5-c-form-control__select--BackgroundUrl), var(--pf-v5-c-form-control--m-warning--BackgroundUrl);
14985
- background-position: var(--pf-v5-c-form-control__select--BackgroundPosition), var(--pf-v5-c-form-control__select--m-warning--BackgroundPosition);
14986
- background-size: var(--pf-v5-c-form-control__select--BackgroundSize), var(--pf-v5-c-form-control--m-warning--BackgroundSize);
14910
+ .pf-v5-c-form-control.pf-m-placeholder > select > *:disabled {
14911
+ color: revert;
14987
14912
  }
14988
- select.pf-v5-c-form-control.pf-m-placeholder {
14989
- color: var(--pf-v5-c-form-control--placeholder--Color);
14913
+ .pf-v5-c-form-control > textarea {
14914
+ width: 100%;
14915
+ height: 100%;
14916
+ vertical-align: bottom;
14917
+ resize: none;
14990
14918
  }
14991
- select.pf-v5-c-form-control.pf-m-placeholder * {
14992
- color: var(--pf-v5-c-form-control--placeholder--child--Color);
14919
+ .pf-v5-c-form-control.pf-m-resize-vertical {
14920
+ --pf-v5-c-form-control--Resize: vertical;
14921
+ overflow: auto;
14993
14922
  }
14994
- select.pf-v5-c-form-control.pf-m-placeholder *:disabled {
14995
- color: revert;
14923
+ .pf-v5-c-form-control.pf-m-resize-horizontal {
14924
+ --pf-v5-c-form-control--Resize: horizontal;
14925
+ overflow: auto;
14926
+ }
14927
+ .pf-v5-c-form-control.pf-m-resize-both {
14928
+ --pf-v5-c-form-control--Resize: both;
14929
+ overflow: auto;
14996
14930
  }
14997
14931
 
14998
- textarea.pf-v5-c-form-control {
14999
- --pf-v5-c-form-control--success--BackgroundPositionY: var(--pf-v5-c-form-control--textarea--success--BackgroundPositionY);
15000
- --pf-v5-c-form-control--invalid--BackgroundPositionY: var(--pf-v5-c-form-control--textarea--invalid--BackgroundPositionY);
15001
- --pf-v5-c-form-control--m-warning--BackgroundPositionY: var(--pf-v5-c-form-control--textarea--m-warning--BackgroundPositionY);
15002
- width: var(--pf-v5-c-form-control--textarea--Width);
15003
- height: var(--pf-v5-c-form-control--textarea--Height);
15004
- vertical-align: bottom;
14932
+ .pf-v5-c-form-control__icon {
14933
+ display: flex;
14934
+ align-items: center;
14935
+ height: var(--pf-v5-c-form-control__icon--Height);
14936
+ color: var(--pf-v5-c-form-control__icon--Color);
14937
+ }
14938
+ .pf-v5-c-form-control__icon.pf-m-status {
14939
+ --pf-v5-c-form-control__icon--Color: var(--pf-v5-c-form-control__icon--m-status--Color);
15005
14940
  }
15006
14941
 
15007
- .pf-v5-c-form-control.pf-m-resize-vertical {
15008
- resize: vertical;
14942
+ .pf-v5-c-form-control__toggle-icon {
14943
+ display: flex;
14944
+ grid-row: 1/2;
14945
+ grid-column: 3;
14946
+ align-items: center;
14947
+ height: var(--pf-v5-c-form-control__toggle-icon--Height);
14948
+ padding-right: var(--pf-v5-c-form-control__toggle-icon--PaddingRight);
14949
+ padding-left: var(--pf-v5-c-form-control__toggle-icon--PaddingLeft);
14950
+ color: var(--pf-v5-c-form-control__toggle-icon--Color);
14951
+ pointer-events: none;
15009
14952
  }
15010
- .pf-v5-c-form-control.pf-m-resize-horizontal {
15011
- resize: horizontal;
14953
+
14954
+ .pf-v5-c-form-control__utilities {
14955
+ display: flex;
14956
+ flex-wrap: nowrap;
14957
+ grid-row: 1/2;
14958
+ grid-column: 2;
14959
+ gap: var(--pf-v5-c-form-control__utilities--Gap);
14960
+ align-items: flex-start;
14961
+ padding-right: var(--pf-v5-c-form-control__utilities--PaddingRight);
14962
+ pointer-events: none;
15012
14963
  }
15013
14964
 
15014
14965
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header, :where(.pf-v5-theme-dark) .pf-v5-c-page__sidebar-body.pf-m-menu .pf-v5-c-context-selector,
@@ -15025,7 +14976,6 @@ textarea.pf-v5-c-form-control {
15025
14976
  }
15026
14977
 
15027
14978
  :where(.pf-v5-theme-dark) .pf-v5-c-form-control {
15028
- --pf-v5-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23e0e0e0' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
15029
14979
  --pf-v5-c-form-control--BorderTopColor: transparent;
15030
14980
  --pf-v5-c-form-control--BorderRightColor: transparent;
15031
14981
  --pf-v5-c-form-control--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
@@ -15039,7 +14989,7 @@ textarea.pf-v5-c-form-control {
15039
14989
  :where(.pf-v5-theme-dark) .pf-v5-c-form-control::-webkit-calendar-picker-indicator {
15040
14990
  filter: invert(1);
15041
14991
  }
15042
- :where(.pf-v5-theme-dark) .pf-v5-c-form-control[readonly] {
14992
+ :where(.pf-v5-theme-dark) .pf-v5-c-form-control.pf-m-readonly {
15043
14993
  border-bottom-color: var(--pf-v5-global--palette--black-700);
15044
14994
  }
15045
14995
 
@@ -29930,7 +29880,6 @@ svg.pf-v5-c-spinner.pf-m-xl {
29930
29880
  --pf-v5-c-number-input--c-form-control--width-icon: var(--pf-v5-c-number-input--m-status--c-form-control--width-icon);
29931
29881
  }
29932
29882
  .pf-v5-c-number-input .pf-v5-c-form-control {
29933
- display: inline-flex;
29934
29883
  width: var(--pf-v5-c-number-input--c-form-control--Width);
29935
29884
  text-align: right;
29936
29885
  }