@patternfly/react-templates 6.5.0-prerelease.53 → 6.5.0-prerelease.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-DrWIlVsB.css → output-De57t462.css} +693 -694
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +4 -4
package/dist/umd/assets/{output-DrWIlVsB.css → output-De57t462.css} RENAMED
@@ -3,237 +3,6 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-badge {
7
- --pf-v6-c-badge--BorderColor: transparent;
8
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
9
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
10
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
11
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
12
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
14
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
15
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
16
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
17
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
18
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
19
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
20
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
21
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
22
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
23
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
24
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
25
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
26
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
27
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
28
- }
29
-
30
- .pf-v6-c-badge {
31
- position: relative;
32
- display: inline-block;
33
- min-width: var(--pf-v6-c-badge--MinWidth);
34
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
35
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
36
- font-size: var(--pf-v6-c-badge--FontSize);
37
- font-weight: var(--pf-v6-c-badge--FontWeight);
38
- color: var(--pf-v6-c-badge--Color);
39
- text-align: center;
40
- white-space: nowrap;
41
- background-color: var(--pf-v6-c-badge--BackgroundColor);
42
- border-radius: var(--pf-v6-c-badge--BorderRadius);
43
- }
44
-
45
- .pf-v6-c-badge::after {
46
- position: absolute;
47
- inset: 0;
48
- pointer-events: none;
49
- content: "";
50
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
51
- border-radius: inherit;
52
- }
53
-
54
- .pf-v6-c-badge.pf-m-read {
55
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
56
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
57
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
58
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
59
- }
60
-
61
- .pf-v6-c-badge.pf-m-unread {
62
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
63
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
64
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
65
- }
66
-
67
- .pf-v6-c-badge.pf-m-disabled {
68
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
69
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
70
- }
71
-
72
- .pf-v6-c-badge.pf-m-disabled::after {
73
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
74
- }
75
-
76
- .pf-v6-c-badge__toggle-icon {
77
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
78
- color: var(--pf-v6-c-badge__toggle-icon--Color);
79
- }
80
-
81
- .pf-v6-c-label-group {
82
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
83
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
84
- --pf-v6-c-label-group--MaxWidth: 100%;
85
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
86
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
87
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
88
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
89
- --pf-v6-c-label-group__main--MaxWidth: 100%;
90
- --pf-v6-c-label-group__main--MinWidth: 0;
91
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
92
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
93
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
94
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
95
- --pf-v6-c-label-group__list--MaxWidth: 100%;
96
- --pf-v6-c-label-group__list--MinWidth: 0;
97
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
98
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
99
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
100
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
101
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
102
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
103
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
104
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
105
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
106
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
107
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
108
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
109
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
110
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
111
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
112
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
113
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
114
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
115
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
116
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
117
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
118
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
119
- }
120
-
121
- .pf-v6-c-label-group {
122
- display: inline-flex;
123
- row-gap: var(--pf-v6-c-label-group--RowGap);
124
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
125
- align-items: center;
126
- max-width: var(--pf-v6-c-label-group--MaxWidth);
127
- }
128
-
129
- .pf-v6-c-label-group.pf-m-category {
130
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
131
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
132
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
133
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
134
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
135
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
136
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
137
- }
138
-
139
- .pf-v6-c-label-group.pf-m-vertical {
140
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
141
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
142
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
143
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
144
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
145
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
146
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
147
- }
148
-
149
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
150
- align-items: flex-start;
151
- }
152
-
153
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
154
- flex-direction: column;
155
- align-items: flex-start;
156
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
157
- }
158
-
159
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
160
- flex-direction: column;
161
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
162
- }
163
-
164
- .pf-v6-c-label-group.pf-m-editable,
165
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
166
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
167
- display: flex;
168
- }
169
-
170
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
171
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
172
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
173
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
174
- flex: 1;
175
- }
176
-
177
- .pf-v6-c-label-group__main {
178
- display: flex;
179
- flex: 1;
180
- flex-wrap: wrap;
181
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
182
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
183
- align-items: baseline;
184
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
185
- }
186
-
187
- .pf-v6-c-label-group__list {
188
- display: inline-flex;
189
- flex-wrap: wrap;
190
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
191
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
192
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
193
- }
194
-
195
- .pf-v6-c-label-group__list-item {
196
- display: inline-flex;
197
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
198
- }
199
-
200
- .pf-v6-c-label-group__label {
201
- overflow: hidden;
202
- text-overflow: ellipsis;
203
- white-space: nowrap;
204
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
205
- }
206
-
207
- .pf-v6-c-label-group__close {
208
- display: flex;
209
- align-self: flex-start;
210
- }
211
-
212
- .pf-v6-c-label-group__close .pf-v6-c-button {
213
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
214
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
215
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
216
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
217
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
218
- }
219
-
220
- .pf-v6-c-label-group__textarea {
221
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
222
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
223
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
224
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
225
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
226
- white-space: nowrap;
227
- resize: none;
228
- scrollbar-width: none;
229
- -ms-overflow-style: none;
230
- border: 0;
231
- }
232
-
233
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
234
- display: none;
235
- }
236
-
237
6
  .pf-v6-c-menu-toggle {
238
7
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
239
8
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -832,31 +601,275 @@
832
601
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
833
602
  }
834
603
 
835
- .pf-v6-c-check {
836
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
837
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
838
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
839
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
840
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
841
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
842
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
843
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
844
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
845
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
846
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
847
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
848
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
849
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
850
- }
851
-
852
- .pf-v6-c-check {
853
- display: grid;
854
- grid-template-columns: auto 1fr;
855
- grid-gap: var(--pf-v6-c-check--GridGap);
856
- accent-color: var(--pf-v6-c-check--AccentColor);
857
- }
858
-
859
- .pf-v6-c-check.pf-m-standalone {
604
+ .pf-v6-c-text-input-group {
605
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
606
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
607
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
608
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
609
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
610
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
611
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
612
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
613
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
614
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
615
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
616
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
617
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
618
+ --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));
619
+ --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));
620
+ --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));
621
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
622
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
623
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
624
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
625
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
626
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
627
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
628
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
629
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
630
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
631
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
632
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
633
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
634
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
635
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
636
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
637
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
638
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
639
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
640
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
641
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
642
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
643
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
644
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
645
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
646
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
647
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
648
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
649
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
650
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
651
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
652
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
653
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
654
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
655
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
656
+ }
657
+
658
+ .pf-v6-c-text-input-group {
659
+ position: relative;
660
+ display: flex;
661
+ width: 100%;
662
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
663
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
664
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
665
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
666
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
667
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
668
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
669
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
670
+ }
671
+
672
+ .pf-v6-c-text-input-group::before {
673
+ position: absolute;
674
+ inset: 0;
675
+ pointer-events: none;
676
+ content: "";
677
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
678
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
679
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
680
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
681
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
682
+ }
683
+
684
+ .pf-v6-c-text-input-group.pf-m-disabled {
685
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
686
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
687
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
688
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
689
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
690
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
691
+ pointer-events: none;
692
+ }
693
+
694
+ .pf-v6-c-text-input-group.pf-m-plain {
695
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
696
+ }
697
+
698
+ .pf-v6-c-text-input-group.pf-m-plain::before {
699
+ border: 0;
700
+ }
701
+
702
+ .pf-v6-c-text-input-group.pf-m-success {
703
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
704
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
705
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
706
+ }
707
+
708
+ .pf-v6-c-text-input-group.pf-m-warning {
709
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
710
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
711
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
712
+ }
713
+
714
+ .pf-v6-c-text-input-group.pf-m-error {
715
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
716
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
717
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
718
+ }
719
+
720
+ @media (prefers-reduced-motion: no-preference) {
721
+ .pf-v6-c-text-input-group.pf-m-error {
722
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
723
+ animation-name: pf-v6-global-danger-jiggle-motion;
724
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
725
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
726
+ animation-fill-mode: both;
727
+ }
728
+ }
729
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
730
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
731
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
732
+ animation-name: pf-v6-global-fade-in;
733
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
734
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
735
+ }
736
+
737
+ .pf-v6-c-text-input-group:hover {
738
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
739
+ }
740
+
741
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
742
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
743
+ }
744
+
745
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
746
+ --pf-v6-c-text-input-group__text--Position: relative;
747
+ }
748
+
749
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
750
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
751
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
752
+ }
753
+
754
+ .pf-v6-c-text-input-group__main {
755
+ display: flex;
756
+ flex: 1;
757
+ flex-wrap: wrap;
758
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
759
+ min-width: 0;
760
+ }
761
+
762
+ .pf-v6-c-text-input-group__main.pf-m-icon {
763
+ --pf-v6-c-text-input-group__text--Position: relative;
764
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
765
+ display: inline-flex;
766
+ align-items: center;
767
+ justify-content: center;
768
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
769
+ }
770
+
771
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
772
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
773
+ }
774
+
775
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
776
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
777
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
778
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
779
+ }
780
+
781
+ .pf-v6-c-text-input-group__text {
782
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
783
+ display: inline-grid;
784
+ flex: 1;
785
+ grid-template-areas: "text-input";
786
+ grid-template-columns: 1fr;
787
+ }
788
+
789
+ .pf-v6-c-text-input-group__icon {
790
+ position: absolute;
791
+ inset-block-start: 50%;
792
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
793
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
794
+ color: var(--pf-v6-c-text-input-group__icon--Color);
795
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
796
+ }
797
+
798
+ .pf-v6-c-text-input-group__icon.pf-m-status {
799
+ inset-inline-start: auto;
800
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
801
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
802
+ }
803
+
804
+ .pf-v6-c-text-input-group__text-input {
805
+ overflow: hidden;
806
+ text-overflow: ellipsis;
807
+ white-space: nowrap;
808
+ position: relative;
809
+ width: 100%;
810
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
811
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
812
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
813
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
814
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
815
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
816
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
817
+ border: 0;
818
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
819
+ }
820
+
821
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
822
+ grid-area: text-input;
823
+ }
824
+
825
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
826
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
827
+ }
828
+
829
+ .pf-v6-c-text-input-group__text-input::placeholder {
830
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
831
+ }
832
+
833
+ .pf-v6-c-text-input-group__utilities {
834
+ display: flex;
835
+ align-items: center;
836
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
837
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
838
+ }
839
+
840
+ .pf-v6-c-text-input-group__utilities > * + * {
841
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
842
+ }
843
+
844
+ .pf-v6-c-text-input-group__group {
845
+ display: flex;
846
+ }
847
+
848
+ .pf-v6-c-check {
849
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
850
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
851
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
852
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
853
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
854
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
855
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
856
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
857
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
858
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
859
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
860
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
861
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
862
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
863
+ }
864
+
865
+ .pf-v6-c-check {
866
+ display: grid;
867
+ grid-template-columns: auto 1fr;
868
+ grid-gap: var(--pf-v6-c-check--GridGap);
869
+ accent-color: var(--pf-v6-c-check--AccentColor);
870
+ }
871
+
872
+ .pf-v6-c-check.pf-m-standalone {
860
873
  display: inline-grid;
861
874
  grid-template-columns: auto;
862
875
  min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
@@ -2439,276 +2452,263 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2439
2452
  }
2440
2453
 
2441
2454
  .pf-v6-c-button--hamburger-icon--top {
2442
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2443
- }
2444
-
2445
- .pf-v6-c-button--hamburger-icon--middle {
2446
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2447
- }
2448
-
2449
- .pf-v6-c-button--hamburger-icon--arrow {
2450
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2451
- }
2452
-
2453
- .pf-v6-c-button--hamburger-icon--bottom {
2454
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2455
- }
2456
-
2457
- @keyframes pf-v6-c-button-icon-notify {
2458
- 33% {
2459
- transform: rotate(30deg);
2460
- }
2461
- 66% {
2462
- transform: rotate(-60deg);
2463
- }
2464
- }
2465
- @keyframes pf-v6-c-button-icon-favorited {
2466
- 50% {
2467
- scale: 1.5;
2468
- }
2469
- }
2470
- .pf-v6-c-text-input-group {
2471
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2472
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2473
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2474
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2475
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2476
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2477
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2478
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2479
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2480
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2481
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2482
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2483
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2484
- --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));
2485
- --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));
2486
- --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));
2487
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2488
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2489
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2490
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2491
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2492
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2493
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2494
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2495
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2496
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2497
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2498
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2499
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2500
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2501
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2502
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2503
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2504
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2505
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2506
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2507
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2508
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2509
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2510
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2511
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2512
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2513
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2514
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2515
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2516
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2517
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2518
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2519
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2520
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2521
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2522
- }
2523
-
2524
- .pf-v6-c-text-input-group {
2525
- position: relative;
2526
- display: flex;
2527
- width: 100%;
2528
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2529
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2530
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2531
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2532
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2533
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2534
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2535
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2455
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2536
2456
  }
2537
2457
 
2538
- .pf-v6-c-text-input-group::before {
2539
- position: absolute;
2540
- inset: 0;
2541
- pointer-events: none;
2542
- content: "";
2543
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2544
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2545
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2546
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2547
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2458
+ .pf-v6-c-button--hamburger-icon--middle {
2459
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2548
2460
  }
2549
2461
 
2550
- .pf-v6-c-text-input-group.pf-m-disabled {
2551
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2552
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2553
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2554
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2555
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2556
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2557
- pointer-events: none;
2462
+ .pf-v6-c-button--hamburger-icon--arrow {
2463
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2558
2464
  }
2559
2465
 
2560
- .pf-v6-c-text-input-group.pf-m-plain {
2561
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
2466
+ .pf-v6-c-button--hamburger-icon--bottom {
2467
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2562
2468
  }
2563
2469
 
2564
- .pf-v6-c-text-input-group.pf-m-plain::before {
2565
- border: 0;
2470
+ @keyframes pf-v6-c-button-icon-notify {
2471
+ 33% {
2472
+ transform: rotate(30deg);
2473
+ }
2474
+ 66% {
2475
+ transform: rotate(-60deg);
2476
+ }
2566
2477
  }
2567
-
2568
- .pf-v6-c-text-input-group.pf-m-success {
2569
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2570
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2571
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2478
+ @keyframes pf-v6-c-button-icon-favorited {
2479
+ 50% {
2480
+ scale: 1.5;
2481
+ }
2482
+ }
2483
+ .pf-v6-c-label-group {
2484
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2485
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2486
+ --pf-v6-c-label-group--MaxWidth: 100%;
2487
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2488
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2489
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2490
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2491
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2492
+ --pf-v6-c-label-group__main--MinWidth: 0;
2493
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2494
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2495
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2496
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2497
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2498
+ --pf-v6-c-label-group__list--MinWidth: 0;
2499
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2500
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2501
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2502
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2503
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2504
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2505
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2506
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2507
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2508
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2509
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2510
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2511
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2512
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2513
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2514
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2515
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2516
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2517
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2518
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2519
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2520
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2572
2521
  }
2573
2522
 
2574
- .pf-v6-c-text-input-group.pf-m-warning {
2575
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2576
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2577
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2523
+ .pf-v6-c-label-group {
2524
+ display: inline-flex;
2525
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2526
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2527
+ align-items: center;
2528
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2578
2529
  }
2579
2530
 
2580
- .pf-v6-c-text-input-group.pf-m-error {
2581
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2582
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2583
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2531
+ .pf-v6-c-label-group.pf-m-category {
2532
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2533
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2534
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2535
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2536
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2537
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2538
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2584
2539
  }
2585
2540
 
2586
- @media (prefers-reduced-motion: no-preference) {
2587
- .pf-v6-c-text-input-group.pf-m-error {
2588
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2589
- animation-name: pf-v6-global-danger-jiggle-motion;
2590
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2591
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2592
- animation-fill-mode: both;
2593
- }
2541
+ .pf-v6-c-label-group.pf-m-vertical {
2542
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2543
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2544
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2545
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2546
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2547
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2548
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2594
2549
  }
2595
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2596
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2597
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2598
- animation-name: pf-v6-global-fade-in;
2599
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2600
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2550
+
2551
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2552
+ align-items: flex-start;
2601
2553
  }
2602
2554
 
2603
- .pf-v6-c-text-input-group:hover {
2604
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2555
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2556
+ flex-direction: column;
2557
+ align-items: flex-start;
2558
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2605
2559
  }
2606
2560
 
2607
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2608
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2561
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2562
+ flex-direction: column;
2563
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2609
2564
  }
2610
2565
 
2611
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2612
- --pf-v6-c-text-input-group__text--Position: relative;
2566
+ .pf-v6-c-label-group.pf-m-editable,
2567
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2568
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2569
+ display: flex;
2613
2570
  }
2614
2571
 
2615
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2616
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2617
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2572
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2573
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2574
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2575
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2576
+ flex: 1;
2618
2577
  }
2619
2578
 
2620
- .pf-v6-c-text-input-group__main {
2579
+ .pf-v6-c-label-group__main {
2621
2580
  display: flex;
2622
2581
  flex: 1;
2623
2582
  flex-wrap: wrap;
2624
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2625
- min-width: 0;
2583
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2584
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2585
+ align-items: baseline;
2586
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2626
2587
  }
2627
2588
 
2628
- .pf-v6-c-text-input-group__main.pf-m-icon {
2629
- --pf-v6-c-text-input-group__text--Position: relative;
2630
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2589
+ .pf-v6-c-label-group__list {
2631
2590
  display: inline-flex;
2632
- align-items: center;
2633
- justify-content: center;
2634
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2591
+ flex-wrap: wrap;
2592
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2593
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2594
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2635
2595
  }
2636
2596
 
2637
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2638
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2597
+ .pf-v6-c-label-group__list-item {
2598
+ display: inline-flex;
2599
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2639
2600
  }
2640
2601
 
2641
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2642
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2643
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2644
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2602
+ .pf-v6-c-label-group__label {
2603
+ overflow: hidden;
2604
+ text-overflow: ellipsis;
2605
+ white-space: nowrap;
2606
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2645
2607
  }
2646
2608
 
2647
- .pf-v6-c-text-input-group__text {
2648
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
2649
- display: inline-grid;
2650
- flex: 1;
2651
- grid-template-areas: "text-input";
2652
- grid-template-columns: 1fr;
2609
+ .pf-v6-c-label-group__close {
2610
+ display: flex;
2611
+ align-self: flex-start;
2653
2612
  }
2654
2613
 
2655
- .pf-v6-c-text-input-group__icon {
2656
- position: absolute;
2657
- inset-block-start: 50%;
2658
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2659
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2660
- color: var(--pf-v6-c-text-input-group__icon--Color);
2661
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2614
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2615
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2616
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2617
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2618
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2619
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2662
2620
  }
2663
2621
 
2664
- .pf-v6-c-text-input-group__icon.pf-m-status {
2665
- inset-inline-start: auto;
2666
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2667
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2622
+ .pf-v6-c-label-group__textarea {
2623
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2624
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2625
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2626
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2627
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2628
+ white-space: nowrap;
2629
+ resize: none;
2630
+ scrollbar-width: none;
2631
+ -ms-overflow-style: none;
2632
+ border: 0;
2668
2633
  }
2669
2634
 
2670
- .pf-v6-c-text-input-group__text-input {
2671
- overflow: hidden;
2672
- text-overflow: ellipsis;
2673
- white-space: nowrap;
2635
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2636
+ display: none;
2637
+ }
2638
+
2639
+ .pf-v6-c-badge {
2640
+ --pf-v6-c-badge--BorderColor: transparent;
2641
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2642
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2643
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2644
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2645
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2646
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2647
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2648
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2649
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2650
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2651
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2652
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2653
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2654
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2655
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2656
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2657
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2658
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2659
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2660
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2661
+ }
2662
+
2663
+ .pf-v6-c-badge {
2674
2664
  position: relative;
2675
- width: 100%;
2676
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2677
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2678
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2679
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2680
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2681
- color: var(--pf-v6-c-text-input-group__text-input--Color);
2682
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2683
- border: 0;
2684
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2665
+ display: inline-block;
2666
+ min-width: var(--pf-v6-c-badge--MinWidth);
2667
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2668
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2669
+ font-size: var(--pf-v6-c-badge--FontSize);
2670
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2671
+ color: var(--pf-v6-c-badge--Color);
2672
+ text-align: center;
2673
+ white-space: nowrap;
2674
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2675
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2685
2676
  }
2686
2677
 
2687
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2688
- grid-area: text-input;
2678
+ .pf-v6-c-badge::after {
2679
+ position: absolute;
2680
+ inset: 0;
2681
+ pointer-events: none;
2682
+ content: "";
2683
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2684
+ border-radius: inherit;
2689
2685
  }
2690
2686
 
2691
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
2692
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2687
+ .pf-v6-c-badge.pf-m-read {
2688
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2689
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2690
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2691
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2693
2692
  }
2694
2693
 
2695
- .pf-v6-c-text-input-group__text-input::placeholder {
2696
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2694
+ .pf-v6-c-badge.pf-m-unread {
2695
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2696
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2697
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2697
2698
  }
2698
2699
 
2699
- .pf-v6-c-text-input-group__utilities {
2700
- display: flex;
2701
- align-items: center;
2702
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2703
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2700
+ .pf-v6-c-badge.pf-m-disabled {
2701
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2702
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2704
2703
  }
2705
2704
 
2706
- .pf-v6-c-text-input-group__utilities > * + * {
2707
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2705
+ .pf-v6-c-badge.pf-m-disabled::after {
2706
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2708
2707
  }
2709
2708
 
2710
- .pf-v6-c-text-input-group__group {
2711
- display: flex;
2709
+ .pf-v6-c-badge__toggle-icon {
2710
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2711
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2712
2712
  }
2713
2713
 
2714
2714
  .pf-v6-c-divider {
@@ -3032,135 +3032,124 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3032
3032
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3033
3033
  }
3034
3034
  }
3035
- .pf-v6-c-tooltip {
3036
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3037
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3038
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3039
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3040
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3041
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3042
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3043
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3044
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3045
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3046
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3047
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3048
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3049
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3050
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3051
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3052
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3053
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3054
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3055
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3056
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3057
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3058
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3059
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3060
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3061
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3035
+ .pf-v6-c-breadcrumb {
3036
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3037
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3038
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3039
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3040
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3041
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3042
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3043
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3044
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3045
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3046
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3047
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3048
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3049
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3050
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3051
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3052
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3053
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3054
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3055
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3056
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3057
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3058
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3062
3059
  }
3063
3060
 
3064
- .pf-v6-c-tooltip {
3065
- position: relative;
3066
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
3067
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3061
+ .pf-v6-c-breadcrumb {
3062
+ display: inline-flex;
3068
3063
  }
3069
3064
 
3070
- .pf-v6-c-tooltip:is(.pf-m-top,
3071
- .pf-m-top-left,
3072
- .pf-m-top-right) {
3073
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3074
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3075
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3076
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3077
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3065
+ .pf-v6-c-breadcrumb__list {
3066
+ display: flex;
3067
+ flex-wrap: wrap;
3068
+ align-items: center;
3078
3069
  }
3079
3070
 
3080
- .pf-v6-c-tooltip:is(.pf-m-bottom,
3081
- .pf-m-bottom-left,
3082
- .pf-m-bottom-right) {
3083
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3084
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3085
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3086
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3087
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
3071
+ .pf-v6-c-breadcrumb__item {
3072
+ display: flex;
3073
+ align-items: baseline;
3074
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3075
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3076
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3077
+ white-space: nowrap;
3078
+ list-style: none;
3088
3079
  }
3089
3080
 
3090
- .pf-v6-c-tooltip:is(.pf-m-left,
3091
- .pf-m-left-top,
3092
- .pf-m-left-bottom) {
3093
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3094
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3095
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3096
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3097
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
3081
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3082
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3098
3083
  }
3099
3084
 
3100
- .pf-v6-c-tooltip:is(.pf-m-right,
3101
- .pf-m-right-top,
3102
- .pf-m-right-bottom) {
3103
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3104
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3105
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3106
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3107
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3085
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3086
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3108
3087
  }
3109
3088
 
3110
- .pf-v6-c-tooltip:is(.pf-m-left-top,
3111
- .pf-m-right-top) {
3112
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3113
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3089
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3090
+ scale: -1 1;
3114
3091
  }
3115
3092
 
3116
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3117
- .pf-m-right-bottom) {
3118
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3119
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3093
+ .pf-v6-c-breadcrumb__item-divider {
3094
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3095
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3096
+ line-height: 1;
3097
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3120
3098
  }
3121
3099
 
3122
- .pf-v6-c-tooltip:is(.pf-m-top-left,
3123
- .pf-m-bottom-left) {
3124
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3125
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3100
+ .pf-v6-c-breadcrumb__link {
3101
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3102
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3103
+ font-size: inherit;
3104
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3105
+ line-height: inherit;
3106
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3107
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3108
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3109
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3110
+ word-break: break-word;
3111
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3126
3112
  }
3127
3113
 
3128
- .pf-v6-c-tooltip:is(.pf-m-top-right,
3129
- .pf-m-bottom-right) {
3130
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3131
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3114
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3115
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3116
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3117
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3118
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3132
3119
  }
3133
3120
 
3134
- .pf-v6-c-tooltip__content {
3135
- position: relative;
3136
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3137
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3138
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3139
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3140
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
3141
- color: var(--pf-v6-c-tooltip__content--Color);
3142
- text-align: center;
3143
- word-break: break-word;
3144
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3145
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3121
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3122
+ cursor: default;
3146
3123
  }
3147
3124
 
3148
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
3149
- text-align: start;
3125
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3126
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3127
+ text-decoration-line: none;
3150
3128
  }
3151
3129
 
3152
- .pf-v6-c-tooltip__arrow {
3153
- position: absolute;
3154
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3155
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3156
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3157
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3158
- width: var(--pf-v6-c-tooltip__arrow--Width);
3159
- height: var(--pf-v6-c-tooltip__arrow--Height);
3160
- pointer-events: none;
3161
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3162
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3163
- 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));
3130
+ button.pf-v6-c-breadcrumb__link {
3131
+ border: none;
3132
+ }
3133
+
3134
+ .pf-v6-c-breadcrumb__dropdown {
3135
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3136
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3137
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3138
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3139
+ }
3140
+
3141
+ .pf-v6-c-breadcrumb__heading {
3142
+ display: inline;
3143
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3144
+ }
3145
+
3146
+ .pf-v6-c-breadcrumb__link,
3147
+ .pf-v6-c-breadcrumb__heading {
3148
+ white-space: normal;
3149
+ }
3150
+
3151
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3152
+ display: none;
3164
3153
  }
3165
3154
 
3166
3155
  .pf-v6-c-menu {
@@ -3866,126 +3855,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3866
3855
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3867
3856
  }
3868
3857
 
3869
- .pf-v6-c-breadcrumb {
3870
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3871
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3872
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3873
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3874
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3875
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3876
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3877
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3878
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3879
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3880
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3881
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3882
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3883
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3884
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3885
- --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3886
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3887
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3888
- --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3889
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3890
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3891
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3892
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3893
- }
3894
-
3895
- .pf-v6-c-breadcrumb {
3896
- display: inline-flex;
3897
- }
3898
-
3899
- .pf-v6-c-breadcrumb__list {
3900
- display: flex;
3901
- flex-wrap: wrap;
3902
- align-items: center;
3903
- }
3904
-
3905
- .pf-v6-c-breadcrumb__item {
3906
- display: flex;
3907
- align-items: baseline;
3908
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3909
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3910
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3911
- white-space: nowrap;
3912
- list-style: none;
3913
- }
3914
-
3915
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3916
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3917
- }
3918
-
3919
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3920
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3921
- }
3922
-
3923
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3924
- scale: -1 1;
3925
- }
3926
-
3927
- .pf-v6-c-breadcrumb__item-divider {
3928
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3929
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3930
- line-height: 1;
3931
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3932
- }
3933
-
3934
- .pf-v6-c-breadcrumb__link {
3935
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3936
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3937
- font-size: inherit;
3938
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3939
- line-height: inherit;
3940
- color: var(--pf-v6-c-breadcrumb__link--Color);
3941
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3942
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3943
- text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3944
- word-break: break-word;
3945
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3946
- }
3947
-
3948
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3949
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3950
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3951
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3952
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3953
- }
3954
-
3955
- .pf-v6-c-breadcrumb__link.pf-m-current {
3956
- cursor: default;
3957
- }
3958
-
3959
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3960
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3961
- text-decoration-line: none;
3962
- }
3963
-
3964
- button.pf-v6-c-breadcrumb__link {
3965
- border: none;
3966
- }
3967
-
3968
- .pf-v6-c-breadcrumb__dropdown {
3969
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3970
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3971
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3972
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3973
- }
3974
-
3975
- .pf-v6-c-breadcrumb__heading {
3976
- display: inline;
3977
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3978
- }
3979
-
3980
- .pf-v6-c-breadcrumb__link,
3981
- .pf-v6-c-breadcrumb__heading {
3982
- white-space: normal;
3983
- }
3984
-
3985
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3986
- display: none;
3987
- }
3988
-
3989
3858
  .pf-v6-c-spinner {
3990
3859
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3991
3860
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
@@ -4076,4 +3945,134 @@ button.pf-v6-c-breadcrumb__link {
4076
3945
  stroke-dashoffset: 280;
4077
3946
  transform: rotate(720deg);
4078
3947
  }
3948
+ }
3949
+ .pf-v6-c-tooltip {
3950
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3951
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3952
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3953
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3954
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3955
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3956
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3957
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3958
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3959
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3960
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3961
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3962
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3963
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3964
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3965
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3966
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3967
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3968
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3969
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3970
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3971
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3972
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3973
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3974
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3975
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3976
+ }
3977
+
3978
+ .pf-v6-c-tooltip {
3979
+ position: relative;
3980
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
3981
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3982
+ }
3983
+
3984
+ .pf-v6-c-tooltip:is(.pf-m-top,
3985
+ .pf-m-top-left,
3986
+ .pf-m-top-right) {
3987
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3988
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3989
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3990
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3991
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3992
+ }
3993
+
3994
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
3995
+ .pf-m-bottom-left,
3996
+ .pf-m-bottom-right) {
3997
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3998
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3999
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
4000
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
4001
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
4002
+ }
4003
+
4004
+ .pf-v6-c-tooltip:is(.pf-m-left,
4005
+ .pf-m-left-top,
4006
+ .pf-m-left-bottom) {
4007
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
4008
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
4009
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4010
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
4011
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
4012
+ }
4013
+
4014
+ .pf-v6-c-tooltip:is(.pf-m-right,
4015
+ .pf-m-right-top,
4016
+ .pf-m-right-bottom) {
4017
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
4018
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
4019
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
4020
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
4021
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
4022
+ }
4023
+
4024
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
4025
+ .pf-m-right-top) {
4026
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
4027
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
4028
+ }
4029
+
4030
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
4031
+ .pf-m-right-bottom) {
4032
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
4033
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
4034
+ }
4035
+
4036
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
4037
+ .pf-m-bottom-left) {
4038
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
4039
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4040
+ }
4041
+
4042
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
4043
+ .pf-m-bottom-right) {
4044
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
4045
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
4046
+ }
4047
+
4048
+ .pf-v6-c-tooltip__content {
4049
+ position: relative;
4050
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
4051
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
4052
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
4053
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
4054
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
4055
+ color: var(--pf-v6-c-tooltip__content--Color);
4056
+ text-align: center;
4057
+ word-break: break-word;
4058
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
4059
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
4060
+ }
4061
+
4062
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
4063
+ text-align: start;
4064
+ }
4065
+
4066
+ .pf-v6-c-tooltip__arrow {
4067
+ position: absolute;
4068
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
4069
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
4070
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
4071
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
4072
+ width: var(--pf-v6-c-tooltip__arrow--Width);
4073
+ height: var(--pf-v6-c-tooltip__arrow--Height);
4074
+ pointer-events: none;
4075
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
4076
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
4077
+ 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));
4079
4078
  }