@patternfly/react-templates 6.3.1-prerelease.19 → 6.3.1-prerelease.20

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.
@@ -3,6 +3,250 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
+ .pf-v6-c-text-input-group {
7
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
+ --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));
21
+ --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));
22
+ --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));
23
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
40
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
41
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
42
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
43
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
44
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
45
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
46
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
47
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
48
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
49
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
50
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
51
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
52
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
53
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
54
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
55
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
56
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
57
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ }
59
+
60
+ .pf-v6-c-text-input-group {
61
+ position: relative;
62
+ display: flex;
63
+ width: 100%;
64
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
65
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
66
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
67
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
68
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
69
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
70
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
71
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
72
+ }
73
+
74
+ .pf-v6-c-text-input-group::before {
75
+ position: absolute;
76
+ inset: 0;
77
+ pointer-events: none;
78
+ content: "";
79
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
80
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
81
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
82
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
83
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
84
+ }
85
+
86
+ .pf-v6-c-text-input-group.pf-m-disabled {
87
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
88
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
89
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
90
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
91
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
92
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
93
+ pointer-events: none;
94
+ }
95
+
96
+ .pf-v6-c-text-input-group.pf-m-plain {
97
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
98
+ }
99
+
100
+ .pf-v6-c-text-input-group.pf-m-plain::before {
101
+ border: 0;
102
+ }
103
+
104
+ .pf-v6-c-text-input-group.pf-m-success {
105
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
106
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
107
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
108
+ }
109
+
110
+ .pf-v6-c-text-input-group.pf-m-warning {
111
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
112
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
113
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
114
+ }
115
+
116
+ .pf-v6-c-text-input-group.pf-m-error {
117
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
118
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
119
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
120
+ }
121
+
122
+ @media (prefers-reduced-motion: no-preference) {
123
+ .pf-v6-c-text-input-group.pf-m-error {
124
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
125
+ animation-name: pf-v6-global-danger-jiggle-motion;
126
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
127
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
128
+ animation-fill-mode: both;
129
+ }
130
+ }
131
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
132
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
133
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
134
+ animation-name: pf-v6-global-fade-in;
135
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
136
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
137
+ }
138
+
139
+ .pf-v6-c-text-input-group:hover {
140
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
141
+ }
142
+
143
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
144
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
145
+ }
146
+
147
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
148
+ --pf-v6-c-text-input-group__text--Position: relative;
149
+ }
150
+
151
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
152
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
153
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
154
+ }
155
+
156
+ .pf-v6-c-text-input-group__main {
157
+ display: flex;
158
+ flex: 1;
159
+ flex-wrap: wrap;
160
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
161
+ min-width: 0;
162
+ }
163
+
164
+ .pf-v6-c-text-input-group__main.pf-m-icon {
165
+ --pf-v6-c-text-input-group__text--Position: relative;
166
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
167
+ display: inline-flex;
168
+ align-items: center;
169
+ justify-content: center;
170
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
171
+ }
172
+
173
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
174
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
175
+ }
176
+
177
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
178
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
179
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
180
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
181
+ }
182
+
183
+ .pf-v6-c-text-input-group__text {
184
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
185
+ display: inline-grid;
186
+ flex: 1;
187
+ grid-template-areas: "text-input";
188
+ grid-template-columns: 1fr;
189
+ }
190
+
191
+ .pf-v6-c-text-input-group__icon {
192
+ position: absolute;
193
+ inset-block-start: 50%;
194
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
195
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
196
+ color: var(--pf-v6-c-text-input-group__icon--Color);
197
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
198
+ }
199
+
200
+ .pf-v6-c-text-input-group__icon.pf-m-status {
201
+ inset-inline-start: auto;
202
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
203
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
204
+ }
205
+
206
+ .pf-v6-c-text-input-group__text-input {
207
+ overflow: hidden;
208
+ text-overflow: ellipsis;
209
+ white-space: nowrap;
210
+ position: relative;
211
+ width: 100%;
212
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
213
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
214
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
215
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
216
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
217
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
218
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
219
+ border: 0;
220
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
221
+ }
222
+
223
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
224
+ grid-area: text-input;
225
+ }
226
+
227
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
228
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
229
+ }
230
+
231
+ .pf-v6-c-text-input-group__text-input::placeholder {
232
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
233
+ }
234
+
235
+ .pf-v6-c-text-input-group__utilities {
236
+ display: flex;
237
+ align-items: center;
238
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
239
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
240
+ }
241
+
242
+ .pf-v6-c-text-input-group__utilities > * + * {
243
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
244
+ }
245
+
246
+ .pf-v6-c-text-input-group__group {
247
+ display: flex;
248
+ }
249
+
6
250
  .pf-v6-c-menu-toggle {
7
251
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
252
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -565,18 +809,249 @@
565
809
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
566
810
  }
567
811
 
568
- .pf-v6-c-label {
569
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
570
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
571
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
572
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
573
- --pf-v6-c-label--MaxWidth: 100%;
574
- --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)));
575
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
576
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
577
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
578
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
579
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
812
+ .pf-v6-c-badge {
813
+ --pf-v6-c-badge--BorderColor: transparent;
814
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
815
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
816
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
817
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
818
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
819
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
820
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
821
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
822
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
823
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
824
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
825
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
826
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
827
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
828
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
829
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
830
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
831
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
832
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
833
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
834
+ }
835
+
836
+ .pf-v6-c-badge {
837
+ position: relative;
838
+ display: inline-block;
839
+ min-width: var(--pf-v6-c-badge--MinWidth);
840
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
841
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
842
+ font-size: var(--pf-v6-c-badge--FontSize);
843
+ font-weight: var(--pf-v6-c-badge--FontWeight);
844
+ color: var(--pf-v6-c-badge--Color);
845
+ text-align: center;
846
+ white-space: nowrap;
847
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
848
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
849
+ }
850
+
851
+ .pf-v6-c-badge::after {
852
+ position: absolute;
853
+ inset: 0;
854
+ pointer-events: none;
855
+ content: "";
856
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
857
+ border-radius: inherit;
858
+ }
859
+
860
+ .pf-v6-c-badge.pf-m-read {
861
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
862
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
863
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
864
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
865
+ }
866
+
867
+ .pf-v6-c-badge.pf-m-unread {
868
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
869
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
870
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
871
+ }
872
+
873
+ .pf-v6-c-badge.pf-m-disabled {
874
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
875
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
876
+ }
877
+
878
+ .pf-v6-c-badge.pf-m-disabled::after {
879
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
880
+ }
881
+
882
+ .pf-v6-c-badge__toggle-icon {
883
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
884
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
885
+ }
886
+
887
+ .pf-v6-c-label-group {
888
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
889
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
890
+ --pf-v6-c-label-group--MaxWidth: 100%;
891
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
892
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
893
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
894
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
895
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
896
+ --pf-v6-c-label-group__main--MinWidth: 0;
897
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
898
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
899
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
900
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
901
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
902
+ --pf-v6-c-label-group__list--MinWidth: 0;
903
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
904
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
905
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
906
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
907
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
908
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
909
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
910
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
911
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
912
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
913
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
914
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
915
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
916
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
917
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
918
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
919
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
920
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
921
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
922
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
923
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
924
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
925
+ }
926
+
927
+ .pf-v6-c-label-group {
928
+ display: inline-flex;
929
+ row-gap: var(--pf-v6-c-label-group--RowGap);
930
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
931
+ align-items: center;
932
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
933
+ }
934
+
935
+ .pf-v6-c-label-group.pf-m-category {
936
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
937
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
938
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
939
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
940
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
941
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
942
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
943
+ }
944
+
945
+ .pf-v6-c-label-group.pf-m-vertical {
946
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
947
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
948
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
949
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
950
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
951
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
952
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
953
+ }
954
+
955
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
956
+ align-items: flex-start;
957
+ }
958
+
959
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
960
+ flex-direction: column;
961
+ align-items: flex-start;
962
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
963
+ }
964
+
965
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
966
+ flex-direction: column;
967
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
968
+ }
969
+
970
+ .pf-v6-c-label-group.pf-m-editable,
971
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
972
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
973
+ display: flex;
974
+ }
975
+
976
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
977
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
978
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
979
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
980
+ flex: 1;
981
+ }
982
+
983
+ .pf-v6-c-label-group__main {
984
+ display: flex;
985
+ flex: 1;
986
+ flex-wrap: wrap;
987
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
988
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
989
+ align-items: baseline;
990
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
991
+ }
992
+
993
+ .pf-v6-c-label-group__list {
994
+ display: inline-flex;
995
+ flex-wrap: wrap;
996
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
997
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
998
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
999
+ }
1000
+
1001
+ .pf-v6-c-label-group__list-item {
1002
+ display: inline-flex;
1003
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1004
+ }
1005
+
1006
+ .pf-v6-c-label-group__label {
1007
+ overflow: hidden;
1008
+ text-overflow: ellipsis;
1009
+ white-space: nowrap;
1010
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1011
+ }
1012
+
1013
+ .pf-v6-c-label-group__close {
1014
+ display: flex;
1015
+ align-self: flex-start;
1016
+ }
1017
+
1018
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1019
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1020
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1021
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1022
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1023
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1024
+ }
1025
+
1026
+ .pf-v6-c-label-group__textarea {
1027
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1028
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1029
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1030
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1031
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1032
+ white-space: nowrap;
1033
+ resize: none;
1034
+ border: 0;
1035
+ -ms-overflow-style: none;
1036
+ scrollbar-width: none;
1037
+ }
1038
+
1039
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1040
+ display: none;
1041
+ }
1042
+
1043
+ .pf-v6-c-label {
1044
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1045
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1046
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1047
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1048
+ --pf-v6-c-label--MaxWidth: 100%;
1049
+ --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)));
1050
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1051
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1052
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1053
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1054
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
580
1055
  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
581
1056
  --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
582
1057
  --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
@@ -1108,725 +1583,6 @@ input.pf-v6-c-label__content {
1108
1583
  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1109
1584
  }
1110
1585
 
1111
- .pf-v6-c-text-input-group {
1112
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1113
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1114
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1115
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1116
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1117
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1118
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1119
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1120
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1121
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1122
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1123
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1124
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1125
- --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));
1126
- --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));
1127
- --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));
1128
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1129
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1130
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1131
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1132
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1133
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1134
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1135
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1136
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1137
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1138
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1139
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1140
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1141
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1142
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1143
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1144
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1145
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1146
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1147
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1148
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1149
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1150
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1151
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1152
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1153
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1154
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1155
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1156
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1157
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1158
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1159
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1160
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1161
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1162
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1163
- }
1164
-
1165
- .pf-v6-c-text-input-group {
1166
- position: relative;
1167
- display: flex;
1168
- width: 100%;
1169
- font-size: var(--pf-v6-c-text-input-group__FontSize);
1170
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
1171
- color: var(--pf-v6-c-text-input-group--Color, inherit);
1172
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1173
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1174
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1175
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1176
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1177
- }
1178
-
1179
- .pf-v6-c-text-input-group::before {
1180
- position: absolute;
1181
- inset: 0;
1182
- pointer-events: none;
1183
- content: "";
1184
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1185
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1186
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1187
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1188
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1189
- }
1190
-
1191
- .pf-v6-c-text-input-group.pf-m-disabled {
1192
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1193
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1194
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1195
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1196
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1197
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1198
- pointer-events: none;
1199
- }
1200
-
1201
- .pf-v6-c-text-input-group.pf-m-plain {
1202
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
1203
- }
1204
-
1205
- .pf-v6-c-text-input-group.pf-m-plain::before {
1206
- border: 0;
1207
- }
1208
-
1209
- .pf-v6-c-text-input-group.pf-m-success {
1210
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1211
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1212
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1213
- }
1214
-
1215
- .pf-v6-c-text-input-group.pf-m-warning {
1216
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1217
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1218
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1219
- }
1220
-
1221
- .pf-v6-c-text-input-group.pf-m-error {
1222
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1223
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1224
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1225
- }
1226
-
1227
- @media (prefers-reduced-motion: no-preference) {
1228
- .pf-v6-c-text-input-group.pf-m-error {
1229
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1230
- animation-name: pf-v6-global-danger-jiggle-motion;
1231
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1232
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1233
- animation-fill-mode: both;
1234
- }
1235
- }
1236
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1237
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1238
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1239
- animation-name: pf-v6-global-fade-in;
1240
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1241
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1242
- }
1243
-
1244
- .pf-v6-c-text-input-group:hover {
1245
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1246
- }
1247
-
1248
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1249
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1250
- }
1251
-
1252
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1253
- --pf-v6-c-text-input-group__text--Position: relative;
1254
- }
1255
-
1256
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1257
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1258
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1259
- }
1260
-
1261
- .pf-v6-c-text-input-group__main {
1262
- display: flex;
1263
- flex: 1;
1264
- flex-wrap: wrap;
1265
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1266
- min-width: 0;
1267
- }
1268
-
1269
- .pf-v6-c-text-input-group__main.pf-m-icon {
1270
- --pf-v6-c-text-input-group__text--Position: relative;
1271
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1272
- display: inline-flex;
1273
- align-items: center;
1274
- justify-content: center;
1275
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1276
- }
1277
-
1278
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1279
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1280
- }
1281
-
1282
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1283
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1284
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1285
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1286
- }
1287
-
1288
- .pf-v6-c-text-input-group__text {
1289
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
1290
- display: inline-grid;
1291
- flex: 1;
1292
- grid-template-areas: "text-input";
1293
- grid-template-columns: 1fr;
1294
- }
1295
-
1296
- .pf-v6-c-text-input-group__icon {
1297
- position: absolute;
1298
- inset-block-start: 50%;
1299
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1300
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1301
- color: var(--pf-v6-c-text-input-group__icon--Color);
1302
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1303
- }
1304
-
1305
- .pf-v6-c-text-input-group__icon.pf-m-status {
1306
- inset-inline-start: auto;
1307
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1308
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1309
- }
1310
-
1311
- .pf-v6-c-text-input-group__text-input {
1312
- overflow: hidden;
1313
- text-overflow: ellipsis;
1314
- white-space: nowrap;
1315
- position: relative;
1316
- width: 100%;
1317
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1318
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1319
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1320
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1321
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1322
- color: var(--pf-v6-c-text-input-group__text-input--Color);
1323
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1324
- border: 0;
1325
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1326
- }
1327
-
1328
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1329
- grid-area: text-input;
1330
- }
1331
-
1332
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
1333
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1334
- }
1335
-
1336
- .pf-v6-c-text-input-group__text-input::placeholder {
1337
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1338
- }
1339
-
1340
- .pf-v6-c-text-input-group__utilities {
1341
- display: flex;
1342
- align-items: center;
1343
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1344
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1345
- }
1346
-
1347
- .pf-v6-c-text-input-group__utilities > * + * {
1348
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1349
- }
1350
-
1351
- .pf-v6-c-text-input-group__group {
1352
- display: flex;
1353
- }
1354
-
1355
- .pf-v6-c-check {
1356
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1357
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1358
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1359
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1360
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1361
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1362
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1363
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1364
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1365
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1366
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1367
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1368
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1369
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1370
- }
1371
-
1372
- .pf-v6-c-check {
1373
- display: grid;
1374
- grid-template-columns: auto 1fr;
1375
- grid-gap: var(--pf-v6-c-check--GridGap);
1376
- accent-color: var(--pf-v6-c-check--AccentColor);
1377
- }
1378
-
1379
- .pf-v6-c-check.pf-m-standalone {
1380
- display: inline-grid;
1381
- grid-template-columns: auto;
1382
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1383
- }
1384
-
1385
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1386
- align-self: center;
1387
- transform: none;
1388
- }
1389
-
1390
- .pf-v6-c-check__input {
1391
- align-self: start;
1392
- font-size: var(--pf-v6-c-check__label--FontSize);
1393
- line-height: var(--pf-v6-c-check__label--LineHeight);
1394
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1395
- }
1396
-
1397
- .pf-v6-c-check__label {
1398
- font-size: var(--pf-v6-c-check__label--FontSize);
1399
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1400
- line-height: var(--pf-v6-c-check__label--LineHeight);
1401
- color: var(--pf-v6-c-check__label--Color);
1402
- }
1403
-
1404
- .pf-v6-c-check__description {
1405
- grid-column: 2;
1406
- font-size: var(--pf-v6-c-check__description--FontSize);
1407
- color: var(--pf-v6-c-check__description--Color);
1408
- }
1409
-
1410
- .pf-v6-c-check__body {
1411
- grid-column: 2;
1412
- }
1413
-
1414
- .pf-v6-c-check__label,
1415
- .pf-v6-c-check__input {
1416
- justify-self: start;
1417
- }
1418
-
1419
- label.pf-v6-c-check, .pf-v6-c-check__label,
1420
- .pf-v6-c-check__input {
1421
- cursor: pointer;
1422
- }
1423
-
1424
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1425
- .pf-v6-c-check__input:disabled,
1426
- .pf-v6-c-check__input.pf-m-disabled {
1427
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1428
- cursor: not-allowed;
1429
- }
1430
-
1431
- .pf-v6-c-check__label-required {
1432
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1433
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1434
- color: var(--pf-v6-c-check__label-required--Color);
1435
- }
1436
-
1437
- .pf-v6-c-divider {
1438
- --pf-v6-c-divider--Display: flex;
1439
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1440
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1441
- --pf-v6-c-divider--before--FlexBasis: 100%;
1442
- }
1443
-
1444
- .pf-v6-c-divider {
1445
- flex-direction: row;
1446
- width: 100%;
1447
- height: var(--pf-v6-c-divider--Size);
1448
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1449
- --pf-v6-hidden-visible--hidden--Display: none;
1450
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1451
- display: var(--pf-v6-hidden-visible--Display);
1452
- flex-shrink: 0;
1453
- align-items: stretch;
1454
- align-self: stretch;
1455
- justify-content: center;
1456
- border: 0;
1457
- }
1458
-
1459
- .pf-v6-c-divider.pf-m-hidden {
1460
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1461
- }
1462
-
1463
- @media screen and (min-width: 36rem) {
1464
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1465
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1466
- }
1467
- .pf-v6-c-divider.pf-m-visible-on-sm {
1468
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1469
- }
1470
- }
1471
- @media screen and (min-width: 48rem) {
1472
- .pf-v6-c-divider.pf-m-hidden-on-md {
1473
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1474
- }
1475
- .pf-v6-c-divider.pf-m-visible-on-md {
1476
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1477
- }
1478
- }
1479
- @media screen and (min-width: 62rem) {
1480
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1481
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1482
- }
1483
- .pf-v6-c-divider.pf-m-visible-on-lg {
1484
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1485
- }
1486
- }
1487
- @media screen and (min-width: 75rem) {
1488
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1489
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1490
- }
1491
- .pf-v6-c-divider.pf-m-visible-on-xl {
1492
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1493
- }
1494
- }
1495
- @media screen and (min-width: 90.625rem) {
1496
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1497
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1498
- }
1499
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1500
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1501
- }
1502
- }
1503
- .pf-v6-c-divider::before {
1504
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1505
- content: "";
1506
- background-color: var(--pf-v6-c-divider--Color);
1507
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1508
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1509
- }
1510
-
1511
- .pf-v6-c-divider.pf-m-horizontal {
1512
- flex-direction: row;
1513
- width: 100%;
1514
- height: var(--pf-v6-c-divider--Size);
1515
- }
1516
-
1517
- .pf-v6-c-divider.pf-m-vertical {
1518
- flex-direction: column;
1519
- width: var(--pf-v6-c-divider--Size);
1520
- height: inherit;
1521
- }
1522
-
1523
- .pf-v6-c-divider.pf-m-inset-none {
1524
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1525
- }
1526
-
1527
- .pf-v6-c-divider.pf-m-inset-xs {
1528
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1529
- }
1530
-
1531
- .pf-v6-c-divider.pf-m-inset-sm {
1532
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1533
- }
1534
-
1535
- .pf-v6-c-divider.pf-m-inset-md {
1536
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1537
- }
1538
-
1539
- .pf-v6-c-divider.pf-m-inset-lg {
1540
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1541
- }
1542
-
1543
- .pf-v6-c-divider.pf-m-inset-xl {
1544
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1545
- }
1546
-
1547
- .pf-v6-c-divider.pf-m-inset-2xl {
1548
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1549
- }
1550
-
1551
- .pf-v6-c-divider.pf-m-inset-3xl {
1552
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1553
- }
1554
-
1555
- @media (min-width: 36rem) {
1556
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1557
- flex-direction: row;
1558
- width: 100%;
1559
- height: var(--pf-v6-c-divider--Size);
1560
- }
1561
- }
1562
- @media (min-width: 36rem) {
1563
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1564
- flex-direction: column;
1565
- width: var(--pf-v6-c-divider--Size);
1566
- height: inherit;
1567
- }
1568
- }
1569
- @media (min-width: 36rem) {
1570
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1571
- --pf-v6-c-divider--before--FlexBasis: 100%;
1572
- }
1573
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1574
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1575
- }
1576
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1577
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1578
- }
1579
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1580
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1581
- }
1582
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1583
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1584
- }
1585
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1586
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1587
- }
1588
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1589
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1590
- }
1591
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1592
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1593
- }
1594
- }
1595
- @media (min-width: 48rem) {
1596
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1597
- flex-direction: row;
1598
- width: 100%;
1599
- height: var(--pf-v6-c-divider--Size);
1600
- }
1601
- }
1602
- @media (min-width: 48rem) {
1603
- .pf-v6-c-divider.pf-m-vertical-on-md {
1604
- flex-direction: column;
1605
- width: var(--pf-v6-c-divider--Size);
1606
- height: inherit;
1607
- }
1608
- }
1609
- @media (min-width: 48rem) {
1610
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1611
- --pf-v6-c-divider--before--FlexBasis: 100%;
1612
- }
1613
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1614
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1615
- }
1616
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1617
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1618
- }
1619
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1620
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1621
- }
1622
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1623
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1624
- }
1625
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1626
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1627
- }
1628
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1629
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1630
- }
1631
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1632
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1633
- }
1634
- }
1635
- @media (min-width: 62rem) {
1636
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1637
- flex-direction: row;
1638
- width: 100%;
1639
- height: var(--pf-v6-c-divider--Size);
1640
- }
1641
- }
1642
- @media (min-width: 62rem) {
1643
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1644
- flex-direction: column;
1645
- width: var(--pf-v6-c-divider--Size);
1646
- height: inherit;
1647
- }
1648
- }
1649
- @media (min-width: 62rem) {
1650
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1651
- --pf-v6-c-divider--before--FlexBasis: 100%;
1652
- }
1653
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1654
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1655
- }
1656
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1657
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1658
- }
1659
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1660
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1661
- }
1662
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1663
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1664
- }
1665
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1666
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1667
- }
1668
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1669
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1670
- }
1671
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1672
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1673
- }
1674
- }
1675
- @media (min-width: 75rem) {
1676
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1677
- flex-direction: row;
1678
- width: 100%;
1679
- height: var(--pf-v6-c-divider--Size);
1680
- }
1681
- }
1682
- @media (min-width: 75rem) {
1683
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1684
- flex-direction: column;
1685
- width: var(--pf-v6-c-divider--Size);
1686
- height: inherit;
1687
- }
1688
- }
1689
- @media (min-width: 75rem) {
1690
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1691
- --pf-v6-c-divider--before--FlexBasis: 100%;
1692
- }
1693
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1694
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1695
- }
1696
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1697
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1698
- }
1699
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1700
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1701
- }
1702
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1703
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1704
- }
1705
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1706
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1707
- }
1708
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1709
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1710
- }
1711
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1712
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1713
- }
1714
- }
1715
- @media (min-width: 90.625rem) {
1716
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1717
- flex-direction: row;
1718
- width: 100%;
1719
- height: var(--pf-v6-c-divider--Size);
1720
- }
1721
- }
1722
- @media (min-width: 90.625rem) {
1723
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1724
- flex-direction: column;
1725
- width: var(--pf-v6-c-divider--Size);
1726
- height: inherit;
1727
- }
1728
- }
1729
- @media (min-width: 90.625rem) {
1730
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1731
- --pf-v6-c-divider--before--FlexBasis: 100%;
1732
- }
1733
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1734
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1735
- }
1736
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1737
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1738
- }
1739
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1740
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1741
- }
1742
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1743
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1744
- }
1745
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1746
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1747
- }
1748
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1749
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1750
- }
1751
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1752
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1753
- }
1754
- }
1755
- .pf-v6-c-badge {
1756
- --pf-v6-c-badge--BorderColor: transparent;
1757
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1758
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1759
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1760
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1761
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1762
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1763
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1764
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1765
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1766
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1767
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1768
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1769
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1770
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1771
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1772
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1773
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1774
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1775
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1776
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1777
- }
1778
-
1779
- .pf-v6-c-badge {
1780
- position: relative;
1781
- display: inline-block;
1782
- min-width: var(--pf-v6-c-badge--MinWidth);
1783
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1784
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1785
- font-size: var(--pf-v6-c-badge--FontSize);
1786
- font-weight: var(--pf-v6-c-badge--FontWeight);
1787
- color: var(--pf-v6-c-badge--Color);
1788
- text-align: center;
1789
- white-space: nowrap;
1790
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1791
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1792
- }
1793
-
1794
- .pf-v6-c-badge::after {
1795
- position: absolute;
1796
- inset: 0;
1797
- pointer-events: none;
1798
- content: "";
1799
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1800
- border-radius: inherit;
1801
- }
1802
-
1803
- .pf-v6-c-badge.pf-m-read {
1804
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1805
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1806
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1807
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1808
- }
1809
-
1810
- .pf-v6-c-badge.pf-m-unread {
1811
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1812
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1813
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1814
- }
1815
-
1816
- .pf-v6-c-badge.pf-m-disabled {
1817
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1818
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1819
- }
1820
-
1821
- .pf-v6-c-badge.pf-m-disabled::after {
1822
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1823
- }
1824
-
1825
- .pf-v6-c-badge__toggle-icon {
1826
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1827
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1828
- }
1829
-
1830
1586
  .pf-v6-c-button {
1831
1587
  --pf-v6-c-button--Display: inline-flex;
1832
1588
  --pf-v6-c-button--AlignItems: baseline;
@@ -2713,169 +2469,413 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2713
2469
  33% {
2714
2470
  transform: rotate(30deg);
2715
2471
  }
2716
- 66% {
2717
- transform: rotate(-60deg);
2472
+ 66% {
2473
+ transform: rotate(-60deg);
2474
+ }
2475
+ }
2476
+ @keyframes pf-v6-c-button-icon-favorited {
2477
+ 50% {
2478
+ scale: 1.5;
2479
+ }
2480
+ }
2481
+ .pf-v6-c-divider {
2482
+ --pf-v6-c-divider--Display: flex;
2483
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2484
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2485
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2486
+ }
2487
+
2488
+ .pf-v6-c-divider {
2489
+ flex-direction: row;
2490
+ width: 100%;
2491
+ height: var(--pf-v6-c-divider--Size);
2492
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2493
+ --pf-v6-hidden-visible--hidden--Display: none;
2494
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2495
+ display: var(--pf-v6-hidden-visible--Display);
2496
+ flex-shrink: 0;
2497
+ align-items: stretch;
2498
+ align-self: stretch;
2499
+ justify-content: center;
2500
+ border: 0;
2501
+ }
2502
+
2503
+ .pf-v6-c-divider.pf-m-hidden {
2504
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2505
+ }
2506
+
2507
+ @media screen and (min-width: 36rem) {
2508
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2509
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2510
+ }
2511
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2512
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2513
+ }
2514
+ }
2515
+ @media screen and (min-width: 48rem) {
2516
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2517
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2518
+ }
2519
+ .pf-v6-c-divider.pf-m-visible-on-md {
2520
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2521
+ }
2522
+ }
2523
+ @media screen and (min-width: 62rem) {
2524
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2525
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2526
+ }
2527
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2528
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2529
+ }
2530
+ }
2531
+ @media screen and (min-width: 75rem) {
2532
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2533
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2534
+ }
2535
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2536
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2537
+ }
2538
+ }
2539
+ @media screen and (min-width: 90.625rem) {
2540
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2541
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2542
+ }
2543
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2544
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2545
+ }
2546
+ }
2547
+ .pf-v6-c-divider::before {
2548
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2549
+ content: "";
2550
+ background-color: var(--pf-v6-c-divider--Color);
2551
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2552
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2553
+ }
2554
+
2555
+ .pf-v6-c-divider.pf-m-horizontal {
2556
+ flex-direction: row;
2557
+ width: 100%;
2558
+ height: var(--pf-v6-c-divider--Size);
2559
+ }
2560
+
2561
+ .pf-v6-c-divider.pf-m-vertical {
2562
+ flex-direction: column;
2563
+ width: var(--pf-v6-c-divider--Size);
2564
+ height: inherit;
2565
+ }
2566
+
2567
+ .pf-v6-c-divider.pf-m-inset-none {
2568
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2569
+ }
2570
+
2571
+ .pf-v6-c-divider.pf-m-inset-xs {
2572
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2573
+ }
2574
+
2575
+ .pf-v6-c-divider.pf-m-inset-sm {
2576
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2577
+ }
2578
+
2579
+ .pf-v6-c-divider.pf-m-inset-md {
2580
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2581
+ }
2582
+
2583
+ .pf-v6-c-divider.pf-m-inset-lg {
2584
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2585
+ }
2586
+
2587
+ .pf-v6-c-divider.pf-m-inset-xl {
2588
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2589
+ }
2590
+
2591
+ .pf-v6-c-divider.pf-m-inset-2xl {
2592
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2593
+ }
2594
+
2595
+ .pf-v6-c-divider.pf-m-inset-3xl {
2596
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2597
+ }
2598
+
2599
+ @media (min-width: 36rem) {
2600
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2601
+ flex-direction: row;
2602
+ width: 100%;
2603
+ height: var(--pf-v6-c-divider--Size);
2604
+ }
2605
+ }
2606
+ @media (min-width: 36rem) {
2607
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2608
+ flex-direction: column;
2609
+ width: var(--pf-v6-c-divider--Size);
2610
+ height: inherit;
2611
+ }
2612
+ }
2613
+ @media (min-width: 36rem) {
2614
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2615
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2616
+ }
2617
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2618
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2619
+ }
2620
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2621
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2622
+ }
2623
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2624
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2625
+ }
2626
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2627
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2628
+ }
2629
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2630
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2631
+ }
2632
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2633
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2634
+ }
2635
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2636
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2637
+ }
2638
+ }
2639
+ @media (min-width: 48rem) {
2640
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2641
+ flex-direction: row;
2642
+ width: 100%;
2643
+ height: var(--pf-v6-c-divider--Size);
2644
+ }
2645
+ }
2646
+ @media (min-width: 48rem) {
2647
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2648
+ flex-direction: column;
2649
+ width: var(--pf-v6-c-divider--Size);
2650
+ height: inherit;
2651
+ }
2652
+ }
2653
+ @media (min-width: 48rem) {
2654
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2655
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2656
+ }
2657
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2658
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2659
+ }
2660
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2661
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2662
+ }
2663
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2664
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2665
+ }
2666
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2667
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2668
+ }
2669
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2670
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2671
+ }
2672
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2673
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2674
+ }
2675
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2676
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2677
+ }
2678
+ }
2679
+ @media (min-width: 62rem) {
2680
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2681
+ flex-direction: row;
2682
+ width: 100%;
2683
+ height: var(--pf-v6-c-divider--Size);
2684
+ }
2685
+ }
2686
+ @media (min-width: 62rem) {
2687
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2688
+ flex-direction: column;
2689
+ width: var(--pf-v6-c-divider--Size);
2690
+ height: inherit;
2691
+ }
2692
+ }
2693
+ @media (min-width: 62rem) {
2694
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2695
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2696
+ }
2697
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2698
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2699
+ }
2700
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2701
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2702
+ }
2703
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2704
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2705
+ }
2706
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2707
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2708
+ }
2709
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2710
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2711
+ }
2712
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2713
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2714
+ }
2715
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2716
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2718
2717
  }
2719
2718
  }
2720
- @keyframes pf-v6-c-button-icon-favorited {
2721
- 50% {
2722
- scale: 1.5;
2719
+ @media (min-width: 75rem) {
2720
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2721
+ flex-direction: row;
2722
+ width: 100%;
2723
+ height: var(--pf-v6-c-divider--Size);
2723
2724
  }
2724
2725
  }
2725
- .pf-v6-c-label-group {
2726
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2727
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2728
- --pf-v6-c-label-group--MaxWidth: 100%;
2729
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2730
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2731
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2732
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2733
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2734
- --pf-v6-c-label-group__main--MinWidth: 0;
2735
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2736
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2737
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2738
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2739
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2740
- --pf-v6-c-label-group__list--MinWidth: 0;
2741
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2742
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2743
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2744
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2745
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2746
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2747
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2748
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2749
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2750
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2751
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2752
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2753
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2754
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2755
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2756
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2757
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2758
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2759
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2760
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2761
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2762
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2726
+ @media (min-width: 75rem) {
2727
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2728
+ flex-direction: column;
2729
+ width: var(--pf-v6-c-divider--Size);
2730
+ height: inherit;
2731
+ }
2763
2732
  }
2764
-
2765
- .pf-v6-c-label-group {
2766
- display: inline-flex;
2767
- row-gap: var(--pf-v6-c-label-group--RowGap);
2768
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2769
- align-items: center;
2770
- max-width: var(--pf-v6-c-label-group--MaxWidth);
2733
+ @media (min-width: 75rem) {
2734
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2735
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2736
+ }
2737
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2738
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2739
+ }
2740
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2741
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2742
+ }
2743
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2744
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2745
+ }
2746
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2747
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2748
+ }
2749
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2750
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2751
+ }
2752
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2753
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2754
+ }
2755
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2756
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2757
+ }
2771
2758
  }
2772
-
2773
- .pf-v6-c-label-group.pf-m-category {
2774
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2775
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2776
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2777
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2778
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2779
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2780
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2759
+ @media (min-width: 90.625rem) {
2760
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2761
+ flex-direction: row;
2762
+ width: 100%;
2763
+ height: var(--pf-v6-c-divider--Size);
2764
+ }
2781
2765
  }
2782
-
2783
- .pf-v6-c-label-group.pf-m-vertical {
2784
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2785
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2786
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2787
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2788
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2789
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2790
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2766
+ @media (min-width: 90.625rem) {
2767
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2768
+ flex-direction: column;
2769
+ width: var(--pf-v6-c-divider--Size);
2770
+ height: inherit;
2771
+ }
2791
2772
  }
2792
-
2793
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2794
- align-items: flex-start;
2773
+ @media (min-width: 90.625rem) {
2774
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2775
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2776
+ }
2777
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2778
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2779
+ }
2780
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2781
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2782
+ }
2783
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2784
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2785
+ }
2786
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2787
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2788
+ }
2789
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2790
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2791
+ }
2792
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2793
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2794
+ }
2795
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2796
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2797
+ }
2795
2798
  }
2796
-
2797
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2798
- flex-direction: column;
2799
- align-items: flex-start;
2800
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2799
+ .pf-v6-c-check {
2800
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2801
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2802
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2803
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2804
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2805
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2806
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2807
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2808
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2809
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2810
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2811
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2812
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2813
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2801
2814
  }
2802
2815
 
2803
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2804
- flex-direction: column;
2805
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2816
+ .pf-v6-c-check {
2817
+ display: grid;
2818
+ grid-template-columns: auto 1fr;
2819
+ grid-gap: var(--pf-v6-c-check--GridGap);
2820
+ accent-color: var(--pf-v6-c-check--AccentColor);
2806
2821
  }
2807
2822
 
2808
- .pf-v6-c-label-group.pf-m-editable,
2809
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2810
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2811
- display: flex;
2823
+ .pf-v6-c-check.pf-m-standalone {
2824
+ display: inline-grid;
2825
+ grid-template-columns: auto;
2826
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2812
2827
  }
2813
2828
 
2814
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2815
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2816
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2817
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2818
- flex: 1;
2829
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2830
+ align-self: center;
2831
+ transform: none;
2819
2832
  }
2820
2833
 
2821
- .pf-v6-c-label-group__main {
2822
- display: flex;
2823
- flex: 1;
2824
- flex-wrap: wrap;
2825
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
2826
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2827
- align-items: baseline;
2828
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2834
+ .pf-v6-c-check__input {
2835
+ align-self: start;
2836
+ font-size: var(--pf-v6-c-check__label--FontSize);
2837
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2838
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2829
2839
  }
2830
2840
 
2831
- .pf-v6-c-label-group__list {
2832
- display: inline-flex;
2833
- flex-wrap: wrap;
2834
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2835
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2836
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
2841
+ .pf-v6-c-check__label {
2842
+ font-size: var(--pf-v6-c-check__label--FontSize);
2843
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2844
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2845
+ color: var(--pf-v6-c-check__label--Color);
2837
2846
  }
2838
2847
 
2839
- .pf-v6-c-label-group__list-item {
2840
- display: inline-flex;
2841
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2848
+ .pf-v6-c-check__description {
2849
+ grid-column: 2;
2850
+ font-size: var(--pf-v6-c-check__description--FontSize);
2851
+ color: var(--pf-v6-c-check__description--Color);
2842
2852
  }
2843
2853
 
2844
- .pf-v6-c-label-group__label {
2845
- overflow: hidden;
2846
- text-overflow: ellipsis;
2847
- white-space: nowrap;
2848
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2854
+ .pf-v6-c-check__body {
2855
+ grid-column: 2;
2849
2856
  }
2850
2857
 
2851
- .pf-v6-c-label-group__close {
2852
- display: flex;
2853
- align-self: flex-start;
2858
+ .pf-v6-c-check__label,
2859
+ .pf-v6-c-check__input {
2860
+ justify-self: start;
2854
2861
  }
2855
2862
 
2856
- .pf-v6-c-label-group__close .pf-v6-c-button {
2857
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2858
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2859
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2860
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2861
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2863
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2864
+ .pf-v6-c-check__input {
2865
+ cursor: pointer;
2862
2866
  }
2863
2867
 
2864
- .pf-v6-c-label-group__textarea {
2865
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2866
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2867
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2868
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2869
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2870
- white-space: nowrap;
2871
- resize: none;
2872
- border: 0;
2873
- -ms-overflow-style: none;
2874
- scrollbar-width: none;
2868
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2869
+ .pf-v6-c-check__input:disabled,
2870
+ .pf-v6-c-check__input.pf-m-disabled {
2871
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2872
+ cursor: not-allowed;
2875
2873
  }
2876
2874
 
2877
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2878
- display: none;
2875
+ .pf-v6-c-check__label-required {
2876
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2877
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2878
+ color: var(--pf-v6-c-check__label-required--Color);
2879
2879
  }
2880
2880
 
2881
2881
  .pf-v6-c-menu {
@@ -3562,6 +3562,122 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3562
3562
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3563
3563
  }
3564
3564
 
3565
+ .pf-v6-c-breadcrumb {
3566
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3567
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3568
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3569
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3570
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3571
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3572
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3573
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3574
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3575
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3576
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3577
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3578
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3579
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3580
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3581
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3582
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3583
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3584
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3585
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3586
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3587
+ }
3588
+
3589
+ .pf-v6-c-breadcrumb {
3590
+ display: inline-flex;
3591
+ }
3592
+
3593
+ .pf-v6-c-breadcrumb__list {
3594
+ display: flex;
3595
+ flex-wrap: wrap;
3596
+ align-items: center;
3597
+ }
3598
+
3599
+ .pf-v6-c-breadcrumb__item {
3600
+ display: flex;
3601
+ align-items: baseline;
3602
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3603
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3604
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3605
+ white-space: nowrap;
3606
+ list-style: none;
3607
+ }
3608
+
3609
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3610
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3611
+ }
3612
+
3613
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3614
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3615
+ }
3616
+
3617
+ .pf-v6-c-breadcrumb__item-divider {
3618
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3619
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3620
+ line-height: 1;
3621
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3622
+ }
3623
+
3624
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3625
+ scale: -1 1;
3626
+ }
3627
+
3628
+ .pf-v6-c-breadcrumb__link {
3629
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3630
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3631
+ font-size: inherit;
3632
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3633
+ line-height: inherit;
3634
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3635
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3636
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3637
+ word-break: break-word;
3638
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3639
+ }
3640
+
3641
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3642
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3643
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3644
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3645
+ }
3646
+
3647
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3648
+ cursor: default;
3649
+ }
3650
+
3651
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3652
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3653
+ text-decoration-line: none;
3654
+ }
3655
+
3656
+ button.pf-v6-c-breadcrumb__link {
3657
+ border: none;
3658
+ }
3659
+
3660
+ .pf-v6-c-breadcrumb__dropdown {
3661
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3662
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3663
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3664
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3665
+ }
3666
+
3667
+ .pf-v6-c-breadcrumb__heading {
3668
+ display: inline;
3669
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3670
+ }
3671
+
3672
+ .pf-v6-c-breadcrumb__link,
3673
+ .pf-v6-c-breadcrumb__heading {
3674
+ white-space: normal;
3675
+ }
3676
+
3677
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3678
+ display: none;
3679
+ }
3680
+
3565
3681
  .pf-v6-c-tooltip {
3566
3682
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3567
3683
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3693,122 +3809,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3693
3809
  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));
3694
3810
  }
3695
3811
 
3696
- .pf-v6-c-breadcrumb {
3697
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3698
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3699
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3700
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3701
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3702
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3703
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3704
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3705
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3706
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3707
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3708
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3709
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3710
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3711
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3712
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3713
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3714
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3715
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3716
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3717
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3718
- }
3719
-
3720
- .pf-v6-c-breadcrumb {
3721
- display: inline-flex;
3722
- }
3723
-
3724
- .pf-v6-c-breadcrumb__list {
3725
- display: flex;
3726
- flex-wrap: wrap;
3727
- align-items: center;
3728
- }
3729
-
3730
- .pf-v6-c-breadcrumb__item {
3731
- display: flex;
3732
- align-items: baseline;
3733
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3734
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3735
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3736
- white-space: nowrap;
3737
- list-style: none;
3738
- }
3739
-
3740
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3741
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3742
- }
3743
-
3744
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3745
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3746
- }
3747
-
3748
- .pf-v6-c-breadcrumb__item-divider {
3749
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3750
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3751
- line-height: 1;
3752
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3753
- }
3754
-
3755
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3756
- scale: -1 1;
3757
- }
3758
-
3759
- .pf-v6-c-breadcrumb__link {
3760
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3761
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3762
- font-size: inherit;
3763
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3764
- line-height: inherit;
3765
- color: var(--pf-v6-c-breadcrumb__link--Color);
3766
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3767
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3768
- word-break: break-word;
3769
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3770
- }
3771
-
3772
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3773
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3774
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3775
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3776
- }
3777
-
3778
- .pf-v6-c-breadcrumb__link.pf-m-current {
3779
- cursor: default;
3780
- }
3781
-
3782
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3783
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3784
- text-decoration-line: none;
3785
- }
3786
-
3787
- button.pf-v6-c-breadcrumb__link {
3788
- border: none;
3789
- }
3790
-
3791
- .pf-v6-c-breadcrumb__dropdown {
3792
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3793
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3794
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3795
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3796
- }
3797
-
3798
- .pf-v6-c-breadcrumb__heading {
3799
- display: inline;
3800
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3801
- }
3802
-
3803
- .pf-v6-c-breadcrumb__link,
3804
- .pf-v6-c-breadcrumb__heading {
3805
- white-space: normal;
3806
- }
3807
-
3808
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3809
- display: none;
3810
- }
3811
-
3812
3812
  .pf-v6-c-spinner {
3813
3813
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3814
3814
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);