@patternfly/patternfly 6.0.0-alpha.157 → 6.0.0-alpha.159

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 (20) hide show
  1. package/components/Pagination/pagination.css +6 -3
  2. package/components/Pagination/pagination.scss +6 -3
  3. package/components/TextInputGroup/text-input-group.css +20 -18
  4. package/components/TextInputGroup/text-input-group.scss +23 -22
  5. package/components/_index.css +26 -21
  6. package/docs/components/Pagination/examples/Pagination.md +196 -713
  7. package/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  8. package/docs/components/TextInputGroup/examples/TextInputGroup.md +21 -0
  9. package/docs/components/Toolbar/examples/Toolbar.md +34 -98
  10. package/docs/demos/CardView/examples/CardView.md +32 -98
  11. package/docs/demos/DataList/examples/DataList.md +128 -392
  12. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +96 -320
  13. package/docs/demos/Table/examples/Table.md +369 -1132
  14. package/docs/demos/Toolbar/examples/Toolbar.md +128 -392
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +26 -21
  17. package/patternfly.css +26 -21
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
  20. package/docs/components/Pagination/examples/Pagination.css +0 -3
package/components/Pagination/pagination.css CHANGED
@@ -28,14 +28,17 @@
28
28
  --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
29
29
  --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
30
30
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
31
+ --pf-v6-c-pagination__page-menu--Display--base: block;
31
32
  --pf-v6-c-pagination__page-menu--Display: none;
32
33
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
33
- --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
34
+ --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
35
+ --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
36
+ --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
34
37
  }
35
38
  @media screen and (min-width: 768px) {
36
39
  :where(:root, .pf-v6-c-pagination) {
37
40
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
38
- --pf-v6-c-pagination__page-menu--Display: inline-flex;
41
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
39
42
  --pf-v6-c-pagination__nav--Display: inline-flex;
40
43
  --pf-v6-c-pagination__total-items--Display: none;
41
44
  }
@@ -82,7 +85,7 @@
82
85
  }
83
86
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
84
87
  position: absolute;
85
- display: block;
88
+ display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
86
89
  }
87
90
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
88
91
  display: flex;
package/components/Pagination/pagination.scss CHANGED
@@ -47,13 +47,16 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
47
47
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
48
48
 
49
49
  // options menu
50
+ --#{$pagination}__page-menu--Display--base: block;
50
51
  --#{$pagination}__page-menu--Display: none;
51
52
  --#{$pagination}--m-display-summary__page-menu--Display: none;
52
- --#{$pagination}--m-display-full__page-menu--Display: inline-flex;
53
+ --#{$pagination}--m-display-full__page-menu--Display: var(--#{$pagination}__page-menu--Display--base);
54
+ --#{$pagination}--m-bottom__page-menu--Display: var(--#{$pagination}__page-menu--Display--base);
55
+ --#{$pagination}__page-menu--md--Display: var(--#{$pagination}__page-menu--Display--base);
53
56
 
54
57
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
55
58
  --#{$pagination}--m-bottom--BoxShadow: none;
56
- --#{$pagination}__page-menu--Display: inline-flex;
59
+ --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
57
60
  --#{$pagination}__nav--Display: inline-flex;
58
61
  --#{$pagination}__total-items--Display: none;
59
62
  }
@@ -104,7 +107,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
104
107
 
105
108
  .#{$pagination}__page-menu {
106
109
  position: absolute;
107
- display: block;
110
+ display: var(--#{$pagination}--m-bottom__page-menu--Display);
108
111
  }
109
112
 
110
113
  .#{$pagination}__nav {
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -2,15 +2,19 @@
2
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
3
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
4
4
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
5
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
6
5
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
7
6
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
8
7
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
9
8
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
10
9
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
11
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
12
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
13
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
11
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
12
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
13
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
14
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
15
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
16
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
17
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
14
18
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15
19
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16
20
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -36,15 +40,6 @@
36
40
  width: 100%;
37
41
  color: var(--pf-v6-c-text-input-group--Color, inherit);
38
42
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
39
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
40
- }
41
- .pf-v6-c-text-input-group::before {
42
- position: absolute;
43
- inset: 0;
44
- pointer-events: none;
45
- content: "";
46
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
47
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
48
43
  }
49
44
  .pf-v6-c-text-input-group:hover {
50
45
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -58,7 +53,7 @@
58
53
  .pf-v6-c-text-input-group.pf-m-plain {
59
54
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
60
55
  }
61
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
56
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
62
57
  border: 0;
63
58
  }
64
59
 
@@ -73,12 +68,14 @@
73
68
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
74
69
  }
75
70
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
71
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
72
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
76
73
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
77
74
  }
78
75
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
79
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
80
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
81
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
76
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
77
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
78
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
82
79
  }
83
80
 
84
81
  .pf-v6-c-text-input-group__text {
@@ -87,11 +84,16 @@
87
84
  grid-template-areas: "text-input";
88
85
  grid-template-columns: 1fr;
89
86
  }
90
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
87
+ .pf-v6-c-text-input-group__text::before {
91
88
  position: absolute;
92
89
  inset: 0;
93
90
  pointer-events: none;
94
91
  content: "";
92
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
93
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
94
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
95
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
96
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
95
97
  }
96
98
 
97
99
  .pf-v6-c-text-input-group__icon {
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
5
5
  --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
6
6
  --#{$text-input-group}--BorderWidth: var(--pf-t--global--border--width--control--default);
7
- --#{$text-input-group}--BorderRadius: var(--pf-t--global--border--radius--small);
8
7
 
9
8
  // Border hover
10
9
  --#{$text-input-group}--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -15,10 +14,17 @@
15
14
  --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
16
15
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
17
16
 
18
- // Chip group
19
- --#{$text-input-group}--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
20
- --#{$text-input-group}--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
21
- --#{$text-input-group}--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17
+ // Text wrapper
18
+ --#{$text-input-group}__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
19
+ --#{$text-input-group}__text--BorderStartStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
20
+ --#{$text-input-group}__text--BorderStartEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
21
+ --#{$text-input-group}__text--BorderEndEndRadius: var(--#{$text-input-group}__text--BorderRadius--base);
22
+ --#{$text-input-group}__text--BorderEndStartRadius: var(--#{$text-input-group}__text--BorderRadius--base);
23
+
24
+ // Label group
25
+ --#{$text-input-group}--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
26
+ --#{$text-input-group}--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
27
+ --#{$text-input-group}--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
22
28
 
23
29
  // Text input
24
30
  --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -52,16 +58,6 @@
52
58
  width: 100%; // when child of flex layout, take up space
53
59
  color: var(--#{$text-input-group}--Color, inherit);
54
60
  background-color: var(--#{$text-input-group}--BackgroundColor);
55
- border-radius: var(--#{$text-input-group}--BorderRadius);
56
-
57
- &::before {
58
- position: absolute;
59
- inset: 0;
60
- pointer-events: none;
61
- content: "";
62
- border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
63
- border-radius: var(--#{$text-input-group}--BorderRadius);
64
- }
65
61
 
66
62
  &:hover {
67
63
  --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
@@ -79,8 +75,7 @@
79
75
  --#{$text-input-group}--BackgroundColor: transparent;
80
76
 
81
77
  .#{$text-input-group}__text {
82
- &::before,
83
- &::after {
78
+ &::before {
84
79
  border: 0;
85
80
  }
86
81
  }
@@ -99,13 +94,15 @@
99
94
  }
100
95
 
101
96
  > :first-child:not(.#{$text-input-group}__text) {
97
+ padding-block-start: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockStart);
98
+ padding-block-end: var(--#{$text-input-group}__main--first-child--not--text-input--PaddingBlockEnd);
102
99
  margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart);
103
100
  }
104
101
 
105
102
  .#{$label-group}__main {
106
- padding-block-start: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockStart);
107
- padding-block-end: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockEnd);
108
- padding-inline-end: var(--#{$text-input-group}--c-chip-group__main--PaddingInlineEnd);
103
+ padding-block-start: var(--#{$text-input-group}--c-label-group__main--PaddingBlockStart);
104
+ padding-block-end: var(--#{$text-input-group}--c-label-group__main--PaddingBlockEnd);
105
+ padding-inline-end: var(--#{$text-input-group}--c-label-group__main--PaddingInlineEnd);
109
106
  }
110
107
  }
111
108
 
@@ -115,12 +112,16 @@
115
112
  grid-template-areas: "text-input";
116
113
  grid-template-columns: 1fr;
117
114
 
118
- &::before,
119
- &::after {
115
+ &::before {
120
116
  position: absolute;
121
117
  inset: 0;
122
118
  pointer-events: none;
123
119
  content: "";
120
+ border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
121
+ border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
122
+ border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
123
+ border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
124
+ border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
124
125
  }
125
126
  }
126
127
 
package/components/_index.css CHANGED
@@ -12255,14 +12255,17 @@ ul.pf-v6-c-list {
12255
12255
  --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12256
12256
  --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12257
12257
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
12258
+ --pf-v6-c-pagination__page-menu--Display--base: block;
12258
12259
  --pf-v6-c-pagination__page-menu--Display: none;
12259
12260
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
12260
- --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
12261
+ --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
12262
+ --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
12263
+ --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
12261
12264
  }
12262
12265
  @media screen and (min-width: 768px) {
12263
12266
  :where(:root, .pf-v6-c-pagination) {
12264
12267
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
12265
- --pf-v6-c-pagination__page-menu--Display: inline-flex;
12268
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
12266
12269
  --pf-v6-c-pagination__nav--Display: inline-flex;
12267
12270
  --pf-v6-c-pagination__total-items--Display: none;
12268
12271
  }
@@ -12309,7 +12312,7 @@ ul.pf-v6-c-list {
12309
12312
  }
12310
12313
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
12311
12314
  position: absolute;
12312
- display: block;
12315
+ display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
12313
12316
  }
12314
12317
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
12315
12318
  display: flex;
@@ -19015,15 +19018,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19015
19018
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
19016
19019
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
19017
19020
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
19018
- --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
19019
19021
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
19020
19022
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
19021
19023
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
19022
19024
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
19023
19025
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
19024
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19025
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
19026
- --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19026
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
19027
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19028
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19029
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19030
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
19031
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19032
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
19033
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
19027
19034
  --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19028
19035
  --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19029
19036
  --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -19049,15 +19056,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19049
19056
  width: 100%;
19050
19057
  color: var(--pf-v6-c-text-input-group--Color, inherit);
19051
19058
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
19052
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
19053
- }
19054
- .pf-v6-c-text-input-group::before {
19055
- position: absolute;
19056
- inset: 0;
19057
- pointer-events: none;
19058
- content: "";
19059
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
19060
- border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
19061
19059
  }
19062
19060
  .pf-v6-c-text-input-group:hover {
19063
19061
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -19071,7 +19069,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19071
19069
  .pf-v6-c-text-input-group.pf-m-plain {
19072
19070
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
19073
19071
  }
19074
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
19072
+ .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
19075
19073
  border: 0;
19076
19074
  }
19077
19075
 
@@ -19086,12 +19084,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19086
19084
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
19087
19085
  }
19088
19086
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
19087
+ padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
19088
+ padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
19089
19089
  margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
19090
19090
  }
19091
19091
  .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
19092
- padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
19093
- padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
19094
- padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
19092
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
19093
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
19094
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
19095
19095
  }
19096
19096
 
19097
19097
  .pf-v6-c-text-input-group__text {
@@ -19100,11 +19100,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19100
19100
  grid-template-areas: "text-input";
19101
19101
  grid-template-columns: 1fr;
19102
19102
  }
19103
- .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
19103
+ .pf-v6-c-text-input-group__text::before {
19104
19104
  position: absolute;
19105
19105
  inset: 0;
19106
19106
  pointer-events: none;
19107
19107
  content: "";
19108
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
19109
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
19110
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
19111
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
19112
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
19108
19113
  }
19109
19114
 
19110
19115
  .pf-v6-c-text-input-group__icon {