@patternfly/patternfly 6.2.0-prerelease.23 → 6.2.0-prerelease.25

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 (10) hide show
  1. package/components/Alert/alert-group.css +2 -2
  2. package/components/Alert/alert-group.scss +2 -1
  3. package/components/FormControl/form-control.css +108 -41
  4. package/components/FormControl/form-control.scss +138 -49
  5. package/components/_index.css +110 -43
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +110 -43
  8. package/patternfly.css +110 -43
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/_index.css CHANGED
@@ -677,14 +677,14 @@
677
677
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
678
678
  }
679
679
  }
680
- .pf-v6-c-alert-group__item.pf-m-offstage-top {
680
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
681
681
  grid-template-rows: 0fr;
682
682
  margin-block: 0;
683
683
  overflow: hidden;
684
684
  opacity: 0;
685
685
  transform: translateY(-100%);
686
686
  }
687
- .pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
687
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
688
688
  min-height: 0;
689
689
  padding-block-start: 0;
690
690
  padding-block-end: 0;
@@ -6938,10 +6938,29 @@ ul) {
6938
6938
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
6939
6939
  --pf-v6-c-form-control--Width: 100%;
6940
6940
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
6941
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6942
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
6943
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6944
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6941
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
6942
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
6943
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
6944
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
6945
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6946
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6947
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6948
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6949
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
6950
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
6951
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
6952
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6953
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6954
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6955
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6956
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6957
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6958
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6959
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6960
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6961
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6962
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6963
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6945
6964
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
6946
6965
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
6947
6966
  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
@@ -6961,25 +6980,33 @@ ul) {
6961
6980
  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
6962
6981
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
6963
6982
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
6983
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
6964
6984
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6965
6985
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
6966
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
6986
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
6987
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
6988
+ --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6989
+ --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
6990
+ --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
6967
6991
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6968
6992
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6969
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
6993
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
6994
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
6995
+ --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6996
+ --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
6997
+ --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
6970
6998
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6971
6999
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6972
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
7000
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
7001
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
6973
7002
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
6974
- --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
7003
+ --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
7004
+ --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
7005
+ --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
7006
+ --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6975
7007
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
6976
7008
  --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
6977
- --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
6978
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6979
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6980
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
6981
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
6982
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
7009
+ --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6983
7010
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
6984
7011
  --pf-v6-c-form-control--textarea--Height: auto;
6985
7012
  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
@@ -6993,11 +7020,13 @@ ul) {
6993
7020
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
6994
7021
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
6995
7022
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
6996
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6997
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6998
- --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6999
- --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
7023
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
7024
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
7025
+ --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7026
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
7027
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
7000
7028
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7029
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
7001
7030
  --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
7002
7031
  }
7003
7032
 
@@ -7051,6 +7080,14 @@ ul) {
7051
7080
  .pf-v6-c-form-control > :is(input, select) {
7052
7081
  text-overflow: ellipsis;
7053
7082
  }
7083
+ .pf-v6-c-form-control:has(input) {
7084
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
7085
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
7086
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
7087
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
7088
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
7089
+ }
7090
+
7054
7091
  .pf-v6-c-form-control.pf-m-textarea {
7055
7092
  padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
7056
7093
  padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
@@ -7060,14 +7097,20 @@ ul) {
7060
7097
  .pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error {
7061
7098
  --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap));
7062
7099
  }
7100
+ .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
7101
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7102
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
7103
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
7104
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px));
7105
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
7106
+ }
7063
7107
  .pf-v6-c-form-control.pf-m-textarea > textarea {
7064
- padding-block-start: calc(var(--pf-v6-c-form-control--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7065
- padding-block-end: calc(var(--pf-v6-c-form-control--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
7066
- padding-inline-start: calc(var(--pf-v6-c-form-control--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
7067
- padding-inline-end: calc(var(--pf-v6-c-form-control--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0));
7068
7108
  outline-offset: 0;
7069
7109
  scrollbar-gutter: stable;
7070
7110
  }
7111
+ .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
7112
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
7113
+ }
7071
7114
  .pf-v6-c-form-control.pf-m-readonly {
7072
7115
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
7073
7116
  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
@@ -7100,37 +7143,58 @@ ul) {
7100
7143
  cursor: not-allowed;
7101
7144
  }
7102
7145
  .pf-v6-c-form-control.pf-m-error {
7103
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
7104
7146
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
7105
7147
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
7106
7148
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
7107
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
7108
7149
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
7109
7150
  }
7110
- .pf-v6-c-form-control.pf-m-error.pf-m-icon {
7111
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7151
+ .pf-v6-c-form-control.pf-m-error > textarea {
7152
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
7153
+ }
7154
+ .pf-v6-c-form-control.pf-m-error > input {
7155
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
7156
+ }
7157
+ .pf-v6-c-form-control.pf-m-error > select {
7158
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd));
7159
+ }
7160
+ .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
7161
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7112
7162
  }
7113
7163
  .pf-v6-c-form-control.pf-m-success {
7114
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
7115
7164
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
7116
7165
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
7117
7166
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
7118
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
7119
7167
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
7120
7168
  }
7121
- .pf-v6-c-form-control.pf-m-success.pf-m-icon {
7122
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7169
+ .pf-v6-c-form-control.pf-m-success > textarea {
7170
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
7171
+ }
7172
+ .pf-v6-c-form-control.pf-m-success > input {
7173
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
7174
+ }
7175
+ .pf-v6-c-form-control.pf-m-success > select {
7176
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd));
7177
+ }
7178
+ .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
7179
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7123
7180
  }
7124
7181
  .pf-v6-c-form-control.pf-m-warning {
7125
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
7126
7182
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
7127
7183
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
7128
7184
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
7129
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
7130
7185
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
7131
7186
  }
7132
- .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
7133
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7187
+ .pf-v6-c-form-control.pf-m-warning > textarea {
7188
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
7189
+ }
7190
+ .pf-v6-c-form-control.pf-m-warning > input {
7191
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
7192
+ }
7193
+ .pf-v6-c-form-control.pf-m-warning > select {
7194
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd));
7195
+ }
7196
+ .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
7197
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7134
7198
  }
7135
7199
  .pf-v6-c-form-control:hover {
7136
7200
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
@@ -7139,13 +7203,19 @@ ul) {
7139
7203
  .pf-v6-c-form-control.pf-m-icon {
7140
7204
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
7141
7205
  }
7142
- .pf-v6-c-form-control > select {
7143
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
7206
+ .pf-v6-c-form-control:has(select) {
7207
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
7208
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
7144
7209
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
7210
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
7211
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7145
7212
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
7146
7213
  }
7214
+ .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
7215
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7216
+ }
7147
7217
  @-moz-document url-prefix() {
7148
- .pf-v6-c-form-control > select {
7218
+ .pf-v6-c-form-control:has(select) {
7149
7219
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
7150
7220
  --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
7151
7221
  }
@@ -7191,6 +7261,7 @@ ul) {
7191
7261
  grid-column: 3;
7192
7262
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
7193
7263
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
7264
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
7194
7265
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
7195
7266
  pointer-events: none;
7196
7267
  }
@@ -7206,10 +7277,6 @@ ul) {
7206
7277
  pointer-events: none;
7207
7278
  }
7208
7279
 
7209
- select ~ .pf-v6-c-form-control__utilities {
7210
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
7211
- }
7212
-
7213
7280
  .pf-v6-c-hint {
7214
7281
  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
7215
7282
  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.2.0-prerelease.23",
4
+ "version": "6.2.0-prerelease.25",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -47,7 +47,7 @@
47
47
  "@commitlint/config-conventional": "^19.1.0",
48
48
  "@fortawesome/fontawesome": "^1.1.8",
49
49
  "@octokit/rest": "^20.1.0",
50
- "@patternfly/documentation-framework": "6.5.18",
50
+ "@patternfly/documentation-framework": "6.5.19",
51
51
  "@patternfly/patternfly-a11y": "5.0.0",
52
52
  "@patternfly/react-code-editor": "6.1.0",
53
53
  "@patternfly/react-core": "6.1.0",
package/patternfly-no-globals.css CHANGED
@@ -8139,14 +8139,14 @@
8139
8139
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
8140
8140
  }
8141
8141
  }
8142
- .pf-v6-c-alert-group__item.pf-m-offstage-top {
8142
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
8143
8143
  grid-template-rows: 0fr;
8144
8144
  margin-block: 0;
8145
8145
  overflow: hidden;
8146
8146
  opacity: 0;
8147
8147
  transform: translateY(-100%);
8148
8148
  }
8149
- .pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
8149
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
8150
8150
  min-height: 0;
8151
8151
  padding-block-start: 0;
8152
8152
  padding-block-end: 0;
@@ -14400,10 +14400,29 @@ ul) {
14400
14400
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
14401
14401
  --pf-v6-c-form-control--Width: 100%;
14402
14402
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
14403
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
14404
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
14405
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
14406
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
14403
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
14404
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
14405
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
14406
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
14407
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
14408
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
14409
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
14410
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
14411
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
14412
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
14413
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
14414
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
14415
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
14416
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
14417
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
14418
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
14419
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
14420
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
14421
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
14422
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
14423
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
14424
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
14425
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
14407
14426
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
14408
14427
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
14409
14428
  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
@@ -14423,25 +14442,33 @@ ul) {
14423
14442
  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
14424
14443
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
14425
14444
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
14445
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
14426
14446
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14427
14447
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
14428
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
14448
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
14449
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
14450
+ --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
14451
+ --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
14452
+ --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
14429
14453
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14430
14454
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
14431
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
14455
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
14456
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
14457
+ --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
14458
+ --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
14459
+ --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
14432
14460
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
14433
14461
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
14434
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
14462
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
14463
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
14435
14464
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
14436
- --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
14465
+ --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
14466
+ --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
14467
+ --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
14468
+ --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
14437
14469
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
14438
14470
  --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
14439
- --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
14440
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
14441
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
14442
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
14443
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
14444
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
14471
+ --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
14445
14472
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
14446
14473
  --pf-v6-c-form-control--textarea--Height: auto;
14447
14474
  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
@@ -14455,11 +14482,13 @@ ul) {
14455
14482
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
14456
14483
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
14457
14484
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
14458
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
14459
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
14460
- --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
14461
- --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
14485
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
14486
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
14487
+ --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
14488
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
14489
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
14462
14490
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
14491
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
14463
14492
  --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
14464
14493
  }
14465
14494
 
@@ -14513,6 +14542,14 @@ ul) {
14513
14542
  .pf-v6-c-form-control > :is(input, select) {
14514
14543
  text-overflow: ellipsis;
14515
14544
  }
14545
+ .pf-v6-c-form-control:has(input) {
14546
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
14547
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
14548
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
14549
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
14550
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
14551
+ }
14552
+
14516
14553
  .pf-v6-c-form-control.pf-m-textarea {
14517
14554
  padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
14518
14555
  padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
@@ -14522,14 +14559,20 @@ ul) {
14522
14559
  .pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error {
14523
14560
  --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap));
14524
14561
  }
14562
+ .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
14563
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
14564
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
14565
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
14566
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px));
14567
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
14568
+ }
14525
14569
  .pf-v6-c-form-control.pf-m-textarea > textarea {
14526
- padding-block-start: calc(var(--pf-v6-c-form-control--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
14527
- padding-block-end: calc(var(--pf-v6-c-form-control--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
14528
- padding-inline-start: calc(var(--pf-v6-c-form-control--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
14529
- padding-inline-end: calc(var(--pf-v6-c-form-control--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0));
14530
14570
  outline-offset: 0;
14531
14571
  scrollbar-gutter: stable;
14532
14572
  }
14573
+ .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
14574
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
14575
+ }
14533
14576
  .pf-v6-c-form-control.pf-m-readonly {
14534
14577
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
14535
14578
  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
@@ -14562,37 +14605,58 @@ ul) {
14562
14605
  cursor: not-allowed;
14563
14606
  }
14564
14607
  .pf-v6-c-form-control.pf-m-error {
14565
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
14566
14608
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
14567
14609
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
14568
14610
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
14569
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
14570
14611
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
14571
14612
  }
14572
- .pf-v6-c-form-control.pf-m-error.pf-m-icon {
14573
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
14613
+ .pf-v6-c-form-control.pf-m-error > textarea {
14614
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
14615
+ }
14616
+ .pf-v6-c-form-control.pf-m-error > input {
14617
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
14618
+ }
14619
+ .pf-v6-c-form-control.pf-m-error > select {
14620
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd));
14621
+ }
14622
+ .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
14623
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
14574
14624
  }
14575
14625
  .pf-v6-c-form-control.pf-m-success {
14576
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
14577
14626
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
14578
14627
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
14579
14628
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
14580
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
14581
14629
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
14582
14630
  }
14583
- .pf-v6-c-form-control.pf-m-success.pf-m-icon {
14584
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
14631
+ .pf-v6-c-form-control.pf-m-success > textarea {
14632
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
14633
+ }
14634
+ .pf-v6-c-form-control.pf-m-success > input {
14635
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
14636
+ }
14637
+ .pf-v6-c-form-control.pf-m-success > select {
14638
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd));
14639
+ }
14640
+ .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
14641
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
14585
14642
  }
14586
14643
  .pf-v6-c-form-control.pf-m-warning {
14587
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
14588
14644
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
14589
14645
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
14590
14646
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
14591
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
14592
14647
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
14593
14648
  }
14594
- .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
14595
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
14649
+ .pf-v6-c-form-control.pf-m-warning > textarea {
14650
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
14651
+ }
14652
+ .pf-v6-c-form-control.pf-m-warning > input {
14653
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
14654
+ }
14655
+ .pf-v6-c-form-control.pf-m-warning > select {
14656
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd));
14657
+ }
14658
+ .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
14659
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
14596
14660
  }
14597
14661
  .pf-v6-c-form-control:hover {
14598
14662
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
@@ -14601,13 +14665,19 @@ ul) {
14601
14665
  .pf-v6-c-form-control.pf-m-icon {
14602
14666
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
14603
14667
  }
14604
- .pf-v6-c-form-control > select {
14605
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
14668
+ .pf-v6-c-form-control:has(select) {
14669
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
14670
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
14606
14671
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
14672
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
14673
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
14607
14674
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
14608
14675
  }
14676
+ .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
14677
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
14678
+ }
14609
14679
  @-moz-document url-prefix() {
14610
- .pf-v6-c-form-control > select {
14680
+ .pf-v6-c-form-control:has(select) {
14611
14681
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
14612
14682
  --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
14613
14683
  }
@@ -14653,6 +14723,7 @@ ul) {
14653
14723
  grid-column: 3;
14654
14724
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
14655
14725
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
14726
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
14656
14727
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
14657
14728
  pointer-events: none;
14658
14729
  }
@@ -14668,10 +14739,6 @@ ul) {
14668
14739
  pointer-events: none;
14669
14740
  }
14670
14741
 
14671
- select ~ .pf-v6-c-form-control__utilities {
14672
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
14673
- }
14674
-
14675
14742
  .pf-v6-c-hint {
14676
14743
  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
14677
14744
  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);