@patternfly/react-templates 6.5.0-prerelease.33 → 6.5.0-prerelease.34

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 (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-C3F75__j.css → output-B96TiU_x.css} +1934 -1934
  6. package/package.json +6 -6
package/dist/umd/assets/{output-C3F75__j.css → output-B96TiU_x.css} RENAMED
@@ -3,1671 +3,1350 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-check {
7
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
6
+ .pf-v6-c-label {
7
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
8
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
11
+ --pf-v6-c-label--MaxWidth: 100%;
12
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
13
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
15
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
16
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
17
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
18
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
19
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
20
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
21
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
22
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
23
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
24
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
25
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
26
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
27
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
28
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
29
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
30
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
31
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
32
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
33
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
34
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
35
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
36
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
37
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
38
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
39
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
40
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
41
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
42
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
43
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
44
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
45
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
46
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
47
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
48
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
49
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
50
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
51
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
52
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
53
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
54
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
55
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
56
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
57
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
58
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
59
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
60
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
61
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
62
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
63
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
64
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
65
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
66
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
67
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
68
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
69
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
70
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
71
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
72
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
73
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
74
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
75
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
76
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
77
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
78
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
79
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
80
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
81
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
82
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
83
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
84
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
85
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
86
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
87
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
88
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
89
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
90
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
91
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
92
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
93
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
94
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
95
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
96
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
97
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
98
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
99
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
100
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
101
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
102
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
103
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
104
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
105
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
106
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
107
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
108
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
109
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
110
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
111
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
112
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
113
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
114
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
115
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
116
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
117
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
118
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
119
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
120
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
121
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
122
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
123
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
124
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
125
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
126
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
127
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
128
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
129
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
130
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
131
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
132
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
133
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
134
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
135
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
136
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
137
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
138
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
139
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
140
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
141
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
142
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
143
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
144
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
145
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
146
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
147
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
148
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
149
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
150
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
151
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
152
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
153
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
154
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
155
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
156
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
157
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
158
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
159
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
160
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
161
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
162
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
163
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
164
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
165
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
166
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
167
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
168
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
169
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
170
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
171
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
172
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
173
+ --pf-v6-c-label__content--MaxWidth: 100%;
174
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
175
+ --pf-v6-c-label__content--Cursor: initial;
176
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
177
+ --pf-v6-c-label__text--MaxWidth: 100%;
178
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
179
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
180
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
181
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
182
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
183
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
184
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
185
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
186
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
187
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
188
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
189
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
190
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
191
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
192
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
193
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
194
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
195
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
196
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
197
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
198
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
199
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
200
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
201
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
21
202
  }
22
203
 
23
- .pf-v6-c-check {
24
- display: grid;
25
- grid-template-columns: auto 1fr;
26
- grid-gap: var(--pf-v6-c-check--GridGap);
27
- accent-color: var(--pf-v6-c-check--AccentColor);
204
+ .pf-v6-c-label {
205
+ position: relative;
206
+ gap: var(--pf-v6-c-label--Gap);
207
+ min-width: var(--pf-v6-c-label--MinWidth);
208
+ max-width: var(--pf-v6-c-label--MaxWidth);
209
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
210
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
211
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
212
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
213
+ font-size: var(--pf-v6-c-label--FontSize);
214
+ white-space: nowrap;
215
+ background: transparent;
216
+ isolation: isolate;
217
+ border: 0;
218
+ border-radius: var(--pf-v6-c-label--BorderRadius);
28
219
  }
29
220
 
30
- .pf-v6-c-check.pf-m-standalone {
31
- display: inline-grid;
32
- grid-template-columns: auto;
33
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
221
+ .pf-v6-c-label.pf-m-blue {
222
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
223
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
224
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
225
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
226
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
227
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
228
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
229
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
34
230
  }
35
231
 
36
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
- align-self: center;
38
- transform: none;
232
+ .pf-v6-c-label.pf-m-red {
233
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
234
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
235
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
236
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
237
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
238
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
239
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
240
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
39
241
  }
40
242
 
41
- .pf-v6-c-check__input {
42
- align-self: start;
43
- font-size: var(--pf-v6-c-check__label--FontSize);
44
- line-height: var(--pf-v6-c-check__label--LineHeight);
45
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
243
+ .pf-v6-c-label.pf-m-orange {
244
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
245
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
246
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
247
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
248
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
249
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
250
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
251
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
46
252
  }
47
253
 
48
- .pf-v6-c-check__label {
49
- font-size: var(--pf-v6-c-check__label--FontSize);
50
- font-weight: var(--pf-v6-c-check__label--FontWeight);
51
- line-height: var(--pf-v6-c-check__label--LineHeight);
52
- color: var(--pf-v6-c-check__label--Color);
254
+ .pf-v6-c-label.pf-m-orangered {
255
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
256
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
257
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
258
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
259
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
260
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
261
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
262
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
53
263
  }
54
264
 
55
- .pf-v6-c-check__description {
56
- grid-column: 2;
57
- font-size: var(--pf-v6-c-check__description--FontSize);
58
- color: var(--pf-v6-c-check__description--Color);
265
+ .pf-v6-c-label.pf-m-yellow {
266
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
267
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
268
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
269
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
270
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
271
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
272
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
273
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
59
274
  }
60
275
 
61
- .pf-v6-c-check__body {
62
- grid-column: 2;
276
+ .pf-v6-c-label.pf-m-green {
277
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
278
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
279
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
280
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
281
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
282
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
283
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
284
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
63
285
  }
64
286
 
65
- .pf-v6-c-check__label,
66
- .pf-v6-c-check__input {
67
- justify-self: start;
287
+ .pf-v6-c-label.pf-m-teal {
288
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
289
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
290
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
291
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
292
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
293
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
294
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
295
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
68
296
  }
69
297
 
70
- label.pf-v6-c-check, .pf-v6-c-check__label,
71
- .pf-v6-c-check__input {
72
- cursor: pointer;
298
+ .pf-v6-c-label.pf-m-purple {
299
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
300
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
301
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
302
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
303
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
304
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
305
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
306
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
73
307
  }
74
308
 
75
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
- .pf-v6-c-check__input:disabled,
77
- .pf-v6-c-check__input.pf-m-disabled {
78
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
- cursor: not-allowed;
309
+ .pf-v6-c-label.pf-m-success {
310
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
311
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
312
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
313
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
314
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
315
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
316
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
317
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
318
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
319
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
80
320
  }
81
321
 
82
- .pf-v6-c-check__label-required {
83
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
- font-size: var(--pf-v6-c-check__label-required--FontSize);
85
- color: var(--pf-v6-c-check__label-required--Color);
322
+ .pf-v6-c-label.pf-m-warning {
323
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
324
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
325
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
326
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
327
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
328
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
329
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
330
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
331
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
332
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
86
333
  }
87
334
 
88
- .pf-v6-c-menu-toggle {
89
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
90
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
91
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
92
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
93
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
94
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
95
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
96
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
97
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
98
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
99
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
100
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
101
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
102
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
103
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
104
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
105
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
106
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
107
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
108
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
109
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
110
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
111
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
112
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
113
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
114
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
115
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
116
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
117
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
118
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
119
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
120
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
121
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
122
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
123
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
124
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
125
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
126
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
127
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
128
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
129
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
130
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
131
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
132
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
133
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
134
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
135
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
136
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
137
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
138
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
139
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
140
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
141
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
142
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
143
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
144
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
145
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
146
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
147
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
148
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
149
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
150
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
151
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
152
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
153
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
154
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
155
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
156
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
157
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
158
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
159
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
160
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
161
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
162
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
163
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
164
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
165
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
166
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
167
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
168
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
169
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
170
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
171
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
172
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
173
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
174
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
175
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
176
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
177
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
178
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
179
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
180
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
181
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
182
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
183
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
184
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
185
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
186
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
187
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
188
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
189
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
190
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
191
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
192
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
193
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
194
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
195
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
196
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
197
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
198
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
199
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
200
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
201
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
202
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
203
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
204
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
205
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
206
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
207
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
208
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
209
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
210
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
211
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
212
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
213
- --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
214
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
215
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
216
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
217
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
218
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
219
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
220
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
221
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
222
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
223
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
224
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
225
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
226
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
227
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
228
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
229
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
230
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
231
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
232
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
233
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
234
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
235
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
236
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
237
- }
238
-
239
- .pf-v6-c-menu-toggle {
240
- position: relative;
241
- display: inline-flex;
242
- gap: var(--pf-v6-c-menu-toggle--Gap);
243
- align-items: center;
244
- justify-content: center;
245
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
246
- max-width: 100%;
247
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
248
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
249
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
250
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
251
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
252
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
253
- color: var(--pf-v6-c-menu-toggle--Color);
254
- cursor: pointer;
255
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
256
- border: 0;
257
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
258
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
259
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
335
+ .pf-v6-c-label.pf-m-danger {
336
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
337
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
338
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
339
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
340
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
341
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
342
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
343
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
344
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
345
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
260
346
  }
261
347
 
262
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
263
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
348
+ .pf-v6-c-label.pf-m-info {
349
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
350
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
351
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
352
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
353
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
354
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
355
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
356
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
357
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
358
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
264
359
  }
265
360
 
266
- .pf-v6-c-menu-toggle::before {
267
- position: absolute;
268
- inset-block-start: 0;
269
- inset-block-end: 0;
270
- inset-inline-start: 0;
271
- inset-inline-end: 0;
272
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
273
- pointer-events: none;
274
- content: "";
275
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
276
- transition: inherit;
361
+ .pf-v6-c-label.pf-m-custom {
362
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
363
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
364
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
365
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
366
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
367
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
368
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
369
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
370
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
371
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
277
372
  }
278
373
 
279
- .pf-v6-c-menu-toggle.pf-m-primary {
280
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
281
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
282
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
283
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
284
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
285
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
286
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
287
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
288
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
289
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
290
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
291
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
292
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
293
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
294
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
295
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
296
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
374
+ .pf-v6-c-label.pf-m-compact {
375
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
376
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
377
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
378
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
379
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
380
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
381
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
297
382
  }
298
383
 
299
- .pf-v6-c-menu-toggle.pf-m-secondary {
300
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
301
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
302
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
303
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
304
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
305
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
306
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
307
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
308
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
309
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
310
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
311
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
312
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
313
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
314
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
315
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
316
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
384
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
385
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
317
386
  }
318
387
 
319
- .pf-v6-c-menu-toggle.pf-m-full-height {
320
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
321
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
322
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
323
- align-items: center;
324
- height: 100%;
388
+ .pf-v6-c-label.pf-m-outline {
389
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
390
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
391
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
392
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
393
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
394
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
395
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
396
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
397
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
398
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
325
399
  }
326
400
 
327
- .pf-v6-c-menu-toggle.pf-m-full-width {
328
- width: 100%;
401
+ .pf-v6-c-label.pf-m-editable {
402
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
403
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
329
404
  }
330
405
 
331
- .pf-v6-c-menu-toggle.pf-m-plain {
332
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
333
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
334
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
335
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
336
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
337
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
338
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
339
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
340
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
341
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
342
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
343
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
344
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
345
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
346
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
347
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
406
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
407
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
408
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
348
409
  }
349
410
 
350
- .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
351
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
411
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
412
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
413
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
414
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
352
415
  }
353
416
 
354
- .pf-v6-c-menu-toggle.pf-m-plain::before {
355
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
356
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
417
+ .pf-v6-c-label.pf-m-editable-active {
418
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
419
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
420
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
421
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
357
422
  }
358
423
 
359
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
360
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
361
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
362
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
363
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
364
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
365
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
366
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
367
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
368
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
369
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
424
+ .pf-v6-c-label.pf-m-overflow {
425
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
426
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
427
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
370
428
  }
371
429
 
372
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
373
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
374
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
375
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
376
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
377
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
378
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
430
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
431
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
432
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
433
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
379
434
  }
380
435
 
381
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
382
- border: 0;
436
+ .pf-v6-c-label.pf-m-add {
437
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
438
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
439
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
440
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
383
441
  }
384
442
 
385
- .pf-v6-c-menu-toggle.pf-m-small {
386
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
387
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
388
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
389
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
390
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
391
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
392
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
393
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
443
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
444
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
445
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
446
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
447
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
394
448
  }
395
449
 
396
- .pf-v6-c-menu-toggle.pf-m-success {
397
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
398
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
450
+ .pf-v6-c-label.pf-m-clickable {
451
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
399
452
  }
400
453
 
401
- .pf-v6-c-menu-toggle.pf-m-warning {
402
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
403
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
454
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
455
+ text-decoration-line: none;
404
456
  }
405
457
 
406
- .pf-v6-c-menu-toggle.pf-m-danger {
407
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
408
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
458
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
459
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
460
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
461
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
462
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
463
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
464
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
465
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
409
466
  }
410
467
 
411
- @media screen and (prefers-reduced-motion: no-preference) {
412
- .pf-v6-c-menu-toggle.pf-m-danger {
413
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
414
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
415
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
416
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
417
- animation-fill-mode: both;
418
- }
419
- }
420
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
421
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
422
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
423
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
468
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
469
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
424
470
  }
425
471
 
426
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
427
- from {
428
- opacity: 0;
429
- }
430
- to {
431
- opacity: 1;
432
- }
433
- }
434
- .pf-v6-c-menu-toggle.pf-m-settings {
435
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
436
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
437
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
438
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
439
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
440
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
441
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
472
+ .pf-v6-c-label.pf-m-disabled {
473
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
474
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
475
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
476
+ --pf-v6-c-label--BorderWidth: 0;
477
+ pointer-events: none;
442
478
  }
443
479
 
444
- .pf-v6-c-menu-toggle.pf-m-placeholder {
445
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
480
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
481
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
446
482
  }
447
483
 
448
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
449
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
450
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
451
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
452
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
453
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
484
+ .pf-v6-c-label,
485
+ .pf-v6-c-label__content {
486
+ display: inline-flex;
487
+ align-items: center;
488
+ justify-content: center;
454
489
  }
455
490
 
456
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
457
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
458
- pointer-events: none;
491
+ .pf-v6-c-label__text {
492
+ overflow: hidden;
493
+ text-overflow: ellipsis;
494
+ white-space: nowrap;
495
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
459
496
  }
460
497
 
461
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
462
- syntax: "<length>";
463
- inherits: false;
464
- initial-value: 0;
465
- }
466
- @media (prefers-reduced-motion: no-preference) {
467
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
468
- 33% {
469
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
470
- }
471
- 66% {
472
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
473
- }
474
- }
475
- }
476
- .pf-v6-c-menu-toggle.pf-m-split-button {
477
- --pf-v6-c-menu-toggle--Gap: 0;
478
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
498
+ .pf-v6-c-label__content {
499
+ gap: var(--pf-v6-c-label__content--Gap);
500
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
479
501
  padding: 0;
502
+ overflow: hidden;
503
+ color: var(--pf-v6-c-label--Color);
504
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
505
+ background: transparent;
506
+ border-width: 0;
480
507
  }
481
508
 
482
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
483
- position: relative;
484
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
485
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
486
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
487
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
488
- }
489
-
490
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
491
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
492
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
509
+ .pf-v6-c-label__content::before {
510
+ position: absolute;
511
+ inset: 0;
512
+ z-index: -1;
513
+ pointer-events: none;
514
+ content: "";
515
+ background-color: var(--pf-v6-c-label--BackgroundColor);
516
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
517
+ border-radius: var(--pf-v6-c-label--BorderRadius);
493
518
  }
494
519
 
495
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
496
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
497
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
520
+ input.pf-v6-c-label__content {
521
+ overflow: hidden;
522
+ text-overflow: ellipsis;
523
+ white-space: nowrap;
498
524
  }
499
525
 
500
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
501
- --pf-v6-c-check__label--Color: currentcolor;
502
- --pf-v6-c-check__label--disabled--Color: currentcolor;
503
- align-items: center;
504
- align-self: stretch;
526
+ .pf-v6-c-label__icon {
527
+ color: var(--pf-v6-c-label__icon--Color);
505
528
  }
506
529
 
507
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
508
- --pf-v6-c-check__input--TranslateY: 0;
509
- align-self: center;
530
+ .pf-v6-c-label__actions {
531
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
510
532
  }
511
533
 
512
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
513
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
534
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
535
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
514
536
  }
515
537
 
516
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
517
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
538
+ .pf-v6-c-label__actions .pf-v6-c-button {
539
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
540
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
541
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
542
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
543
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
544
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
545
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
546
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
518
547
  }
519
548
 
520
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
521
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
522
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
549
+ .pf-v6-c-label-group {
550
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
551
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
552
+ --pf-v6-c-label-group--MaxWidth: 100%;
553
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
554
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
555
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
556
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
557
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
558
+ --pf-v6-c-label-group__main--MinWidth: 0;
559
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
560
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
561
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
562
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
563
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
564
+ --pf-v6-c-label-group__list--MinWidth: 0;
565
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
566
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
567
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
568
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
569
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
570
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
571
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
572
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
573
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
574
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
575
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
576
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
577
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
578
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
579
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
580
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
581
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
582
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
583
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
584
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
585
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
586
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
523
587
  }
524
588
 
525
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
526
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
527
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
589
+ .pf-v6-c-label-group {
590
+ display: inline-flex;
591
+ row-gap: var(--pf-v6-c-label-group--RowGap);
592
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
593
+ align-items: center;
594
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
528
595
  }
529
596
 
530
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
531
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
597
+ .pf-v6-c-label-group.pf-m-category {
598
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
599
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
600
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
601
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
602
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
603
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
604
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
532
605
  }
533
606
 
534
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
535
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
607
+ .pf-v6-c-label-group.pf-m-vertical {
608
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
609
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
610
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
611
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
612
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
613
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
614
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
536
615
  }
537
616
 
538
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
539
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
540
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
541
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
617
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
618
+ align-items: flex-start;
542
619
  }
543
620
 
544
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
545
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
546
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
547
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
621
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
622
+ flex-direction: column;
623
+ align-items: flex-start;
624
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
548
625
  }
549
626
 
550
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
551
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
627
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
628
+ flex-direction: column;
629
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
552
630
  }
553
631
 
554
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
555
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
556
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
557
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
632
+ .pf-v6-c-label-group.pf-m-editable,
633
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
634
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
635
+ display: flex;
558
636
  }
559
637
 
560
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
561
- content: none;
638
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
639
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
640
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
641
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
642
+ flex: 1;
562
643
  }
563
644
 
564
- .pf-v6-c-menu-toggle.pf-m-typeahead {
565
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
566
- --pf-v6-c-menu-toggle--Gap: 0;
567
- align-items: stretch;
568
- padding: 0;
645
+ .pf-v6-c-label-group__main {
646
+ display: flex;
647
+ flex: 1;
648
+ flex-wrap: wrap;
649
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
650
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
651
+ align-items: baseline;
652
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
569
653
  }
570
654
 
571
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
572
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
655
+ .pf-v6-c-label-group__list {
656
+ display: inline-flex;
657
+ flex-wrap: wrap;
658
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
659
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
660
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
573
661
  }
574
662
 
575
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
576
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
577
- display: flex;
578
- align-items: stretch;
663
+ .pf-v6-c-label-group__list-item {
664
+ display: inline-flex;
665
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
579
666
  }
580
667
 
581
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
582
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
583
- flex: 1;
584
- }
585
-
586
- .pf-v6-c-menu-toggle__button {
587
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
588
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
589
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
590
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
591
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
592
- color: inherit;
593
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
594
- border: 0;
668
+ .pf-v6-c-label-group__label {
669
+ overflow: hidden;
670
+ text-overflow: ellipsis;
671
+ white-space: nowrap;
672
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
595
673
  }
596
674
 
597
- .pf-v6-c-menu-toggle__button.pf-m-text {
598
- display: inline-flex;
599
- align-items: baseline;
675
+ .pf-v6-c-label-group__close {
676
+ display: flex;
677
+ align-self: flex-start;
600
678
  }
601
679
 
602
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
603
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
604
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
680
+ .pf-v6-c-label-group__close .pf-v6-c-button {
681
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
682
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
683
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
684
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
685
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
605
686
  }
606
687
 
607
- .pf-v6-c-menu-toggle__text {
608
- overflow: hidden;
609
- text-overflow: ellipsis;
688
+ .pf-v6-c-label-group__textarea {
689
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
690
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
691
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
692
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
693
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
610
694
  white-space: nowrap;
611
- min-width: 0;
695
+ resize: none;
696
+ scrollbar-width: none;
697
+ -ms-overflow-style: none;
698
+ border: 0;
612
699
  }
613
700
 
614
- .pf-v6-c-menu-toggle__count {
615
- display: flex;
616
- flex-wrap: nowrap;
701
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
702
+ display: none;
617
703
  }
618
704
 
619
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
620
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
621
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
622
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
623
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
705
+ .pf-v6-c-divider {
706
+ --pf-v6-c-divider--Display: flex;
707
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
708
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
709
+ --pf-v6-c-divider--before--FlexBasis: 100%;
624
710
  }
625
711
 
626
- .pf-v6-c-menu-toggle__icon {
627
- flex-shrink: 0;
628
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
629
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
630
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
631
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
712
+ .pf-v6-c-divider {
713
+ flex-direction: row;
714
+ width: 100%;
715
+ height: var(--pf-v6-c-divider--Size);
716
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
717
+ --pf-v6-hidden-visible--hidden--Display: none;
718
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
719
+ display: var(--pf-v6-hidden-visible--Display);
632
720
  }
633
721
 
634
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
635
- vertical-align: middle;
722
+ .pf-v6-c-divider.pf-m-hidden {
723
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
636
724
  }
637
725
 
638
- .pf-v6-c-menu-toggle__controls {
639
- display: flex;
640
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
641
- align-items: center;
726
+ @media screen and (min-width: 36rem) {
727
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
728
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
729
+ }
730
+ .pf-v6-c-divider.pf-m-visible-on-sm {
731
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
732
+ }
733
+ }
734
+ @media screen and (min-width: 48rem) {
735
+ .pf-v6-c-divider.pf-m-hidden-on-md {
736
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
737
+ }
738
+ .pf-v6-c-divider.pf-m-visible-on-md {
739
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
740
+ }
741
+ }
742
+ @media screen and (min-width: 62rem) {
743
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
744
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
745
+ }
746
+ .pf-v6-c-divider.pf-m-visible-on-lg {
747
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
748
+ }
749
+ }
750
+ @media screen and (min-width: 75rem) {
751
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
752
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
753
+ }
754
+ .pf-v6-c-divider.pf-m-visible-on-xl {
755
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
756
+ }
757
+ }
758
+ @media screen and (min-width: 90.625rem) {
759
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
760
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
761
+ }
762
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
763
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
764
+ }
765
+ }
766
+ .pf-v6-c-divider {
767
+ flex-shrink: 0;
768
+ align-items: stretch;
769
+ align-self: stretch;
642
770
  justify-content: center;
643
- margin-inline-start: auto;
771
+ border: 0;
644
772
  }
645
773
 
646
- .pf-v6-c-menu-toggle__toggle-icon {
647
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
648
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
774
+ .pf-v6-c-divider::before {
775
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
776
+ content: "";
777
+ background-color: var(--pf-v6-c-divider--Color);
778
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
779
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
649
780
  }
650
781
 
651
- .pf-v6-c-menu-toggle__status-icon {
652
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
782
+ .pf-v6-c-divider.pf-m-horizontal {
783
+ flex-direction: row;
784
+ width: 100%;
785
+ height: var(--pf-v6-c-divider--Size);
653
786
  }
654
787
 
655
- .pf-v6-c-badge {
656
- --pf-v6-c-badge--BorderColor: transparent;
657
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
658
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
659
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
660
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
661
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
662
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
663
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
664
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
665
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
666
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
667
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
668
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
669
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
670
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
671
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
672
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
673
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
674
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
675
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
676
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
788
+ .pf-v6-c-divider.pf-m-vertical {
789
+ flex-direction: column;
790
+ width: var(--pf-v6-c-divider--Size);
791
+ height: inherit;
677
792
  }
678
793
 
679
- .pf-v6-c-badge {
680
- position: relative;
681
- display: inline-block;
682
- min-width: var(--pf-v6-c-badge--MinWidth);
683
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
684
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
685
- font-size: var(--pf-v6-c-badge--FontSize);
686
- font-weight: var(--pf-v6-c-badge--FontWeight);
687
- color: var(--pf-v6-c-badge--Color);
688
- text-align: center;
689
- white-space: nowrap;
690
- background-color: var(--pf-v6-c-badge--BackgroundColor);
691
- border-radius: var(--pf-v6-c-badge--BorderRadius);
794
+ .pf-v6-c-divider.pf-m-inset-none {
795
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
692
796
  }
693
797
 
694
- .pf-v6-c-badge::after {
695
- position: absolute;
696
- inset: 0;
697
- pointer-events: none;
698
- content: "";
699
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
700
- border-radius: inherit;
798
+ .pf-v6-c-divider.pf-m-inset-xs {
799
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
701
800
  }
702
801
 
703
- .pf-v6-c-badge.pf-m-read {
704
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
705
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
706
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
707
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
802
+ .pf-v6-c-divider.pf-m-inset-sm {
803
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
708
804
  }
709
805
 
710
- .pf-v6-c-badge.pf-m-unread {
711
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
712
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
713
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
806
+ .pf-v6-c-divider.pf-m-inset-md {
807
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
714
808
  }
715
809
 
716
- .pf-v6-c-badge.pf-m-disabled {
717
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
718
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
810
+ .pf-v6-c-divider.pf-m-inset-lg {
811
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
719
812
  }
720
813
 
721
- .pf-v6-c-badge.pf-m-disabled::after {
722
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
814
+ .pf-v6-c-divider.pf-m-inset-xl {
815
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
723
816
  }
724
817
 
725
- .pf-v6-c-badge__toggle-icon {
726
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
727
- color: var(--pf-v6-c-badge__toggle-icon--Color);
818
+ .pf-v6-c-divider.pf-m-inset-2xl {
819
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
728
820
  }
729
821
 
730
- .pf-v6-c-text-input-group {
731
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
732
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
733
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
734
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
735
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
736
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
737
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
738
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
739
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
740
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
741
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
742
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
743
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
744
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
745
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
746
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
747
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
748
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
749
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
750
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
751
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
752
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
753
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
754
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
755
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
756
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
757
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
758
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
759
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
760
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
761
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
762
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
763
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
764
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
765
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
766
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
767
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
768
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
769
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
770
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
771
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
772
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
773
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
774
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
775
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
776
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
777
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
778
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
779
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
780
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
781
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
822
+ .pf-v6-c-divider.pf-m-inset-3xl {
823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
782
824
  }
783
825
 
784
- .pf-v6-c-text-input-group {
785
- position: relative;
786
- display: flex;
787
- width: 100%;
788
- font-size: var(--pf-v6-c-text-input-group__FontSize);
789
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
790
- color: var(--pf-v6-c-text-input-group--Color, inherit);
791
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
792
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
793
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
794
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
795
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
826
+ @media (min-width: 36rem) {
827
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
828
+ flex-direction: row;
829
+ width: 100%;
830
+ height: var(--pf-v6-c-divider--Size);
831
+ }
796
832
  }
797
-
798
- .pf-v6-c-text-input-group::before {
799
- position: absolute;
800
- inset: 0;
801
- pointer-events: none;
802
- content: "";
803
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
804
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
805
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
806
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
807
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
833
+ @media (min-width: 36rem) {
834
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
835
+ flex-direction: column;
836
+ width: var(--pf-v6-c-divider--Size);
837
+ height: inherit;
838
+ }
808
839
  }
809
-
810
- .pf-v6-c-text-input-group.pf-m-disabled {
811
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
812
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
813
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
814
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
815
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
816
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
817
- pointer-events: none;
840
+ @media (min-width: 36rem) {
841
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
842
+ --pf-v6-c-divider--before--FlexBasis: 100%;
843
+ }
844
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
845
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
846
+ }
847
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
848
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
849
+ }
850
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
851
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
852
+ }
853
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
854
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
855
+ }
856
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
857
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
858
+ }
859
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
860
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
861
+ }
862
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
863
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
864
+ }
818
865
  }
819
-
820
- .pf-v6-c-text-input-group.pf-m-plain {
821
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
866
+ @media (min-width: 48rem) {
867
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
868
+ flex-direction: row;
869
+ width: 100%;
870
+ height: var(--pf-v6-c-divider--Size);
871
+ }
822
872
  }
823
-
824
- .pf-v6-c-text-input-group.pf-m-plain::before {
825
- border: 0;
873
+ @media (min-width: 48rem) {
874
+ .pf-v6-c-divider.pf-m-vertical-on-md {
875
+ flex-direction: column;
876
+ width: var(--pf-v6-c-divider--Size);
877
+ height: inherit;
878
+ }
826
879
  }
827
-
828
- .pf-v6-c-text-input-group.pf-m-success {
829
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
830
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
831
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
880
+ @media (min-width: 48rem) {
881
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
882
+ --pf-v6-c-divider--before--FlexBasis: 100%;
883
+ }
884
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
885
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
886
+ }
887
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
888
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
889
+ }
890
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
891
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
892
+ }
893
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
894
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
895
+ }
896
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
897
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
898
+ }
899
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
900
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
901
+ }
902
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
903
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
904
+ }
832
905
  }
833
-
834
- .pf-v6-c-text-input-group.pf-m-warning {
835
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
836
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
837
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
906
+ @media (min-width: 62rem) {
907
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
908
+ flex-direction: row;
909
+ width: 100%;
910
+ height: var(--pf-v6-c-divider--Size);
911
+ }
838
912
  }
839
-
840
- .pf-v6-c-text-input-group.pf-m-error {
841
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
842
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
843
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
913
+ @media (min-width: 62rem) {
914
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
915
+ flex-direction: column;
916
+ width: var(--pf-v6-c-divider--Size);
917
+ height: inherit;
918
+ }
844
919
  }
845
-
846
- @media (prefers-reduced-motion: no-preference) {
847
- .pf-v6-c-text-input-group.pf-m-error {
848
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
849
- animation-name: pf-v6-global-danger-jiggle-motion;
850
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
851
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
852
- animation-fill-mode: both;
920
+ @media (min-width: 62rem) {
921
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
922
+ --pf-v6-c-divider--before--FlexBasis: 100%;
923
+ }
924
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
925
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
926
+ }
927
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
928
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
929
+ }
930
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
931
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
932
+ }
933
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
934
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
935
+ }
936
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
937
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
938
+ }
939
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
940
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
941
+ }
942
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
943
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
853
944
  }
854
945
  }
855
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
856
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
857
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
858
- animation-name: pf-v6-global-fade-in;
859
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
860
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
946
+ @media (min-width: 75rem) {
947
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
948
+ flex-direction: row;
949
+ width: 100%;
950
+ height: var(--pf-v6-c-divider--Size);
951
+ }
861
952
  }
862
-
863
- .pf-v6-c-text-input-group:hover {
864
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
953
+ @media (min-width: 75rem) {
954
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
955
+ flex-direction: column;
956
+ width: var(--pf-v6-c-divider--Size);
957
+ height: inherit;
958
+ }
865
959
  }
866
-
867
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
868
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
960
+ @media (min-width: 75rem) {
961
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
962
+ --pf-v6-c-divider--before--FlexBasis: 100%;
963
+ }
964
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
965
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
966
+ }
967
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
968
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
969
+ }
970
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
971
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
972
+ }
973
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
974
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
975
+ }
976
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
977
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
978
+ }
979
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
980
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
981
+ }
982
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
983
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
984
+ }
869
985
  }
870
-
871
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
872
- --pf-v6-c-text-input-group__text--Position: relative;
986
+ @media (min-width: 90.625rem) {
987
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
988
+ flex-direction: row;
989
+ width: 100%;
990
+ height: var(--pf-v6-c-divider--Size);
991
+ }
873
992
  }
874
-
875
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
876
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
877
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
993
+ @media (min-width: 90.625rem) {
994
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
995
+ flex-direction: column;
996
+ width: var(--pf-v6-c-divider--Size);
997
+ height: inherit;
998
+ }
878
999
  }
879
-
880
- .pf-v6-c-text-input-group__main {
881
- display: flex;
882
- flex: 1;
883
- flex-wrap: wrap;
884
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
885
- min-width: 0;
886
- }
887
-
888
- .pf-v6-c-text-input-group__main.pf-m-icon {
889
- --pf-v6-c-text-input-group__text--Position: relative;
890
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
891
- display: inline-flex;
892
- align-items: center;
893
- justify-content: center;
894
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
895
- }
896
-
897
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
898
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
899
- }
900
-
901
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
902
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
903
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
904
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
905
- }
906
-
907
- .pf-v6-c-text-input-group__text {
908
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
909
- display: inline-grid;
910
- flex: 1;
911
- grid-template-areas: "text-input";
912
- grid-template-columns: 1fr;
913
- }
914
-
915
- .pf-v6-c-text-input-group__icon {
916
- position: absolute;
917
- inset-block-start: 50%;
918
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
919
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
920
- color: var(--pf-v6-c-text-input-group__icon--Color);
921
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
922
- }
923
-
924
- .pf-v6-c-text-input-group__icon.pf-m-status {
925
- inset-inline-start: auto;
926
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
927
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
928
- }
929
-
930
- .pf-v6-c-text-input-group__text-input {
931
- overflow: hidden;
932
- text-overflow: ellipsis;
933
- white-space: nowrap;
934
- position: relative;
935
- width: 100%;
936
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
937
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
938
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
939
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
940
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
941
- color: var(--pf-v6-c-text-input-group__text-input--Color);
942
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
943
- border: 0;
944
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
945
- }
946
-
947
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
948
- grid-area: text-input;
949
- }
950
-
951
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
952
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
953
- }
954
-
955
- .pf-v6-c-text-input-group__text-input::placeholder {
956
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
957
- }
958
-
959
- .pf-v6-c-text-input-group__utilities {
960
- display: flex;
961
- align-items: center;
962
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
963
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
964
- }
965
-
966
- .pf-v6-c-text-input-group__utilities > * + * {
967
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
968
- }
969
-
970
- .pf-v6-c-text-input-group__group {
971
- display: flex;
972
- }
973
-
974
- .pf-v6-c-label-group {
975
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
976
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
977
- --pf-v6-c-label-group--MaxWidth: 100%;
978
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
979
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
980
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
981
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
982
- --pf-v6-c-label-group__main--MaxWidth: 100%;
983
- --pf-v6-c-label-group__main--MinWidth: 0;
984
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
985
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
986
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
987
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
988
- --pf-v6-c-label-group__list--MaxWidth: 100%;
989
- --pf-v6-c-label-group__list--MinWidth: 0;
990
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
991
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
992
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
993
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
994
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
995
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
996
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
997
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
998
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
999
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1000
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1001
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1002
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1003
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1004
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1005
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1006
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1007
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1008
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1009
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1010
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1011
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1012
- }
1013
-
1014
- .pf-v6-c-label-group {
1015
- display: inline-flex;
1016
- row-gap: var(--pf-v6-c-label-group--RowGap);
1017
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1018
- align-items: center;
1019
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1020
- }
1021
-
1022
- .pf-v6-c-label-group.pf-m-category {
1023
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1024
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1025
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1026
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1027
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1028
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1029
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1030
- }
1031
-
1032
- .pf-v6-c-label-group.pf-m-vertical {
1033
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1034
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1035
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1036
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1037
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1038
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1039
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1040
- }
1041
-
1042
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1043
- align-items: flex-start;
1044
- }
1045
-
1046
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1047
- flex-direction: column;
1048
- align-items: flex-start;
1049
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1050
- }
1051
-
1052
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1053
- flex-direction: column;
1054
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1055
- }
1056
-
1057
- .pf-v6-c-label-group.pf-m-editable,
1058
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1059
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1060
- display: flex;
1061
- }
1062
-
1063
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1064
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1065
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1066
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1067
- flex: 1;
1068
- }
1069
-
1070
- .pf-v6-c-label-group__main {
1071
- display: flex;
1072
- flex: 1;
1073
- flex-wrap: wrap;
1074
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1075
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1076
- align-items: baseline;
1077
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1078
- }
1079
-
1080
- .pf-v6-c-label-group__list {
1081
- display: inline-flex;
1082
- flex-wrap: wrap;
1083
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1084
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1085
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1086
- }
1087
-
1088
- .pf-v6-c-label-group__list-item {
1089
- display: inline-flex;
1090
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1091
- }
1092
-
1093
- .pf-v6-c-label-group__label {
1094
- overflow: hidden;
1095
- text-overflow: ellipsis;
1096
- white-space: nowrap;
1097
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1098
- }
1099
-
1100
- .pf-v6-c-label-group__close {
1101
- display: flex;
1102
- align-self: flex-start;
1103
- }
1104
-
1105
- .pf-v6-c-label-group__close .pf-v6-c-button {
1106
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1107
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1108
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1109
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1110
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1111
- }
1112
-
1113
- .pf-v6-c-label-group__textarea {
1114
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1115
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1116
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1117
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1118
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1119
- white-space: nowrap;
1120
- resize: none;
1121
- scrollbar-width: none;
1122
- -ms-overflow-style: none;
1123
- border: 0;
1124
- }
1125
-
1126
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1127
- display: none;
1128
- }
1129
-
1130
- .pf-v6-c-label {
1131
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1132
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1133
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1134
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1135
- --pf-v6-c-label--MaxWidth: 100%;
1136
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
1137
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1138
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1139
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1140
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1141
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1142
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1143
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1144
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1145
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1146
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1147
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1148
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1149
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1150
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1151
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1152
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1153
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1154
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1155
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1156
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1157
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1158
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1159
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1160
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1161
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1162
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1163
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1164
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1165
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1166
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1167
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1168
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1169
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1170
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1171
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1172
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1173
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1174
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1175
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1176
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1177
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1178
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1179
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1180
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1181
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1182
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1183
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1184
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1185
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1186
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1187
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1188
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1189
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1190
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1191
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1192
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1193
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1194
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1195
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1196
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1197
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1198
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1199
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1200
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1201
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1202
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1203
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1204
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1205
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1206
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1207
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1208
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1209
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1210
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1211
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1212
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1213
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1214
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1215
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1216
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1217
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1218
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1219
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1220
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1221
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1222
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1223
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1224
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1225
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1226
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1227
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1228
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1229
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1230
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1231
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1232
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1233
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1234
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1235
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1236
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1237
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1238
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1239
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1240
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1241
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1242
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1243
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1244
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1245
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1246
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1247
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1248
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1249
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1250
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1251
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1252
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1253
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1254
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1255
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1256
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1257
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1258
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1259
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1260
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1261
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1262
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1263
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1264
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1265
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1266
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1267
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1268
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1269
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1270
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1271
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1272
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1273
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1274
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1275
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1276
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1277
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1278
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1279
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1280
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1281
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1282
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1283
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
1284
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1285
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1286
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1287
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1288
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1289
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1290
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1291
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1292
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1293
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1294
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1295
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1296
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
1297
- --pf-v6-c-label__content--MaxWidth: 100%;
1298
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1299
- --pf-v6-c-label__content--Cursor: initial;
1300
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1301
- --pf-v6-c-label__text--MaxWidth: 100%;
1302
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
1303
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1304
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1305
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1306
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1307
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1308
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1309
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1310
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1311
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1312
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1313
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1314
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1315
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1316
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1317
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
1318
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1319
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1320
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1321
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1322
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1323
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1324
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1325
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1000
+ @media (min-width: 90.625rem) {
1001
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1002
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1003
+ }
1004
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1005
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1006
+ }
1007
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1008
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1009
+ }
1010
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1011
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1012
+ }
1013
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1014
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1015
+ }
1016
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1017
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1018
+ }
1019
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1020
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1021
+ }
1022
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1023
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1024
+ }
1326
1025
  }
1327
-
1328
- .pf-v6-c-label {
1329
- position: relative;
1330
- gap: var(--pf-v6-c-label--Gap);
1331
- min-width: var(--pf-v6-c-label--MinWidth);
1332
- max-width: var(--pf-v6-c-label--MaxWidth);
1333
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1334
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1335
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1336
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1337
- font-size: var(--pf-v6-c-label--FontSize);
1338
- white-space: nowrap;
1339
- background: transparent;
1340
- isolation: isolate;
1341
- border: 0;
1342
- border-radius: var(--pf-v6-c-label--BorderRadius);
1026
+ .pf-v6-c-text-input-group {
1027
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1028
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
1029
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1030
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1031
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1032
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1033
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1034
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1035
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1036
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1037
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1038
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1039
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1040
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1041
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1042
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1043
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1044
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1045
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
1046
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1047
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1048
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1049
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1050
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1051
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1052
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1053
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1054
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1055
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1056
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1057
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1058
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1059
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1060
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1061
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1062
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1063
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1064
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1065
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1066
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1067
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1068
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1069
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1070
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1071
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1072
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1073
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1074
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1075
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1076
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1077
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1343
1078
  }
1344
1079
 
1345
- .pf-v6-c-label.pf-m-blue {
1346
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1347
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1348
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1349
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1350
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1351
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1352
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1353
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1080
+ .pf-v6-c-text-input-group {
1081
+ position: relative;
1082
+ display: flex;
1083
+ width: 100%;
1084
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1085
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1086
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1087
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1088
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1089
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1090
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1091
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1354
1092
  }
1355
1093
 
1356
- .pf-v6-c-label.pf-m-red {
1357
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1358
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1359
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1360
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1361
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1362
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1363
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1364
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1094
+ .pf-v6-c-text-input-group::before {
1095
+ position: absolute;
1096
+ inset: 0;
1097
+ pointer-events: none;
1098
+ content: "";
1099
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1100
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1101
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1102
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1103
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1365
1104
  }
1366
1105
 
1367
- .pf-v6-c-label.pf-m-orange {
1368
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1369
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1370
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1371
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1372
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1373
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1374
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1375
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1106
+ .pf-v6-c-text-input-group.pf-m-disabled {
1107
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1108
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1109
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1110
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1111
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1112
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1113
+ pointer-events: none;
1376
1114
  }
1377
1115
 
1378
- .pf-v6-c-label.pf-m-orangered {
1379
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1380
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1381
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1382
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1383
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1384
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1385
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1386
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1116
+ .pf-v6-c-text-input-group.pf-m-plain {
1117
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1387
1118
  }
1388
1119
 
1389
- .pf-v6-c-label.pf-m-yellow {
1390
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1391
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1392
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1393
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1394
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1395
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1396
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1397
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1120
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1121
+ border: 0;
1398
1122
  }
1399
1123
 
1400
- .pf-v6-c-label.pf-m-green {
1401
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1402
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1403
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1404
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1405
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1406
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1407
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1408
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1124
+ .pf-v6-c-text-input-group.pf-m-success {
1125
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1126
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1127
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1409
1128
  }
1410
1129
 
1411
- .pf-v6-c-label.pf-m-teal {
1412
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1413
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1414
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1415
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1416
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1417
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1418
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1419
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1130
+ .pf-v6-c-text-input-group.pf-m-warning {
1131
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1132
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1133
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1420
1134
  }
1421
1135
 
1422
- .pf-v6-c-label.pf-m-purple {
1423
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1424
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1425
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1426
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1427
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1428
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1429
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1430
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1136
+ .pf-v6-c-text-input-group.pf-m-error {
1137
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1138
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1139
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1431
1140
  }
1432
1141
 
1433
- .pf-v6-c-label.pf-m-success {
1434
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1435
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1436
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1437
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1438
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1439
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1440
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1441
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1442
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1443
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1142
+ @media (prefers-reduced-motion: no-preference) {
1143
+ .pf-v6-c-text-input-group.pf-m-error {
1144
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1145
+ animation-name: pf-v6-global-danger-jiggle-motion;
1146
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1147
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1148
+ animation-fill-mode: both;
1149
+ }
1150
+ }
1151
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1152
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1153
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1154
+ animation-name: pf-v6-global-fade-in;
1155
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1156
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1444
1157
  }
1445
1158
 
1446
- .pf-v6-c-label.pf-m-warning {
1447
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1448
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1449
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1450
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1451
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1452
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1453
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1454
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1455
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1456
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
1159
+ .pf-v6-c-text-input-group:hover {
1160
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1457
1161
  }
1458
1162
 
1459
- .pf-v6-c-label.pf-m-danger {
1460
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1461
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1462
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1463
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1464
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1465
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1466
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1467
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1468
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1469
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1163
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1164
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1470
1165
  }
1471
1166
 
1472
- .pf-v6-c-label.pf-m-info {
1473
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1474
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1475
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1476
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1477
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1478
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1479
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1480
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1481
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1482
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1167
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1168
+ --pf-v6-c-text-input-group__text--Position: relative;
1483
1169
  }
1484
1170
 
1485
- .pf-v6-c-label.pf-m-custom {
1486
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1487
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1488
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1489
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1490
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1491
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1492
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1493
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1494
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1495
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1171
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1172
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1173
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1496
1174
  }
1497
1175
 
1498
- .pf-v6-c-label.pf-m-compact {
1499
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1500
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1501
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1502
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1503
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1504
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1505
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1176
+ .pf-v6-c-text-input-group__main {
1177
+ display: flex;
1178
+ flex: 1;
1179
+ flex-wrap: wrap;
1180
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1181
+ min-width: 0;
1506
1182
  }
1507
1183
 
1508
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1509
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1184
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1185
+ --pf-v6-c-text-input-group__text--Position: relative;
1186
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1187
+ display: inline-flex;
1188
+ align-items: center;
1189
+ justify-content: center;
1190
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1510
1191
  }
1511
1192
 
1512
- .pf-v6-c-label.pf-m-outline {
1513
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1514
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1515
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1516
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1517
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1518
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1519
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1520
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1521
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1522
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1193
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1194
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1523
1195
  }
1524
1196
 
1525
- .pf-v6-c-label.pf-m-editable {
1526
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1527
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1197
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1198
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1199
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1200
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1528
1201
  }
1529
1202
 
1530
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1531
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1532
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1203
+ .pf-v6-c-text-input-group__text {
1204
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1205
+ display: inline-grid;
1206
+ flex: 1;
1207
+ grid-template-areas: "text-input";
1208
+ grid-template-columns: 1fr;
1533
1209
  }
1534
1210
 
1535
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1536
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1537
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1538
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1211
+ .pf-v6-c-text-input-group__icon {
1212
+ position: absolute;
1213
+ inset-block-start: 50%;
1214
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1215
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1216
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1217
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1539
1218
  }
1540
1219
 
1541
- .pf-v6-c-label.pf-m-editable-active {
1542
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1543
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1544
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1545
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1220
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1221
+ inset-inline-start: auto;
1222
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1223
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1546
1224
  }
1547
1225
 
1548
- .pf-v6-c-label.pf-m-overflow {
1549
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1550
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1551
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1226
+ .pf-v6-c-text-input-group__text-input {
1227
+ overflow: hidden;
1228
+ text-overflow: ellipsis;
1229
+ white-space: nowrap;
1230
+ position: relative;
1231
+ width: 100%;
1232
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1233
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1234
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1235
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1236
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1237
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1238
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1239
+ border: 0;
1240
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1552
1241
  }
1553
1242
 
1554
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1555
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1556
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1557
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1243
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1244
+ grid-area: text-input;
1558
1245
  }
1559
1246
 
1560
- .pf-v6-c-label.pf-m-add {
1561
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1562
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1563
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1564
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1247
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1248
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1565
1249
  }
1566
1250
 
1567
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1568
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1569
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1570
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1571
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1251
+ .pf-v6-c-text-input-group__text-input::placeholder {
1252
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1572
1253
  }
1573
1254
 
1574
- .pf-v6-c-label.pf-m-clickable {
1575
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1255
+ .pf-v6-c-text-input-group__utilities {
1256
+ display: flex;
1257
+ align-items: center;
1258
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1259
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1576
1260
  }
1577
1261
 
1578
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1579
- text-decoration-line: none;
1262
+ .pf-v6-c-text-input-group__utilities > * + * {
1263
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1580
1264
  }
1581
1265
 
1582
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1583
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1584
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1585
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1586
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1587
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1588
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1589
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1266
+ .pf-v6-c-text-input-group__group {
1267
+ display: flex;
1590
1268
  }
1591
1269
 
1592
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1593
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1270
+ .pf-v6-c-check {
1271
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1272
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1273
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1274
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1275
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1276
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1277
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1278
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1279
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1280
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1281
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1282
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1283
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1284
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1594
1285
  }
1595
1286
 
1596
- .pf-v6-c-label.pf-m-disabled {
1597
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1598
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1599
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1600
- --pf-v6-c-label--BorderWidth: 0;
1601
- pointer-events: none;
1287
+ .pf-v6-c-check {
1288
+ display: grid;
1289
+ grid-template-columns: auto 1fr;
1290
+ grid-gap: var(--pf-v6-c-check--GridGap);
1291
+ accent-color: var(--pf-v6-c-check--AccentColor);
1602
1292
  }
1603
1293
 
1604
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1605
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1294
+ .pf-v6-c-check.pf-m-standalone {
1295
+ display: inline-grid;
1296
+ grid-template-columns: auto;
1297
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1606
1298
  }
1607
1299
 
1608
- .pf-v6-c-label,
1609
- .pf-v6-c-label__content {
1610
- display: inline-flex;
1611
- align-items: center;
1612
- justify-content: center;
1300
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1301
+ align-self: center;
1302
+ transform: none;
1613
1303
  }
1614
1304
 
1615
- .pf-v6-c-label__text {
1616
- overflow: hidden;
1617
- text-overflow: ellipsis;
1618
- white-space: nowrap;
1619
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1305
+ .pf-v6-c-check__input {
1306
+ align-self: start;
1307
+ font-size: var(--pf-v6-c-check__label--FontSize);
1308
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1309
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1620
1310
  }
1621
1311
 
1622
- .pf-v6-c-label__content {
1623
- gap: var(--pf-v6-c-label__content--Gap);
1624
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1625
- padding: 0;
1626
- overflow: hidden;
1627
- color: var(--pf-v6-c-label--Color);
1628
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1629
- background: transparent;
1630
- border-width: 0;
1312
+ .pf-v6-c-check__label {
1313
+ font-size: var(--pf-v6-c-check__label--FontSize);
1314
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1315
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1316
+ color: var(--pf-v6-c-check__label--Color);
1631
1317
  }
1632
1318
 
1633
- .pf-v6-c-label__content::before {
1634
- position: absolute;
1635
- inset: 0;
1636
- z-index: -1;
1637
- pointer-events: none;
1638
- content: "";
1639
- background-color: var(--pf-v6-c-label--BackgroundColor);
1640
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1641
- border-radius: var(--pf-v6-c-label--BorderRadius);
1319
+ .pf-v6-c-check__description {
1320
+ grid-column: 2;
1321
+ font-size: var(--pf-v6-c-check__description--FontSize);
1322
+ color: var(--pf-v6-c-check__description--Color);
1642
1323
  }
1643
1324
 
1644
- input.pf-v6-c-label__content {
1645
- overflow: hidden;
1646
- text-overflow: ellipsis;
1647
- white-space: nowrap;
1325
+ .pf-v6-c-check__body {
1326
+ grid-column: 2;
1648
1327
  }
1649
1328
 
1650
- .pf-v6-c-label__icon {
1651
- color: var(--pf-v6-c-label__icon--Color);
1329
+ .pf-v6-c-check__label,
1330
+ .pf-v6-c-check__input {
1331
+ justify-self: start;
1652
1332
  }
1653
1333
 
1654
- .pf-v6-c-label__actions {
1655
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1334
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1335
+ .pf-v6-c-check__input {
1336
+ cursor: pointer;
1656
1337
  }
1657
1338
 
1658
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1659
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1339
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1340
+ .pf-v6-c-check__input:disabled,
1341
+ .pf-v6-c-check__input.pf-m-disabled {
1342
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1343
+ cursor: not-allowed;
1660
1344
  }
1661
1345
 
1662
- .pf-v6-c-label__actions .pf-v6-c-button {
1663
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1664
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1665
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1666
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1667
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1668
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1669
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1670
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1346
+ .pf-v6-c-check__label-required {
1347
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1348
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1349
+ color: var(--pf-v6-c-check__label-required--Color);
1671
1350
  }
1672
1351
 
1673
1352
  .pf-v6-c-button {
@@ -1841,12 +1520,12 @@ input.pf-v6-c-label__content {
1841
1520
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
1842
1521
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
1843
1522
  --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
1844
- --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
1523
+ --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
1845
1524
  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1846
1525
  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1847
1526
  --pf-v6-c-button--m-control--Color: var(--pf-t--global--text--color--regular);
1848
1527
  --pf-v6-c-button--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
1849
- --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--default);
1528
+ --pf-v6-c-button--m-control--BorderColor: var(--pf-t--global--border--color--control--default);
1850
1529
  --pf-v6-c-button--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
1851
1530
  --pf-v6-c-button--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
1852
1531
  --pf-v6-c-button--m-control--hover--Color: var(--pf-t--global--text--color--regular);
@@ -2516,523 +2195,728 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2516
2195
  scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2517
2196
  }
2518
2197
 
2519
- .pf-v6-c-button__icon.pf-m-start {
2520
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2198
+ .pf-v6-c-button__icon.pf-m-start {
2199
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2200
+ }
2201
+
2202
+ .pf-v6-c-button__icon.pf-m-end {
2203
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2204
+ }
2205
+
2206
+ .pf-v6-c-button__icon-favorite,
2207
+ .pf-v6-c-button__icon-favorited {
2208
+ grid-area: 1/1/1/1;
2209
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2210
+ transition-property: opacity;
2211
+ }
2212
+
2213
+ .pf-v6-c-button__icon-favorite {
2214
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2215
+ }
2216
+
2217
+ .pf-v6-c-button__icon-favorited {
2218
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2219
+ }
2220
+
2221
+ .pf-v6-c-button__progress {
2222
+ position: absolute;
2223
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2224
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2225
+ line-height: 1;
2226
+ color: var(--pf-v6-c-button__progress--Color);
2227
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2228
+ }
2229
+
2230
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2231
+ --pf-v6-c-spinner--Color: currentcolor;
2232
+ }
2233
+
2234
+ .pf-v6-c-button__text {
2235
+ text-decoration: inherit;
2236
+ }
2237
+
2238
+ .pf-v6-c-button__count {
2239
+ display: inline-flex;
2240
+ align-items: center;
2241
+ }
2242
+
2243
+ .pf-v6-c-button--hamburger-icon path {
2244
+ fill: none;
2245
+ stroke: currentcolor;
2246
+ stroke-linecap: round;
2247
+ stroke-linejoin: round;
2248
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2249
+ }
2250
+
2251
+ .pf-v6-c-button--hamburger-icon--top {
2252
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2253
+ }
2254
+
2255
+ .pf-v6-c-button--hamburger-icon--middle {
2256
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2257
+ }
2258
+
2259
+ .pf-v6-c-button--hamburger-icon--arrow {
2260
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2521
2261
  }
2522
2262
 
2523
- .pf-v6-c-button__icon.pf-m-end {
2524
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2263
+ .pf-v6-c-button--hamburger-icon--bottom {
2264
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2525
2265
  }
2526
2266
 
2527
- .pf-v6-c-button__icon-favorite,
2528
- .pf-v6-c-button__icon-favorited {
2529
- grid-area: 1/1/1/1;
2530
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2531
- transition-property: opacity;
2267
+ @keyframes pf-v6-c-button-icon-notify {
2268
+ 33% {
2269
+ transform: rotate(30deg);
2270
+ }
2271
+ 66% {
2272
+ transform: rotate(-60deg);
2273
+ }
2274
+ }
2275
+ @keyframes pf-v6-c-button-icon-favorited {
2276
+ 50% {
2277
+ scale: 1.5;
2278
+ }
2279
+ }
2280
+ .pf-v6-c-menu-toggle {
2281
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2282
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2283
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2284
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2285
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2286
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
2287
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
2288
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
2289
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
2290
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
2291
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
2292
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
2293
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
2294
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
2295
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2296
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
2297
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
2298
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
2299
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
2300
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
2301
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
2302
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2303
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
2304
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
2305
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
2306
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
2307
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2308
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2309
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2310
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2311
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2312
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2313
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2314
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
2315
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
2316
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
2317
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
2318
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
2319
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
2320
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
2321
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
2322
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
2323
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2324
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2325
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2326
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2327
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
2328
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
2329
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
2330
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
2331
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
2332
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2333
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
2334
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
2335
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2336
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
2337
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2338
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
2339
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
2340
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2341
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2342
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2343
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2344
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
2345
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
2346
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
2347
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
2348
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
2349
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2350
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
2351
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
2352
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
2353
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
2354
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
2355
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
2356
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
2357
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
2358
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2359
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2360
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
2361
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
2362
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2363
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2364
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
2365
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2366
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
2367
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
2368
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
2369
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
2370
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2371
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2372
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
2373
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2374
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
2375
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2376
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
2377
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
2378
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2379
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
2380
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
2381
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
2382
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
2383
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2384
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2385
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2386
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2387
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2388
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
2389
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
2390
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
2391
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2392
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
2393
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2394
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2395
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
2396
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
2397
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2398
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
2399
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
2400
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
2401
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
2402
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
2403
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2404
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2405
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
2406
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
2407
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
2408
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
2409
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2410
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2411
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
2412
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
2413
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2414
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2415
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
2416
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2417
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2418
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2419
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2420
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
2421
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
2422
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
2423
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
2424
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2425
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
2426
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2427
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
2428
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
2532
2429
  }
2533
2430
 
2534
- .pf-v6-c-button__icon-favorite {
2535
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2431
+ .pf-v6-c-menu-toggle {
2432
+ position: relative;
2433
+ display: inline-flex;
2434
+ gap: var(--pf-v6-c-menu-toggle--Gap);
2435
+ align-items: center;
2436
+ justify-content: center;
2437
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
2438
+ max-width: 100%;
2439
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2440
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2441
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2442
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2443
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
2444
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
2445
+ color: var(--pf-v6-c-menu-toggle--Color);
2446
+ cursor: pointer;
2447
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
2448
+ border: 0;
2449
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
2450
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
2451
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
2536
2452
  }
2537
2453
 
2538
- .pf-v6-c-button__icon-favorited {
2539
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2454
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
2455
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2540
2456
  }
2541
2457
 
2542
- .pf-v6-c-button__progress {
2458
+ .pf-v6-c-menu-toggle::before {
2543
2459
  position: absolute;
2544
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2545
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2546
- line-height: 1;
2547
- color: var(--pf-v6-c-button__progress--Color);
2548
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2460
+ inset-block-start: 0;
2461
+ inset-block-end: 0;
2462
+ inset-inline-start: 0;
2463
+ inset-inline-end: 0;
2464
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
2465
+ pointer-events: none;
2466
+ content: "";
2467
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
2468
+ transition: inherit;
2469
+ }
2470
+
2471
+ .pf-v6-c-menu-toggle.pf-m-primary {
2472
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
2473
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
2474
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
2475
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
2476
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
2477
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
2478
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
2479
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
2480
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
2481
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
2482
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
2483
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
2484
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
2485
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
2486
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
2487
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
2488
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
2489
+ }
2490
+
2491
+ .pf-v6-c-menu-toggle.pf-m-secondary {
2492
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
2493
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
2494
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
2495
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
2496
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
2497
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
2498
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
2499
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
2500
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
2501
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
2502
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
2503
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
2504
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
2505
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
2506
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
2507
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
2508
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
2549
2509
  }
2550
2510
 
2551
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2552
- --pf-v6-c-spinner--Color: currentcolor;
2511
+ .pf-v6-c-menu-toggle.pf-m-full-height {
2512
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
2513
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
2514
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
2515
+ align-items: center;
2516
+ height: 100%;
2553
2517
  }
2554
2518
 
2555
- .pf-v6-c-button__text {
2556
- text-decoration: inherit;
2519
+ .pf-v6-c-menu-toggle.pf-m-full-width {
2520
+ width: 100%;
2557
2521
  }
2558
2522
 
2559
- .pf-v6-c-button__count {
2560
- display: inline-flex;
2561
- align-items: center;
2523
+ .pf-v6-c-menu-toggle.pf-m-plain {
2524
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
2525
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
2526
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
2527
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2528
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
2529
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
2530
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
2531
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2532
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
2533
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
2534
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
2535
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2536
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2537
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
2538
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
2539
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
2562
2540
  }
2563
2541
 
2564
- .pf-v6-c-button--hamburger-icon path {
2565
- fill: none;
2566
- stroke: currentcolor;
2567
- stroke-linecap: round;
2568
- stroke-linejoin: round;
2569
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2542
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
2543
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
2570
2544
  }
2571
2545
 
2572
- .pf-v6-c-button--hamburger-icon--top {
2573
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2546
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
2547
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
2548
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
2574
2549
  }
2575
2550
 
2576
- .pf-v6-c-button--hamburger-icon--middle {
2577
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2551
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
2552
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
2553
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
2554
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
2555
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
2556
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
2557
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
2558
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
2559
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
2560
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
2561
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
2578
2562
  }
2579
2563
 
2580
- .pf-v6-c-button--hamburger-icon--arrow {
2581
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2564
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
2565
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
2566
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
2567
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
2568
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
2569
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
2570
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
2582
2571
  }
2583
2572
 
2584
- .pf-v6-c-button--hamburger-icon--bottom {
2585
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2573
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
2574
+ border: 0;
2586
2575
  }
2587
2576
 
2588
- @keyframes pf-v6-c-button-icon-notify {
2589
- 33% {
2590
- transform: rotate(30deg);
2591
- }
2592
- 66% {
2593
- transform: rotate(-60deg);
2594
- }
2595
- }
2596
- @keyframes pf-v6-c-button-icon-favorited {
2597
- 50% {
2598
- scale: 1.5;
2599
- }
2577
+ .pf-v6-c-menu-toggle.pf-m-small {
2578
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
2579
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
2580
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
2581
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
2582
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
2583
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
2584
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
2585
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
2600
2586
  }
2601
- .pf-v6-c-divider {
2602
- --pf-v6-c-divider--Display: flex;
2603
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2604
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2605
- --pf-v6-c-divider--before--FlexBasis: 100%;
2587
+
2588
+ .pf-v6-c-menu-toggle.pf-m-success {
2589
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
2590
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
2606
2591
  }
2607
2592
 
2608
- .pf-v6-c-divider {
2609
- flex-direction: row;
2610
- width: 100%;
2611
- height: var(--pf-v6-c-divider--Size);
2612
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2613
- --pf-v6-hidden-visible--hidden--Display: none;
2614
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2615
- display: var(--pf-v6-hidden-visible--Display);
2593
+ .pf-v6-c-menu-toggle.pf-m-warning {
2594
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
2595
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
2616
2596
  }
2617
2597
 
2618
- .pf-v6-c-divider.pf-m-hidden {
2619
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2598
+ .pf-v6-c-menu-toggle.pf-m-danger {
2599
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
2600
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
2620
2601
  }
2621
2602
 
2622
- @media screen and (min-width: 36rem) {
2623
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2624
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2625
- }
2626
- .pf-v6-c-divider.pf-m-visible-on-sm {
2627
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2603
+ @media screen and (prefers-reduced-motion: no-preference) {
2604
+ .pf-v6-c-menu-toggle.pf-m-danger {
2605
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
2606
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
2607
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
2608
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
2609
+ animation-fill-mode: both;
2628
2610
  }
2629
2611
  }
2630
- @media screen and (min-width: 48rem) {
2631
- .pf-v6-c-divider.pf-m-hidden-on-md {
2632
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2633
- }
2634
- .pf-v6-c-divider.pf-m-visible-on-md {
2635
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2636
- }
2612
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
2613
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
2614
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
2615
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
2637
2616
  }
2638
- @media screen and (min-width: 62rem) {
2639
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2640
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2617
+
2618
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
2619
+ from {
2620
+ opacity: 0;
2641
2621
  }
2642
- .pf-v6-c-divider.pf-m-visible-on-lg {
2643
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2622
+ to {
2623
+ opacity: 1;
2644
2624
  }
2645
2625
  }
2646
- @media screen and (min-width: 75rem) {
2647
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2648
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2649
- }
2650
- .pf-v6-c-divider.pf-m-visible-on-xl {
2651
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2652
- }
2626
+ .pf-v6-c-menu-toggle.pf-m-settings {
2627
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
2628
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
2629
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
2630
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
2631
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
2632
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
2633
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
2653
2634
  }
2654
- @media screen and (min-width: 90.625rem) {
2655
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2656
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2657
- }
2658
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2659
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2660
- }
2635
+
2636
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
2637
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
2661
2638
  }
2662
- .pf-v6-c-divider {
2663
- flex-shrink: 0;
2664
- align-items: stretch;
2665
- align-self: stretch;
2666
- justify-content: center;
2667
- border: 0;
2639
+
2640
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
2641
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
2642
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
2643
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
2644
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
2645
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
2668
2646
  }
2669
2647
 
2670
- .pf-v6-c-divider::before {
2671
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2672
- content: "";
2673
- background-color: var(--pf-v6-c-divider--Color);
2674
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2675
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2648
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
2649
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
2650
+ pointer-events: none;
2676
2651
  }
2677
2652
 
2678
- .pf-v6-c-divider.pf-m-horizontal {
2679
- flex-direction: row;
2680
- width: 100%;
2681
- height: var(--pf-v6-c-divider--Size);
2653
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
2654
+ syntax: "<length>";
2655
+ inherits: false;
2656
+ initial-value: 0;
2657
+ }
2658
+ @media (prefers-reduced-motion: no-preference) {
2659
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
2660
+ 33% {
2661
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
2662
+ }
2663
+ 66% {
2664
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
2665
+ }
2666
+ }
2667
+ }
2668
+ .pf-v6-c-menu-toggle.pf-m-split-button {
2669
+ --pf-v6-c-menu-toggle--Gap: 0;
2670
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
2671
+ padding: 0;
2682
2672
  }
2683
2673
 
2684
- .pf-v6-c-divider.pf-m-vertical {
2685
- flex-direction: column;
2686
- width: var(--pf-v6-c-divider--Size);
2687
- height: inherit;
2674
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
2675
+ position: relative;
2676
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2677
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2678
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2679
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2688
2680
  }
2689
2681
 
2690
- .pf-v6-c-divider.pf-m-inset-none {
2691
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2682
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
2683
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2684
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2692
2685
  }
2693
2686
 
2694
- .pf-v6-c-divider.pf-m-inset-xs {
2695
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2687
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
2688
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2689
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2696
2690
  }
2697
2691
 
2698
- .pf-v6-c-divider.pf-m-inset-sm {
2699
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2692
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
2693
+ --pf-v6-c-check__label--Color: currentcolor;
2694
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
2695
+ align-items: center;
2696
+ align-self: stretch;
2700
2697
  }
2701
2698
 
2702
- .pf-v6-c-divider.pf-m-inset-md {
2703
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2699
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
2700
+ --pf-v6-c-check__input--TranslateY: 0;
2701
+ align-self: center;
2704
2702
  }
2705
2703
 
2706
- .pf-v6-c-divider.pf-m-inset-lg {
2707
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2704
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
2705
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
2708
2706
  }
2709
2707
 
2710
- .pf-v6-c-divider.pf-m-inset-xl {
2711
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2708
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
2709
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2712
2710
  }
2713
2711
 
2714
- .pf-v6-c-divider.pf-m-inset-2xl {
2715
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2712
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
2713
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
2714
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2716
2715
  }
2717
2716
 
2718
- .pf-v6-c-divider.pf-m-inset-3xl {
2719
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2717
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
2718
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
2719
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
2720
2720
  }
2721
2721
 
2722
- @media (min-width: 36rem) {
2723
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2724
- flex-direction: row;
2725
- width: 100%;
2726
- height: var(--pf-v6-c-divider--Size);
2727
- }
2728
- }
2729
- @media (min-width: 36rem) {
2730
- .pf-v6-c-divider.pf-m-vertical-on-sm {
2731
- flex-direction: column;
2732
- width: var(--pf-v6-c-divider--Size);
2733
- height: inherit;
2734
- }
2735
- }
2736
- @media (min-width: 36rem) {
2737
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
2738
- --pf-v6-c-divider--before--FlexBasis: 100%;
2739
- }
2740
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2741
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2742
- }
2743
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2744
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2745
- }
2746
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2747
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2748
- }
2749
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2750
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2751
- }
2752
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2753
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2754
- }
2755
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2756
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2757
- }
2758
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2759
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2760
- }
2761
- }
2762
- @media (min-width: 48rem) {
2763
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2764
- flex-direction: row;
2765
- width: 100%;
2766
- height: var(--pf-v6-c-divider--Size);
2767
- }
2768
- }
2769
- @media (min-width: 48rem) {
2770
- .pf-v6-c-divider.pf-m-vertical-on-md {
2771
- flex-direction: column;
2772
- width: var(--pf-v6-c-divider--Size);
2773
- height: inherit;
2774
- }
2775
- }
2776
- @media (min-width: 48rem) {
2777
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2778
- --pf-v6-c-divider--before--FlexBasis: 100%;
2779
- }
2780
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2781
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2782
- }
2783
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2784
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2785
- }
2786
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2787
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2788
- }
2789
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2790
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2791
- }
2792
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2793
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2794
- }
2795
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2796
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2797
- }
2798
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2799
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2800
- }
2801
- }
2802
- @media (min-width: 62rem) {
2803
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2804
- flex-direction: row;
2805
- width: 100%;
2806
- height: var(--pf-v6-c-divider--Size);
2807
- }
2808
- }
2809
- @media (min-width: 62rem) {
2810
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2811
- flex-direction: column;
2812
- width: var(--pf-v6-c-divider--Size);
2813
- height: inherit;
2814
- }
2815
- }
2816
- @media (min-width: 62rem) {
2817
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2818
- --pf-v6-c-divider--before--FlexBasis: 100%;
2819
- }
2820
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2821
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2822
- }
2823
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2824
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2825
- }
2826
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2827
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2828
- }
2829
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2830
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2831
- }
2832
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2833
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2834
- }
2835
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2836
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2837
- }
2838
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2839
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2840
- }
2841
- }
2842
- @media (min-width: 75rem) {
2843
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2844
- flex-direction: row;
2845
- width: 100%;
2846
- height: var(--pf-v6-c-divider--Size);
2847
- }
2848
- }
2849
- @media (min-width: 75rem) {
2850
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2851
- flex-direction: column;
2852
- width: var(--pf-v6-c-divider--Size);
2853
- height: inherit;
2854
- }
2722
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
2723
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
2855
2724
  }
2856
- @media (min-width: 75rem) {
2857
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2858
- --pf-v6-c-divider--before--FlexBasis: 100%;
2859
- }
2860
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2861
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2862
- }
2863
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2864
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2865
- }
2866
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2867
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2868
- }
2869
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2870
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2871
- }
2872
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2873
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2874
- }
2875
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2876
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2877
- }
2878
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2879
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2880
- }
2725
+
2726
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
2727
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2881
2728
  }
2882
- @media (min-width: 90.625rem) {
2883
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2884
- flex-direction: row;
2885
- width: 100%;
2886
- height: var(--pf-v6-c-divider--Size);
2887
- }
2729
+
2730
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2731
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2732
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
2733
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2888
2734
  }
2889
- @media (min-width: 90.625rem) {
2890
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2891
- flex-direction: column;
2892
- width: var(--pf-v6-c-divider--Size);
2893
- height: inherit;
2894
- }
2735
+
2736
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2737
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2738
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
2739
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2895
2740
  }
2896
- @media (min-width: 90.625rem) {
2897
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2898
- --pf-v6-c-divider--before--FlexBasis: 100%;
2899
- }
2900
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2901
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2902
- }
2903
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2904
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2905
- }
2906
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2907
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2908
- }
2909
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2910
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2911
- }
2912
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2913
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2914
- }
2915
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2916
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2917
- }
2918
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2919
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2920
- }
2741
+
2742
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
2743
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2921
2744
  }
2922
- .pf-v6-c-breadcrumb {
2923
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2924
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2925
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2926
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2927
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2928
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2929
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2930
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2931
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2932
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2933
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2934
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2935
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2936
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2937
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2938
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2939
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2940
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2941
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2942
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2943
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2745
+
2746
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
2747
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
2748
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
2749
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2944
2750
  }
2945
2751
 
2946
- .pf-v6-c-breadcrumb {
2947
- display: inline-flex;
2752
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
2753
+ content: none;
2948
2754
  }
2949
2755
 
2950
- .pf-v6-c-breadcrumb__list {
2951
- display: flex;
2952
- flex-wrap: wrap;
2953
- align-items: center;
2756
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
2757
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
2758
+ --pf-v6-c-menu-toggle--Gap: 0;
2759
+ align-items: stretch;
2760
+ padding: 0;
2954
2761
  }
2955
2762
 
2956
- .pf-v6-c-breadcrumb__item {
2763
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
2764
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2765
+ }
2766
+
2767
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
2768
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2957
2769
  display: flex;
2770
+ align-items: stretch;
2771
+ }
2772
+
2773
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
2774
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
2775
+ flex: 1;
2776
+ }
2777
+
2778
+ .pf-v6-c-menu-toggle__button {
2779
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
2780
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
2781
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
2782
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
2783
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
2784
+ color: inherit;
2785
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
2786
+ border: 0;
2787
+ }
2788
+
2789
+ .pf-v6-c-menu-toggle__button.pf-m-text {
2790
+ display: inline-flex;
2958
2791
  align-items: baseline;
2959
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2960
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2961
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2792
+ }
2793
+
2794
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
2795
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2796
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2797
+ }
2798
+
2799
+ .pf-v6-c-menu-toggle__text {
2800
+ overflow: hidden;
2801
+ text-overflow: ellipsis;
2962
2802
  white-space: nowrap;
2963
- list-style: none;
2803
+ min-width: 0;
2964
2804
  }
2965
2805
 
2966
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2967
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2806
+ .pf-v6-c-menu-toggle__count {
2807
+ display: flex;
2808
+ flex-wrap: nowrap;
2968
2809
  }
2969
2810
 
2970
- .pf-v6-c-breadcrumb__item:not(:last-child) {
2971
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2811
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2812
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2813
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
2814
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2815
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2972
2816
  }
2973
2817
 
2974
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2975
- scale: -1 1;
2818
+ .pf-v6-c-menu-toggle__icon {
2819
+ flex-shrink: 0;
2820
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
2821
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
2822
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
2823
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
2976
2824
  }
2977
2825
 
2978
- .pf-v6-c-breadcrumb__item-divider {
2979
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2980
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2981
- line-height: 1;
2982
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2826
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
2827
+ vertical-align: middle;
2983
2828
  }
2984
2829
 
2985
- .pf-v6-c-breadcrumb__link {
2986
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2987
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2988
- font-size: inherit;
2989
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2990
- line-height: inherit;
2991
- color: var(--pf-v6-c-breadcrumb__link--Color);
2992
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2993
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2994
- word-break: break-word;
2995
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2830
+ .pf-v6-c-menu-toggle__controls {
2831
+ display: flex;
2832
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2833
+ align-items: center;
2834
+ justify-content: center;
2835
+ margin-inline-start: auto;
2996
2836
  }
2997
2837
 
2998
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2999
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3000
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3001
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2838
+ .pf-v6-c-menu-toggle__toggle-icon {
2839
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2840
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
3002
2841
  }
3003
2842
 
3004
- .pf-v6-c-breadcrumb__link.pf-m-current {
3005
- cursor: default;
2843
+ .pf-v6-c-menu-toggle__status-icon {
2844
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
3006
2845
  }
3007
2846
 
3008
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3009
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3010
- text-decoration-line: none;
2847
+ .pf-v6-c-badge {
2848
+ --pf-v6-c-badge--BorderColor: transparent;
2849
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2850
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2851
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2852
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2853
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2854
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2855
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2856
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2857
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2858
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2859
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2860
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2861
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2862
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2863
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2864
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2865
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2866
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2867
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2868
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
3011
2869
  }
3012
2870
 
3013
- button.pf-v6-c-breadcrumb__link {
3014
- border: none;
2871
+ .pf-v6-c-badge {
2872
+ position: relative;
2873
+ display: inline-block;
2874
+ min-width: var(--pf-v6-c-badge--MinWidth);
2875
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2876
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2877
+ font-size: var(--pf-v6-c-badge--FontSize);
2878
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2879
+ color: var(--pf-v6-c-badge--Color);
2880
+ text-align: center;
2881
+ white-space: nowrap;
2882
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2883
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
3015
2884
  }
3016
2885
 
3017
- .pf-v6-c-breadcrumb__dropdown {
3018
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3019
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3020
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3021
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2886
+ .pf-v6-c-badge::after {
2887
+ position: absolute;
2888
+ inset: 0;
2889
+ pointer-events: none;
2890
+ content: "";
2891
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2892
+ border-radius: inherit;
3022
2893
  }
3023
2894
 
3024
- .pf-v6-c-breadcrumb__heading {
3025
- display: inline;
3026
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2895
+ .pf-v6-c-badge.pf-m-read {
2896
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2897
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2898
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2899
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
3027
2900
  }
3028
2901
 
3029
- .pf-v6-c-breadcrumb__link,
3030
- .pf-v6-c-breadcrumb__heading {
3031
- white-space: normal;
2902
+ .pf-v6-c-badge.pf-m-unread {
2903
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2904
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2905
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
3032
2906
  }
3033
2907
 
3034
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3035
- display: none;
2908
+ .pf-v6-c-badge.pf-m-disabled {
2909
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2910
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2911
+ }
2912
+
2913
+ .pf-v6-c-badge.pf-m-disabled::after {
2914
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2915
+ }
2916
+
2917
+ .pf-v6-c-badge__toggle-icon {
2918
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2919
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
3036
2920
  }
3037
2921
 
3038
2922
  .pf-v6-c-menu {
@@ -3715,113 +3599,22 @@ button.pf-v6-c-breadcrumb__link {
3715
3599
  padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3716
3600
  }
3717
3601
 
3718
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3719
- min-width: auto;
3720
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3721
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3722
- }
3723
-
3724
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3725
- height: auto;
3726
- }
3727
-
3728
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3729
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3730
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3731
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3732
- }
3733
-
3734
- .pf-v6-c-spinner {
3735
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3736
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3737
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3738
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3739
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3740
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3741
- --pf-v6-c-spinner--StrokeWidth: 10;
3742
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3743
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3744
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3745
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3746
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3747
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3748
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3749
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3750
- }
3751
-
3752
- .pf-v6-c-spinner {
3753
- width: var(--pf-v6-c-spinner--Width);
3754
- height: var(--pf-v6-c-spinner--Height);
3755
- overflow: hidden;
3756
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3757
- }
3758
-
3759
- .pf-v6-c-spinner.pf-m-inline {
3760
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3761
- }
3762
-
3763
- .pf-v6-c-spinner.pf-m-xs {
3764
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3765
- --pf-v6-c-spinner--StrokeWidth: 15;
3766
- }
3767
-
3768
- .pf-v6-c-spinner.pf-m-sm {
3769
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3770
- }
3771
-
3772
- .pf-v6-c-spinner.pf-m-md {
3773
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3774
- }
3775
-
3776
- .pf-v6-c-spinner.pf-m-lg {
3777
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3778
- }
3779
-
3780
- .pf-v6-c-spinner.pf-m-xl {
3781
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3602
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3603
+ min-width: auto;
3604
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3605
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3782
3606
  }
3783
3607
 
3784
- .pf-v6-m-no-motion .pf-v6-c-spinner {
3785
- --pf-v6-c-spinner--AnimationDuration: 0s;
3608
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3609
+ height: auto;
3786
3610
  }
3787
3611
 
3788
- .pf-v6-c-spinner__path {
3789
- width: 100%;
3790
- height: 100%;
3791
- stroke: var(--pf-v6-c-spinner--Color);
3792
- stroke-dasharray: 283;
3793
- stroke-dashoffset: 280;
3794
- stroke-linecap: round;
3795
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3796
- transform-origin: 50% 50%;
3797
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3612
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3613
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3614
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3615
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3798
3616
  }
3799
3617
 
3800
- @keyframes pf-v6-c-spinner-animation-rotate {
3801
- 0% {
3802
- transform: rotate(0deg);
3803
- }
3804
- 100% {
3805
- transform: rotate(360deg);
3806
- }
3807
- }
3808
- @keyframes pf-v6-c-spinner-animation-dash {
3809
- 0% {
3810
- stroke-dashoffset: 280;
3811
- transform: rotate(0);
3812
- }
3813
- 15% {
3814
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3815
- }
3816
- 40% {
3817
- stroke-dasharray: 220;
3818
- stroke-dashoffset: 150;
3819
- }
3820
- 100% {
3821
- stroke-dashoffset: 280;
3822
- transform: rotate(720deg);
3823
- }
3824
- }
3825
3618
  .pf-v6-c-tooltip {
3826
3619
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3827
3620
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3951,4 +3744,211 @@ button.pf-v6-c-breadcrumb__link {
3951
3744
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3952
3745
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3953
3746
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3747
+ }
3748
+
3749
+ .pf-v6-c-spinner {
3750
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3751
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3752
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3753
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3754
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3755
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3756
+ --pf-v6-c-spinner--StrokeWidth: 10;
3757
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3758
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3759
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3760
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3761
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3762
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3763
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3764
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3765
+ }
3766
+
3767
+ .pf-v6-c-spinner {
3768
+ width: var(--pf-v6-c-spinner--Width);
3769
+ height: var(--pf-v6-c-spinner--Height);
3770
+ overflow: hidden;
3771
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3772
+ }
3773
+
3774
+ .pf-v6-c-spinner.pf-m-inline {
3775
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3776
+ }
3777
+
3778
+ .pf-v6-c-spinner.pf-m-xs {
3779
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3780
+ --pf-v6-c-spinner--StrokeWidth: 15;
3781
+ }
3782
+
3783
+ .pf-v6-c-spinner.pf-m-sm {
3784
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3785
+ }
3786
+
3787
+ .pf-v6-c-spinner.pf-m-md {
3788
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3789
+ }
3790
+
3791
+ .pf-v6-c-spinner.pf-m-lg {
3792
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3793
+ }
3794
+
3795
+ .pf-v6-c-spinner.pf-m-xl {
3796
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3797
+ }
3798
+
3799
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
3800
+ --pf-v6-c-spinner--AnimationDuration: 0s;
3801
+ }
3802
+
3803
+ .pf-v6-c-spinner__path {
3804
+ width: 100%;
3805
+ height: 100%;
3806
+ stroke: var(--pf-v6-c-spinner--Color);
3807
+ stroke-dasharray: 283;
3808
+ stroke-dashoffset: 280;
3809
+ stroke-linecap: round;
3810
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3811
+ transform-origin: 50% 50%;
3812
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3813
+ }
3814
+
3815
+ @keyframes pf-v6-c-spinner-animation-rotate {
3816
+ 0% {
3817
+ transform: rotate(0deg);
3818
+ }
3819
+ 100% {
3820
+ transform: rotate(360deg);
3821
+ }
3822
+ }
3823
+ @keyframes pf-v6-c-spinner-animation-dash {
3824
+ 0% {
3825
+ stroke-dashoffset: 280;
3826
+ transform: rotate(0);
3827
+ }
3828
+ 15% {
3829
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3830
+ }
3831
+ 40% {
3832
+ stroke-dasharray: 220;
3833
+ stroke-dashoffset: 150;
3834
+ }
3835
+ 100% {
3836
+ stroke-dashoffset: 280;
3837
+ transform: rotate(720deg);
3838
+ }
3839
+ }
3840
+ .pf-v6-c-breadcrumb {
3841
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3842
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3843
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3844
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3845
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3846
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3847
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3848
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3849
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3850
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3851
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3852
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3853
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3854
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3855
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3856
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3857
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3858
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3859
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3860
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3861
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3862
+ }
3863
+
3864
+ .pf-v6-c-breadcrumb {
3865
+ display: inline-flex;
3866
+ }
3867
+
3868
+ .pf-v6-c-breadcrumb__list {
3869
+ display: flex;
3870
+ flex-wrap: wrap;
3871
+ align-items: center;
3872
+ }
3873
+
3874
+ .pf-v6-c-breadcrumb__item {
3875
+ display: flex;
3876
+ align-items: baseline;
3877
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3878
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3879
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3880
+ white-space: nowrap;
3881
+ list-style: none;
3882
+ }
3883
+
3884
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3885
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3886
+ }
3887
+
3888
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3889
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3890
+ }
3891
+
3892
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3893
+ scale: -1 1;
3894
+ }
3895
+
3896
+ .pf-v6-c-breadcrumb__item-divider {
3897
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3898
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3899
+ line-height: 1;
3900
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3901
+ }
3902
+
3903
+ .pf-v6-c-breadcrumb__link {
3904
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3905
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3906
+ font-size: inherit;
3907
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3908
+ line-height: inherit;
3909
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3910
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3911
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3912
+ word-break: break-word;
3913
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3914
+ }
3915
+
3916
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3917
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3918
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3919
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3920
+ }
3921
+
3922
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3923
+ cursor: default;
3924
+ }
3925
+
3926
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3927
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3928
+ text-decoration-line: none;
3929
+ }
3930
+
3931
+ button.pf-v6-c-breadcrumb__link {
3932
+ border: none;
3933
+ }
3934
+
3935
+ .pf-v6-c-breadcrumb__dropdown {
3936
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3937
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3938
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3939
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3940
+ }
3941
+
3942
+ .pf-v6-c-breadcrumb__heading {
3943
+ display: inline;
3944
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3945
+ }
3946
+
3947
+ .pf-v6-c-breadcrumb__link,
3948
+ .pf-v6-c-breadcrumb__heading {
3949
+ white-space: normal;
3950
+ }
3951
+
3952
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3953
+ display: none;
3954
3954
  }