@patternfly/react-templates 6.4.1-prerelease.3 → 6.4.1-prerelease.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +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-CcXEzgFd.css → output-ChCb1ffo.css} +1405 -1406
  6. package/package.json +3 -3
package/dist/umd/assets/{output-CcXEzgFd.css → output-ChCb1ffo.css} RENAMED
@@ -3,250 +3,324 @@
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);
6
+ .pf-v6-c-divider {
7
+ --pf-v6-c-divider--Display: flex;
8
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
10
+ --pf-v6-c-divider--before--FlexBasis: 100%;
58
11
  }
59
12
 
60
- .pf-v6-c-text-input-group {
61
- position: relative;
62
- display: flex;
13
+ .pf-v6-c-divider {
14
+ flex-direction: row;
63
15
  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;
16
+ height: var(--pf-v6-c-divider--Size);
17
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
18
+ --pf-v6-hidden-visible--hidden--Display: none;
19
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
20
+ display: var(--pf-v6-hidden-visible--Display);
21
+ flex-shrink: 0;
22
+ align-items: stretch;
23
+ align-self: stretch;
24
+ justify-content: center;
25
+ border: 0;
94
26
  }
95
27
 
96
- .pf-v6-c-text-input-group.pf-m-plain {
97
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
28
+ .pf-v6-c-divider.pf-m-hidden {
29
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
98
30
  }
99
31
 
100
- .pf-v6-c-text-input-group.pf-m-plain::before {
101
- border: 0;
32
+ @media screen and (min-width: 36rem) {
33
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
34
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
35
+ }
36
+ .pf-v6-c-divider.pf-m-visible-on-sm {
37
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
38
+ }
102
39
  }
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);
40
+ @media screen and (min-width: 48rem) {
41
+ .pf-v6-c-divider.pf-m-hidden-on-md {
42
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
43
+ }
44
+ .pf-v6-c-divider.pf-m-visible-on-md {
45
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
46
+ }
108
47
  }
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);
48
+ @media screen and (min-width: 62rem) {
49
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
50
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
51
+ }
52
+ .pf-v6-c-divider.pf-m-visible-on-lg {
53
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
54
+ }
114
55
  }
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);
56
+ @media screen and (min-width: 75rem) {
57
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
58
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
59
+ }
60
+ .pf-v6-c-divider.pf-m-visible-on-xl {
61
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
62
+ }
120
63
  }
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;
64
+ @media screen and (min-width: 90.625rem) {
65
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
66
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
67
+ }
68
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
69
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
129
70
  }
130
71
  }
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);
72
+ .pf-v6-c-divider::before {
73
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
74
+ content: "";
75
+ background-color: var(--pf-v6-c-divider--Color);
76
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
77
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
137
78
  }
138
79
 
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);
80
+ .pf-v6-c-divider.pf-m-horizontal {
81
+ flex-direction: row;
82
+ width: 100%;
83
+ height: var(--pf-v6-c-divider--Size);
141
84
  }
142
85
 
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);
86
+ .pf-v6-c-divider.pf-m-vertical {
87
+ flex-direction: column;
88
+ width: var(--pf-v6-c-divider--Size);
89
+ height: inherit;
145
90
  }
146
91
 
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;
92
+ .pf-v6-c-divider.pf-m-inset-none {
93
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
149
94
  }
150
95
 
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);
96
+ .pf-v6-c-divider.pf-m-inset-xs {
97
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
154
98
  }
155
99
 
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;
100
+ .pf-v6-c-divider.pf-m-inset-sm {
101
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
162
102
  }
163
103
 
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));
104
+ .pf-v6-c-divider.pf-m-inset-md {
105
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
171
106
  }
172
107
 
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);
108
+ .pf-v6-c-divider.pf-m-inset-lg {
109
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
175
110
  }
176
111
 
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);
112
+ .pf-v6-c-divider.pf-m-inset-xl {
113
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
181
114
  }
182
115
 
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;
116
+ .pf-v6-c-divider.pf-m-inset-2xl {
117
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
189
118
  }
190
119
 
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));
120
+ .pf-v6-c-divider.pf-m-inset-3xl {
121
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
198
122
  }
199
123
 
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);
124
+ @media (min-width: 36rem) {
125
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
126
+ flex-direction: row;
127
+ width: 100%;
128
+ height: var(--pf-v6-c-divider--Size);
129
+ }
204
130
  }
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);
131
+ @media (min-width: 36rem) {
132
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
133
+ flex-direction: column;
134
+ width: var(--pf-v6-c-divider--Size);
135
+ height: inherit;
136
+ }
221
137
  }
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;
138
+ @media (min-width: 36rem) {
139
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
140
+ --pf-v6-c-divider--before--FlexBasis: 100%;
141
+ }
142
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
143
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
144
+ }
145
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
146
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
147
+ }
148
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
149
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
150
+ }
151
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
152
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
153
+ }
154
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
155
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
156
+ }
157
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
158
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
159
+ }
160
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
161
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
162
+ }
225
163
  }
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);
164
+ @media (min-width: 48rem) {
165
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
166
+ flex-direction: row;
167
+ width: 100%;
168
+ height: var(--pf-v6-c-divider--Size);
169
+ }
229
170
  }
230
-
231
- .pf-v6-c-text-input-group__text-input::placeholder {
232
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
171
+ @media (min-width: 48rem) {
172
+ .pf-v6-c-divider.pf-m-vertical-on-md {
173
+ flex-direction: column;
174
+ width: var(--pf-v6-c-divider--Size);
175
+ height: inherit;
176
+ }
233
177
  }
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);
178
+ @media (min-width: 48rem) {
179
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
180
+ --pf-v6-c-divider--before--FlexBasis: 100%;
181
+ }
182
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
183
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
184
+ }
185
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
186
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
187
+ }
188
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
189
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
190
+ }
191
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
192
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
193
+ }
194
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
195
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
196
+ }
197
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
198
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
199
+ }
200
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
201
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
202
+ }
240
203
  }
241
-
242
- .pf-v6-c-text-input-group__utilities > * + * {
243
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
204
+ @media (min-width: 62rem) {
205
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
206
+ flex-direction: row;
207
+ width: 100%;
208
+ height: var(--pf-v6-c-divider--Size);
209
+ }
244
210
  }
245
-
246
- .pf-v6-c-text-input-group__group {
247
- display: flex;
211
+ @media (min-width: 62rem) {
212
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
213
+ flex-direction: column;
214
+ width: var(--pf-v6-c-divider--Size);
215
+ height: inherit;
216
+ }
217
+ }
218
+ @media (min-width: 62rem) {
219
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
220
+ --pf-v6-c-divider--before--FlexBasis: 100%;
221
+ }
222
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
223
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
224
+ }
225
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
226
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
227
+ }
228
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
229
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
230
+ }
231
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
232
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
233
+ }
234
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
235
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
236
+ }
237
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
238
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
239
+ }
240
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
241
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
242
+ }
243
+ }
244
+ @media (min-width: 75rem) {
245
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
246
+ flex-direction: row;
247
+ width: 100%;
248
+ height: var(--pf-v6-c-divider--Size);
249
+ }
250
+ }
251
+ @media (min-width: 75rem) {
252
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
253
+ flex-direction: column;
254
+ width: var(--pf-v6-c-divider--Size);
255
+ height: inherit;
256
+ }
257
+ }
258
+ @media (min-width: 75rem) {
259
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
260
+ --pf-v6-c-divider--before--FlexBasis: 100%;
261
+ }
262
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
263
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
264
+ }
265
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
266
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
267
+ }
268
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
269
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
270
+ }
271
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
272
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
273
+ }
274
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
275
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
276
+ }
277
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
278
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
279
+ }
280
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
281
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
282
+ }
283
+ }
284
+ @media (min-width: 90.625rem) {
285
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
286
+ flex-direction: row;
287
+ width: 100%;
288
+ height: var(--pf-v6-c-divider--Size);
289
+ }
290
+ }
291
+ @media (min-width: 90.625rem) {
292
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
293
+ flex-direction: column;
294
+ width: var(--pf-v6-c-divider--Size);
295
+ height: inherit;
296
+ }
297
+ }
298
+ @media (min-width: 90.625rem) {
299
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
300
+ --pf-v6-c-divider--before--FlexBasis: 100%;
301
+ }
302
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
303
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
304
+ }
305
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
306
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
307
+ }
308
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
309
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
310
+ }
311
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
312
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
313
+ }
314
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
315
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
316
+ }
317
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
318
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
319
+ }
320
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
321
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
322
+ }
248
323
  }
249
-
250
324
  .pf-v6-c-menu-toggle {
251
325
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
252
326
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -809,562 +883,862 @@
809
883
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
810
884
  }
811
885
 
812
- .pf-v6-c-check {
813
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
814
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
815
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
816
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
817
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
818
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
819
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
820
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
821
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
822
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
823
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
824
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
825
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
826
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
827
- }
828
-
829
- .pf-v6-c-check {
830
- display: grid;
831
- grid-template-columns: auto 1fr;
832
- grid-gap: var(--pf-v6-c-check--GridGap);
833
- accent-color: var(--pf-v6-c-check--AccentColor);
834
- }
835
-
836
- .pf-v6-c-check.pf-m-standalone {
837
- display: inline-grid;
838
- grid-template-columns: auto;
839
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
840
- }
841
-
842
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
843
- align-self: center;
844
- transform: none;
845
- }
846
-
847
- .pf-v6-c-check__input {
848
- align-self: start;
849
- font-size: var(--pf-v6-c-check__label--FontSize);
850
- line-height: var(--pf-v6-c-check__label--LineHeight);
851
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
886
+ .pf-v6-c-badge {
887
+ --pf-v6-c-badge--BorderColor: transparent;
888
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
889
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
890
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
891
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
892
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
893
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
894
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
895
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
896
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
897
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
898
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
899
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
900
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
901
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
902
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
903
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
904
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
905
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
906
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
907
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
852
908
  }
853
909
 
854
- .pf-v6-c-check__label {
855
- font-size: var(--pf-v6-c-check__label--FontSize);
856
- font-weight: var(--pf-v6-c-check__label--FontWeight);
857
- line-height: var(--pf-v6-c-check__label--LineHeight);
858
- color: var(--pf-v6-c-check__label--Color);
910
+ .pf-v6-c-badge {
911
+ position: relative;
912
+ display: inline-block;
913
+ min-width: var(--pf-v6-c-badge--MinWidth);
914
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
915
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
916
+ font-size: var(--pf-v6-c-badge--FontSize);
917
+ font-weight: var(--pf-v6-c-badge--FontWeight);
918
+ color: var(--pf-v6-c-badge--Color);
919
+ text-align: center;
920
+ white-space: nowrap;
921
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
922
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
859
923
  }
860
924
 
861
- .pf-v6-c-check__description {
862
- grid-column: 2;
863
- font-size: var(--pf-v6-c-check__description--FontSize);
864
- color: var(--pf-v6-c-check__description--Color);
925
+ .pf-v6-c-badge::after {
926
+ position: absolute;
927
+ inset: 0;
928
+ pointer-events: none;
929
+ content: "";
930
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
931
+ border-radius: inherit;
865
932
  }
866
933
 
867
- .pf-v6-c-check__body {
868
- grid-column: 2;
934
+ .pf-v6-c-badge.pf-m-read {
935
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
936
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
937
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
938
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
869
939
  }
870
940
 
871
- .pf-v6-c-check__label,
872
- .pf-v6-c-check__input {
873
- justify-self: start;
941
+ .pf-v6-c-badge.pf-m-unread {
942
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
943
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
944
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
874
945
  }
875
946
 
876
- label.pf-v6-c-check, .pf-v6-c-check__label,
877
- .pf-v6-c-check__input {
878
- cursor: pointer;
947
+ .pf-v6-c-badge.pf-m-disabled {
948
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
949
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
879
950
  }
880
951
 
881
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
882
- .pf-v6-c-check__input:disabled,
883
- .pf-v6-c-check__input.pf-m-disabled {
884
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
885
- cursor: not-allowed;
952
+ .pf-v6-c-badge.pf-m-disabled::after {
953
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
886
954
  }
887
955
 
888
- .pf-v6-c-check__label-required {
889
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
890
- font-size: var(--pf-v6-c-check__label-required--FontSize);
891
- color: var(--pf-v6-c-check__label-required--Color);
956
+ .pf-v6-c-badge__toggle-icon {
957
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
958
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
892
959
  }
893
960
 
894
- .pf-v6-c-label-group {
895
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
896
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
897
- --pf-v6-c-label-group--MaxWidth: 100%;
898
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
899
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
900
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
901
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
902
- --pf-v6-c-label-group__main--MaxWidth: 100%;
903
- --pf-v6-c-label-group__main--MinWidth: 0;
904
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
905
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
906
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
907
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
908
- --pf-v6-c-label-group__list--MaxWidth: 100%;
909
- --pf-v6-c-label-group__list--MinWidth: 0;
910
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
911
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
912
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
913
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
914
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
915
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
916
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
917
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
918
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
919
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
920
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
921
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
922
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
923
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
924
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
925
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
926
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
927
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
928
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
929
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
930
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
931
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
961
+ .pf-v6-c-label {
962
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
963
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
964
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
965
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
966
+ --pf-v6-c-label--MaxWidth: 100%;
967
+ --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)));
968
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
969
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
970
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
971
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
972
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
973
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
974
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
975
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
976
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
977
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
978
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
979
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
980
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
981
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
982
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
983
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
984
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
985
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
986
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
987
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
988
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
989
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
990
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
991
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
992
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
993
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
994
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
995
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
996
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
997
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
998
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
999
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1000
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1001
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1002
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1003
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1004
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1005
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1006
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1007
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1008
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1009
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1010
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1011
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1012
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1013
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1014
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1015
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1016
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1017
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1018
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1019
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1020
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1021
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1022
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1023
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1024
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1025
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1026
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1027
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1028
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1029
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1030
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1031
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1032
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1033
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1034
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1035
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1036
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1037
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1038
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1039
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1040
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1041
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1042
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1043
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1044
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1045
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1046
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1047
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1048
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1049
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1050
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1051
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1052
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1053
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1054
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1055
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1056
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1057
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1058
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1059
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1060
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1061
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1062
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1063
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1064
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1065
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1066
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1067
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1068
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1069
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1070
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1071
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1072
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1073
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1074
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1075
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1076
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1077
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1078
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1079
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1080
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1081
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1082
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1083
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1084
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1085
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1086
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1087
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1088
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1089
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1090
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1091
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1092
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1093
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1094
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1095
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1096
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1097
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1098
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1099
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1100
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1101
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1102
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1103
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1104
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1105
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1106
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1107
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1108
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1109
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1110
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1111
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1112
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1113
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1114
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
1115
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1116
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1117
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1118
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1119
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1120
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1121
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1122
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1123
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1124
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1125
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1126
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1127
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
1128
+ --pf-v6-c-label__content--MaxWidth: 100%;
1129
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1130
+ --pf-v6-c-label__content--Cursor: initial;
1131
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1132
+ --pf-v6-c-label__text--MaxWidth: 100%;
1133
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
1134
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1135
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1136
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1137
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1138
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1139
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1140
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1141
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1142
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1143
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1144
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1145
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1146
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1147
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1148
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
1149
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1150
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1151
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1152
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1153
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1154
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1155
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1156
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1157
+ }
1158
+
1159
+ .pf-v6-c-label {
1160
+ position: relative;
1161
+ gap: var(--pf-v6-c-label--Gap);
1162
+ min-width: var(--pf-v6-c-label--MinWidth);
1163
+ max-width: var(--pf-v6-c-label--MaxWidth);
1164
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1165
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1166
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1167
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1168
+ font-size: var(--pf-v6-c-label--FontSize);
1169
+ white-space: nowrap;
1170
+ background: transparent;
1171
+ isolation: isolate;
1172
+ border: 0;
1173
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1174
+ }
1175
+
1176
+ .pf-v6-c-label.pf-m-blue {
1177
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1178
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1179
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1180
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1181
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1182
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1183
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1184
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1185
+ }
1186
+
1187
+ .pf-v6-c-label.pf-m-red {
1188
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1189
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1190
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1191
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1192
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1193
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1194
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1195
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1196
+ }
1197
+
1198
+ .pf-v6-c-label.pf-m-orange {
1199
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1200
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1201
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1202
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1203
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1204
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1205
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1206
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1207
+ }
1208
+
1209
+ .pf-v6-c-label.pf-m-orangered {
1210
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1211
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1212
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1213
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1214
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1215
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1216
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1217
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1218
+ }
1219
+
1220
+ .pf-v6-c-label.pf-m-yellow {
1221
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1222
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1223
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1224
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1225
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1226
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1227
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1228
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1229
+ }
1230
+
1231
+ .pf-v6-c-label.pf-m-green {
1232
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1233
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1234
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1235
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1236
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1237
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1238
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1239
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1240
+ }
1241
+
1242
+ .pf-v6-c-label.pf-m-teal {
1243
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1244
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1245
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1246
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1247
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1248
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1249
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1250
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1251
+ }
1252
+
1253
+ .pf-v6-c-label.pf-m-purple {
1254
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1255
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1256
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1257
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1258
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1259
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1260
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1261
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1262
+ }
1263
+
1264
+ .pf-v6-c-label.pf-m-success {
1265
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1266
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1267
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1268
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1269
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1270
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1271
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1272
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1273
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1274
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1275
+ }
1276
+
1277
+ .pf-v6-c-label.pf-m-warning {
1278
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1279
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1280
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1281
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1282
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1283
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1284
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1285
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1286
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1287
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
1288
+ }
1289
+
1290
+ .pf-v6-c-label.pf-m-danger {
1291
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1292
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1293
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1294
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1295
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1296
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1297
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1298
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1299
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1300
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
1301
+ }
1302
+
1303
+ .pf-v6-c-label.pf-m-info {
1304
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1305
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1306
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1307
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1308
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1309
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1310
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1311
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1312
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1313
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
1314
+ }
1315
+
1316
+ .pf-v6-c-label.pf-m-custom {
1317
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1318
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1319
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1320
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1321
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1322
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1323
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1324
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1325
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1326
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
1327
+ }
1328
+
1329
+ .pf-v6-c-label.pf-m-compact {
1330
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1331
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1332
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1333
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1334
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1335
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1336
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1337
+ }
1338
+
1339
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1340
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
932
1341
  }
933
1342
 
934
- .pf-v6-c-label-group {
935
- display: inline-flex;
936
- row-gap: var(--pf-v6-c-label-group--RowGap);
937
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
938
- align-items: center;
939
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1343
+ .pf-v6-c-label.pf-m-outline {
1344
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1345
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1346
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1347
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1348
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1349
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1350
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1351
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1352
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1353
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
940
1354
  }
941
1355
 
942
- .pf-v6-c-label-group.pf-m-category {
943
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
944
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
945
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
946
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
947
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
948
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
949
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1356
+ .pf-v6-c-label.pf-m-editable {
1357
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1358
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
950
1359
  }
951
1360
 
952
- .pf-v6-c-label-group.pf-m-vertical {
953
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
954
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
955
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
956
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
957
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
958
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
959
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1361
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1362
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1363
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
960
1364
  }
961
1365
 
962
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
963
- align-items: flex-start;
1366
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1367
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1368
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1369
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
964
1370
  }
965
1371
 
966
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
967
- flex-direction: column;
968
- align-items: flex-start;
969
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1372
+ .pf-v6-c-label.pf-m-editable-active {
1373
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1374
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1375
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1376
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
970
1377
  }
971
1378
 
972
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
973
- flex-direction: column;
974
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1379
+ .pf-v6-c-label.pf-m-overflow {
1380
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1381
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1382
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
975
1383
  }
976
1384
 
977
- .pf-v6-c-label-group.pf-m-editable,
978
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
979
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
980
- display: flex;
1385
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1386
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1387
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1388
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
981
1389
  }
982
1390
 
983
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
984
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
985
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
986
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
987
- flex: 1;
1391
+ .pf-v6-c-label.pf-m-add {
1392
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1393
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1394
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1395
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
988
1396
  }
989
1397
 
990
- .pf-v6-c-label-group__main {
991
- display: flex;
992
- flex: 1;
993
- flex-wrap: wrap;
994
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
995
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
996
- align-items: baseline;
997
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1398
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1399
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1400
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1401
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1402
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
998
1403
  }
999
1404
 
1000
- .pf-v6-c-label-group__list {
1001
- display: inline-flex;
1002
- flex-wrap: wrap;
1003
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1004
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1005
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1405
+ .pf-v6-c-label.pf-m-clickable {
1406
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1006
1407
  }
1007
1408
 
1008
- .pf-v6-c-label-group__list-item {
1409
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1410
+ text-decoration-line: none;
1411
+ }
1412
+
1413
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1414
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1415
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1416
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1417
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1418
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1419
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1420
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1421
+ }
1422
+
1423
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1424
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1425
+ }
1426
+
1427
+ .pf-v6-c-label.pf-m-disabled {
1428
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1429
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1430
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1431
+ --pf-v6-c-label--BorderWidth: 0;
1432
+ pointer-events: none;
1433
+ }
1434
+
1435
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1436
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1437
+ }
1438
+
1439
+ .pf-v6-c-label,
1440
+ .pf-v6-c-label__content {
1009
1441
  display: inline-flex;
1010
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1442
+ align-items: center;
1443
+ justify-content: center;
1011
1444
  }
1012
1445
 
1013
- .pf-v6-c-label-group__label {
1446
+ .pf-v6-c-label__text {
1014
1447
  overflow: hidden;
1015
1448
  text-overflow: ellipsis;
1016
1449
  white-space: nowrap;
1017
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1450
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1018
1451
  }
1019
1452
 
1020
- .pf-v6-c-label-group__close {
1021
- display: flex;
1022
- align-self: flex-start;
1453
+ .pf-v6-c-label__content {
1454
+ gap: var(--pf-v6-c-label__content--Gap);
1455
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1456
+ padding: 0;
1457
+ overflow: hidden;
1458
+ color: var(--pf-v6-c-label--Color);
1459
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1460
+ background: transparent;
1461
+ border-width: 0;
1023
1462
  }
1024
1463
 
1025
- .pf-v6-c-label-group__close .pf-v6-c-button {
1026
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1027
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1028
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1029
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1030
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1464
+ .pf-v6-c-label__content::before {
1465
+ position: absolute;
1466
+ inset: 0;
1467
+ z-index: -1;
1468
+ pointer-events: none;
1469
+ content: "";
1470
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1471
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1472
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1031
1473
  }
1032
1474
 
1033
- .pf-v6-c-label-group__textarea {
1034
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1035
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1036
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1037
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1038
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1475
+ input.pf-v6-c-label__content {
1476
+ overflow: hidden;
1477
+ text-overflow: ellipsis;
1039
1478
  white-space: nowrap;
1040
- resize: none;
1041
- border: 0;
1042
- -ms-overflow-style: none;
1043
- scrollbar-width: none;
1044
1479
  }
1045
1480
 
1046
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1047
- display: none;
1481
+ .pf-v6-c-label__icon {
1482
+ color: var(--pf-v6-c-label__icon--Color);
1048
1483
  }
1049
1484
 
1050
- .pf-v6-c-divider {
1051
- --pf-v6-c-divider--Display: flex;
1052
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1053
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1054
- --pf-v6-c-divider--before--FlexBasis: 100%;
1485
+ .pf-v6-c-label__actions {
1486
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1055
1487
  }
1056
1488
 
1057
- .pf-v6-c-divider {
1058
- flex-direction: row;
1059
- width: 100%;
1060
- height: var(--pf-v6-c-divider--Size);
1061
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1062
- --pf-v6-hidden-visible--hidden--Display: none;
1063
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1064
- display: var(--pf-v6-hidden-visible--Display);
1065
- flex-shrink: 0;
1066
- align-items: stretch;
1067
- align-self: stretch;
1068
- justify-content: center;
1069
- border: 0;
1489
+ .pf-v6-c-label__actions .pf-v6-c-button {
1490
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1491
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1492
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1493
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1494
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1495
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1496
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1497
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1070
1498
  }
1071
1499
 
1072
- .pf-v6-c-divider.pf-m-hidden {
1073
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1500
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1501
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1074
1502
  }
1075
1503
 
1076
- @media screen and (min-width: 36rem) {
1077
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1078
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1079
- }
1080
- .pf-v6-c-divider.pf-m-visible-on-sm {
1081
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1082
- }
1083
- }
1084
- @media screen and (min-width: 48rem) {
1085
- .pf-v6-c-divider.pf-m-hidden-on-md {
1086
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1087
- }
1088
- .pf-v6-c-divider.pf-m-visible-on-md {
1089
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1090
- }
1091
- }
1092
- @media screen and (min-width: 62rem) {
1093
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1094
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1095
- }
1096
- .pf-v6-c-divider.pf-m-visible-on-lg {
1097
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1098
- }
1099
- }
1100
- @media screen and (min-width: 75rem) {
1101
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1102
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1103
- }
1104
- .pf-v6-c-divider.pf-m-visible-on-xl {
1105
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1106
- }
1504
+ .pf-v6-c-check {
1505
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1506
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1507
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1508
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1509
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1510
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1511
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1512
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1513
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1514
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1515
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1516
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1517
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1518
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1107
1519
  }
1108
- @media screen and (min-width: 90.625rem) {
1109
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1110
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1111
- }
1112
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1113
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1114
- }
1520
+
1521
+ .pf-v6-c-check {
1522
+ display: grid;
1523
+ grid-template-columns: auto 1fr;
1524
+ grid-gap: var(--pf-v6-c-check--GridGap);
1525
+ accent-color: var(--pf-v6-c-check--AccentColor);
1115
1526
  }
1116
- .pf-v6-c-divider::before {
1117
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1118
- content: "";
1119
- background-color: var(--pf-v6-c-divider--Color);
1120
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1121
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1527
+
1528
+ .pf-v6-c-check.pf-m-standalone {
1529
+ display: inline-grid;
1530
+ grid-template-columns: auto;
1531
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1122
1532
  }
1123
1533
 
1124
- .pf-v6-c-divider.pf-m-horizontal {
1125
- flex-direction: row;
1126
- width: 100%;
1127
- height: var(--pf-v6-c-divider--Size);
1534
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1535
+ align-self: center;
1536
+ transform: none;
1128
1537
  }
1129
1538
 
1130
- .pf-v6-c-divider.pf-m-vertical {
1131
- flex-direction: column;
1132
- width: var(--pf-v6-c-divider--Size);
1133
- height: inherit;
1539
+ .pf-v6-c-check__input {
1540
+ align-self: start;
1541
+ font-size: var(--pf-v6-c-check__label--FontSize);
1542
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1543
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1134
1544
  }
1135
1545
 
1136
- .pf-v6-c-divider.pf-m-inset-none {
1137
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1546
+ .pf-v6-c-check__label {
1547
+ font-size: var(--pf-v6-c-check__label--FontSize);
1548
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
1549
+ line-height: var(--pf-v6-c-check__label--LineHeight);
1550
+ color: var(--pf-v6-c-check__label--Color);
1138
1551
  }
1139
1552
 
1140
- .pf-v6-c-divider.pf-m-inset-xs {
1141
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1553
+ .pf-v6-c-check__description {
1554
+ grid-column: 2;
1555
+ font-size: var(--pf-v6-c-check__description--FontSize);
1556
+ color: var(--pf-v6-c-check__description--Color);
1142
1557
  }
1143
1558
 
1144
- .pf-v6-c-divider.pf-m-inset-sm {
1145
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1559
+ .pf-v6-c-check__body {
1560
+ grid-column: 2;
1146
1561
  }
1147
1562
 
1148
- .pf-v6-c-divider.pf-m-inset-md {
1149
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1563
+ .pf-v6-c-check__label,
1564
+ .pf-v6-c-check__input {
1565
+ justify-self: start;
1150
1566
  }
1151
1567
 
1152
- .pf-v6-c-divider.pf-m-inset-lg {
1153
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1568
+ label.pf-v6-c-check, .pf-v6-c-check__label,
1569
+ .pf-v6-c-check__input {
1570
+ cursor: pointer;
1154
1571
  }
1155
1572
 
1156
- .pf-v6-c-divider.pf-m-inset-xl {
1157
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1573
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1574
+ .pf-v6-c-check__input:disabled,
1575
+ .pf-v6-c-check__input.pf-m-disabled {
1576
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1577
+ cursor: not-allowed;
1158
1578
  }
1159
1579
 
1160
- .pf-v6-c-divider.pf-m-inset-2xl {
1161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1580
+ .pf-v6-c-check__label-required {
1581
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1582
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1583
+ color: var(--pf-v6-c-check__label-required--Color);
1162
1584
  }
1163
1585
 
1164
- .pf-v6-c-divider.pf-m-inset-3xl {
1165
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1586
+ .pf-v6-c-label-group {
1587
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1588
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1589
+ --pf-v6-c-label-group--MaxWidth: 100%;
1590
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1591
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1592
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1593
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1594
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1595
+ --pf-v6-c-label-group__main--MinWidth: 0;
1596
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1597
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1598
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1599
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1600
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1601
+ --pf-v6-c-label-group__list--MinWidth: 0;
1602
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1603
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1604
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1605
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1606
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1607
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1608
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1609
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1610
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1611
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1612
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1613
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1614
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1615
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1616
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1617
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1618
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1619
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1620
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1621
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1622
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1623
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1166
1624
  }
1167
1625
 
1168
- @media (min-width: 36rem) {
1169
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1170
- flex-direction: row;
1171
- width: 100%;
1172
- height: var(--pf-v6-c-divider--Size);
1173
- }
1626
+ .pf-v6-c-label-group {
1627
+ display: inline-flex;
1628
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1629
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1630
+ align-items: center;
1631
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1174
1632
  }
1175
- @media (min-width: 36rem) {
1176
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1177
- flex-direction: column;
1178
- width: var(--pf-v6-c-divider--Size);
1179
- height: inherit;
1180
- }
1633
+
1634
+ .pf-v6-c-label-group.pf-m-category {
1635
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1636
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1637
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1638
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1639
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1640
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1641
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1181
1642
  }
1182
- @media (min-width: 36rem) {
1183
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1184
- --pf-v6-c-divider--before--FlexBasis: 100%;
1185
- }
1186
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1187
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1188
- }
1189
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1190
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1191
- }
1192
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1193
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1194
- }
1195
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1196
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1197
- }
1198
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1199
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1200
- }
1201
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1202
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1203
- }
1204
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1205
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1206
- }
1643
+
1644
+ .pf-v6-c-label-group.pf-m-vertical {
1645
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1646
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1647
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1648
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1649
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1650
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1651
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1207
1652
  }
1208
- @media (min-width: 48rem) {
1209
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1210
- flex-direction: row;
1211
- width: 100%;
1212
- height: var(--pf-v6-c-divider--Size);
1213
- }
1653
+
1654
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1655
+ align-items: flex-start;
1214
1656
  }
1215
- @media (min-width: 48rem) {
1216
- .pf-v6-c-divider.pf-m-vertical-on-md {
1217
- flex-direction: column;
1218
- width: var(--pf-v6-c-divider--Size);
1219
- height: inherit;
1220
- }
1657
+
1658
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1659
+ flex-direction: column;
1660
+ align-items: flex-start;
1661
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1221
1662
  }
1222
- @media (min-width: 48rem) {
1223
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1224
- --pf-v6-c-divider--before--FlexBasis: 100%;
1225
- }
1226
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1227
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1228
- }
1229
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1230
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1231
- }
1232
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1233
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1234
- }
1235
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1236
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1237
- }
1238
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1239
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1240
- }
1241
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1242
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1243
- }
1244
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1245
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1246
- }
1663
+
1664
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1665
+ flex-direction: column;
1666
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1247
1667
  }
1248
- @media (min-width: 62rem) {
1249
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1250
- flex-direction: row;
1251
- width: 100%;
1252
- height: var(--pf-v6-c-divider--Size);
1253
- }
1668
+
1669
+ .pf-v6-c-label-group.pf-m-editable,
1670
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1671
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1672
+ display: flex;
1254
1673
  }
1255
- @media (min-width: 62rem) {
1256
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1257
- flex-direction: column;
1258
- width: var(--pf-v6-c-divider--Size);
1259
- height: inherit;
1260
- }
1674
+
1675
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1676
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1677
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1678
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1679
+ flex: 1;
1261
1680
  }
1262
- @media (min-width: 62rem) {
1263
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1264
- --pf-v6-c-divider--before--FlexBasis: 100%;
1265
- }
1266
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1267
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1268
- }
1269
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1270
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1271
- }
1272
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1273
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1274
- }
1275
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1276
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1277
- }
1278
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1279
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1280
- }
1281
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1282
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1283
- }
1284
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1285
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1286
- }
1681
+
1682
+ .pf-v6-c-label-group__main {
1683
+ display: flex;
1684
+ flex: 1;
1685
+ flex-wrap: wrap;
1686
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1687
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1688
+ align-items: baseline;
1689
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1287
1690
  }
1288
- @media (min-width: 75rem) {
1289
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1290
- flex-direction: row;
1291
- width: 100%;
1292
- height: var(--pf-v6-c-divider--Size);
1293
- }
1691
+
1692
+ .pf-v6-c-label-group__list {
1693
+ display: inline-flex;
1694
+ flex-wrap: wrap;
1695
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1696
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1697
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1294
1698
  }
1295
- @media (min-width: 75rem) {
1296
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1297
- flex-direction: column;
1298
- width: var(--pf-v6-c-divider--Size);
1299
- height: inherit;
1300
- }
1699
+
1700
+ .pf-v6-c-label-group__list-item {
1701
+ display: inline-flex;
1702
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1301
1703
  }
1302
- @media (min-width: 75rem) {
1303
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1304
- --pf-v6-c-divider--before--FlexBasis: 100%;
1305
- }
1306
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1307
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1308
- }
1309
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1310
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1311
- }
1312
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1313
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1314
- }
1315
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1316
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1317
- }
1318
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1319
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1320
- }
1321
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1322
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1323
- }
1324
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1325
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1326
- }
1704
+
1705
+ .pf-v6-c-label-group__label {
1706
+ overflow: hidden;
1707
+ text-overflow: ellipsis;
1708
+ white-space: nowrap;
1709
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1327
1710
  }
1328
- @media (min-width: 90.625rem) {
1329
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1330
- flex-direction: row;
1331
- width: 100%;
1332
- height: var(--pf-v6-c-divider--Size);
1333
- }
1711
+
1712
+ .pf-v6-c-label-group__close {
1713
+ display: flex;
1714
+ align-self: flex-start;
1334
1715
  }
1335
- @media (min-width: 90.625rem) {
1336
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1337
- flex-direction: column;
1338
- width: var(--pf-v6-c-divider--Size);
1339
- height: inherit;
1340
- }
1716
+
1717
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1718
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1719
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1720
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1721
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1722
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1341
1723
  }
1342
- @media (min-width: 90.625rem) {
1343
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1344
- --pf-v6-c-divider--before--FlexBasis: 100%;
1345
- }
1346
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1347
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1348
- }
1349
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1350
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1351
- }
1352
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1353
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1354
- }
1355
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1356
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1357
- }
1358
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1359
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1360
- }
1361
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1362
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1363
- }
1364
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1365
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1366
- }
1724
+
1725
+ .pf-v6-c-label-group__textarea {
1726
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1727
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1728
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1729
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1730
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1731
+ white-space: nowrap;
1732
+ resize: none;
1733
+ border: 0;
1734
+ -ms-overflow-style: none;
1735
+ scrollbar-width: none;
1367
1736
  }
1737
+
1738
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1739
+ display: none;
1740
+ }
1741
+
1368
1742
  .pf-v6-c-button {
1369
1743
  --pf-v6-c-button--Display: inline-flex;
1370
1744
  --pf-v6-c-button--AlignItems: baseline;
@@ -2109,773 +2483,399 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2109
2483
  }
2110
2484
 
2111
2485
  .pf-v6-c-button:active {
2112
- background-size: 100% 100%;
2113
- transition-duration: 0s;
2114
- }
2115
-
2116
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2117
- pointer-events: none;
2118
- }
2119
-
2120
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2121
- color: var(--pf-v6-c-button--disabled--Color);
2122
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2123
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
2124
- }
2125
-
2126
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2127
- border-color: transparent;
2128
- }
2129
-
2130
- .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2131
- color: var(--pf-v6-c-button--disabled__icon--Color);
2132
- }
2133
-
2134
- .pf-v6-c-button.pf-m-aria-disabled {
2135
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2136
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2137
- cursor: default;
2138
- }
2139
-
2140
- .pf-v6-c-button.pf-m-progress {
2141
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2142
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2143
- }
2144
-
2145
- .pf-v6-c-button.pf-m-in-progress {
2146
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2147
- }
2148
-
2149
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2150
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2151
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2152
- }
2153
-
2154
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2155
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2156
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2157
- }
2158
-
2159
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2160
- opacity: 0;
2161
- }
2162
-
2163
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2164
- animation-name: pf-v6-c-button-icon-notify;
2165
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2166
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2167
- }
2168
-
2169
- .pf-v6-c-button__icon {
2170
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2171
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2172
- color: var(--pf-v6-c-button__icon--Color);
2173
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2174
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2175
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2176
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2177
- rotate: var(--pf-v6-c-button__icon--Rotate);
2178
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2179
- }
2180
-
2181
- .pf-v6-c-button__icon.pf-m-start {
2182
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2183
- }
2184
-
2185
- .pf-v6-c-button__icon.pf-m-end {
2186
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2187
- }
2188
-
2189
- .pf-v6-c-button__icon-favorite,
2190
- .pf-v6-c-button__icon-favorited {
2191
- grid-area: 1/1/1/1;
2192
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2193
- transition-property: opacity;
2194
- }
2195
-
2196
- .pf-v6-c-button__icon-favorite {
2197
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2198
- }
2199
-
2200
- .pf-v6-c-button__icon-favorited {
2201
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2202
- }
2203
-
2204
- .pf-v6-c-button__progress {
2205
- position: absolute;
2206
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2207
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2208
- line-height: 1;
2209
- color: var(--pf-v6-c-button__progress--Color);
2210
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2486
+ background-size: 100% 100%;
2487
+ transition-duration: 0s;
2211
2488
  }
2212
2489
 
2213
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2214
- --pf-v6-c-spinner--Color: currentcolor;
2490
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2491
+ pointer-events: none;
2215
2492
  }
2216
2493
 
2217
- .pf-v6-c-button__text {
2218
- text-decoration: inherit;
2494
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2495
+ color: var(--pf-v6-c-button--disabled--Color);
2496
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2497
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
2219
2498
  }
2220
2499
 
2221
- .pf-v6-c-button__count {
2222
- display: inline-flex;
2223
- align-items: center;
2500
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2501
+ border-color: transparent;
2224
2502
  }
2225
2503
 
2226
- .pf-v6-c-button--hamburger-icon path {
2227
- fill: none;
2228
- stroke: currentcolor;
2229
- stroke-linecap: round;
2230
- stroke-linejoin: round;
2231
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2504
+ .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
2505
+ color: var(--pf-v6-c-button--disabled__icon--Color);
2232
2506
  }
2233
2507
 
2234
- .pf-v6-c-button--hamburger-icon--top {
2235
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2508
+ .pf-v6-c-button.pf-m-aria-disabled {
2509
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2510
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2511
+ cursor: default;
2236
2512
  }
2237
2513
 
2238
- .pf-v6-c-button--hamburger-icon--middle {
2239
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2514
+ .pf-v6-c-button.pf-m-progress {
2515
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2516
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2240
2517
  }
2241
2518
 
2242
- .pf-v6-c-button--hamburger-icon--arrow {
2243
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2519
+ .pf-v6-c-button.pf-m-in-progress {
2520
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2244
2521
  }
2245
2522
 
2246
- .pf-v6-c-button--hamburger-icon--bottom {
2247
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2523
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2524
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2525
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2248
2526
  }
2249
2527
 
2250
- @keyframes pf-v6-c-button-icon-notify {
2251
- 33% {
2252
- transform: rotate(30deg);
2253
- }
2254
- 66% {
2255
- transform: rotate(-60deg);
2256
- }
2257
- }
2258
- @keyframes pf-v6-c-button-icon-favorited {
2259
- 50% {
2260
- scale: 1.5;
2261
- }
2528
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2529
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2530
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2262
2531
  }
2263
- .pf-v6-c-label {
2264
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2265
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2266
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2267
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2268
- --pf-v6-c-label--MaxWidth: 100%;
2269
- --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)));
2270
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2271
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
2272
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
2273
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
2274
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2275
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2276
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2277
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2278
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
2279
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
2280
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
2281
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
2282
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
2283
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
2284
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
2285
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
2286
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
2287
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
2288
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
2289
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
2290
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
2291
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
2292
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
2293
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
2294
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
2295
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
2296
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
2297
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
2298
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
2299
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
2300
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
2301
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
2302
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
2303
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2304
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2305
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2306
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2307
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2308
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2309
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2310
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2311
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2312
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2313
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2314
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2315
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2316
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2317
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2318
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2319
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2320
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2321
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2322
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2323
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2324
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2325
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2326
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2327
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2328
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2329
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2330
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2331
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2332
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2333
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2334
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2335
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2336
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2337
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2338
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2339
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2340
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2341
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2342
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2343
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2344
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2345
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2346
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2347
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2348
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2349
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2350
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2351
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2352
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2353
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2354
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2355
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2356
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2357
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2358
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2359
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2360
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2361
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2362
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2363
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2364
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2365
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2366
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2367
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2368
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2369
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2370
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2371
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2372
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2373
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2374
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2375
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2376
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2377
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2378
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2379
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2380
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2381
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2382
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2383
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2384
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2385
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2386
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2387
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2388
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2389
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2390
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2391
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2392
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2393
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2394
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2395
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2396
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2397
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2398
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2399
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2400
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2401
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2402
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2403
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2404
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2405
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2406
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2407
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2408
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2409
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2410
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2411
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2412
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2413
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2414
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2415
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2416
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
2417
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2418
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2419
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2420
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2421
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2422
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2423
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2424
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2425
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2426
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2427
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2428
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2429
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
2430
- --pf-v6-c-label__content--MaxWidth: 100%;
2431
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2432
- --pf-v6-c-label__content--Cursor: initial;
2433
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2434
- --pf-v6-c-label__text--MaxWidth: 100%;
2435
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
2436
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2437
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2438
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2439
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2440
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2441
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2442
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2443
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2444
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2445
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2446
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2447
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2448
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2449
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2450
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
2451
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2452
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2453
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2454
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2455
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2456
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2457
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2458
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2532
+
2533
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2534
+ opacity: 0;
2459
2535
  }
2460
2536
 
2461
- .pf-v6-c-label {
2462
- position: relative;
2463
- gap: var(--pf-v6-c-label--Gap);
2464
- min-width: var(--pf-v6-c-label--MinWidth);
2465
- max-width: var(--pf-v6-c-label--MaxWidth);
2466
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2467
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2468
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2469
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2470
- font-size: var(--pf-v6-c-label--FontSize);
2471
- white-space: nowrap;
2472
- background: transparent;
2473
- isolation: isolate;
2474
- border: 0;
2475
- border-radius: var(--pf-v6-c-label--BorderRadius);
2537
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2538
+ animation-name: pf-v6-c-button-icon-notify;
2539
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2540
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2476
2541
  }
2477
2542
 
2478
- .pf-v6-c-label.pf-m-blue {
2479
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2480
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2481
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2482
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2483
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2484
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2485
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2486
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2543
+ .pf-v6-c-button__icon {
2544
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2545
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2546
+ color: var(--pf-v6-c-button__icon--Color);
2547
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2548
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2549
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2550
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2551
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2552
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2487
2553
  }
2488
2554
 
2489
- .pf-v6-c-label.pf-m-red {
2490
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2491
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2492
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2493
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2494
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2495
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2496
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2497
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2555
+ .pf-v6-c-button__icon.pf-m-start {
2556
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2498
2557
  }
2499
2558
 
2500
- .pf-v6-c-label.pf-m-orange {
2501
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2502
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2503
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2504
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2505
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2506
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2507
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2508
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2559
+ .pf-v6-c-button__icon.pf-m-end {
2560
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2509
2561
  }
2510
2562
 
2511
- .pf-v6-c-label.pf-m-orangered {
2512
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2513
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2514
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2515
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2516
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2517
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2518
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2519
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2563
+ .pf-v6-c-button__icon-favorite,
2564
+ .pf-v6-c-button__icon-favorited {
2565
+ grid-area: 1/1/1/1;
2566
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2567
+ transition-property: opacity;
2520
2568
  }
2521
2569
 
2522
- .pf-v6-c-label.pf-m-yellow {
2523
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2524
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2525
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2526
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2527
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2528
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2529
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2530
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2570
+ .pf-v6-c-button__icon-favorite {
2571
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2531
2572
  }
2532
2573
 
2533
- .pf-v6-c-label.pf-m-green {
2534
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2535
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2536
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2537
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2538
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2539
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2540
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2541
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2574
+ .pf-v6-c-button__icon-favorited {
2575
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2542
2576
  }
2543
2577
 
2544
- .pf-v6-c-label.pf-m-teal {
2545
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2546
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2547
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2548
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2549
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2550
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2551
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2552
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2578
+ .pf-v6-c-button__progress {
2579
+ position: absolute;
2580
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2581
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2582
+ line-height: 1;
2583
+ color: var(--pf-v6-c-button__progress--Color);
2584
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2553
2585
  }
2554
2586
 
2555
- .pf-v6-c-label.pf-m-purple {
2556
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2557
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2558
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2559
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2560
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2561
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2562
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2563
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2587
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2588
+ --pf-v6-c-spinner--Color: currentcolor;
2564
2589
  }
2565
2590
 
2566
- .pf-v6-c-label.pf-m-success {
2567
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2568
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2569
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2570
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2571
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2572
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2573
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2574
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2575
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2576
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2591
+ .pf-v6-c-button__text {
2592
+ text-decoration: inherit;
2577
2593
  }
2578
2594
 
2579
- .pf-v6-c-label.pf-m-warning {
2580
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2581
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2582
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2583
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2584
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2585
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2586
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2587
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2588
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2589
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
2595
+ .pf-v6-c-button__count {
2596
+ display: inline-flex;
2597
+ align-items: center;
2590
2598
  }
2591
2599
 
2592
- .pf-v6-c-label.pf-m-danger {
2593
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2594
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2595
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2596
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2597
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2598
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2599
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2600
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2601
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2602
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
2600
+ .pf-v6-c-button--hamburger-icon path {
2601
+ fill: none;
2602
+ stroke: currentcolor;
2603
+ stroke-linecap: round;
2604
+ stroke-linejoin: round;
2605
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2603
2606
  }
2604
2607
 
2605
- .pf-v6-c-label.pf-m-info {
2606
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2607
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2608
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2609
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2610
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2611
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2612
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2613
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2614
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2615
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
2608
+ .pf-v6-c-button--hamburger-icon--top {
2609
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2616
2610
  }
2617
2611
 
2618
- .pf-v6-c-label.pf-m-custom {
2619
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2620
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2621
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2622
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2623
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2624
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2625
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2626
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2627
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2628
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2612
+ .pf-v6-c-button--hamburger-icon--middle {
2613
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2629
2614
  }
2630
2615
 
2631
- .pf-v6-c-label.pf-m-compact {
2632
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2633
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2634
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2635
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2636
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2637
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2638
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2616
+ .pf-v6-c-button--hamburger-icon--arrow {
2617
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2639
2618
  }
2640
2619
 
2641
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2642
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2620
+ .pf-v6-c-button--hamburger-icon--bottom {
2621
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2622
+ }
2623
+
2624
+ @keyframes pf-v6-c-button-icon-notify {
2625
+ 33% {
2626
+ transform: rotate(30deg);
2627
+ }
2628
+ 66% {
2629
+ transform: rotate(-60deg);
2630
+ }
2631
+ }
2632
+ @keyframes pf-v6-c-button-icon-favorited {
2633
+ 50% {
2634
+ scale: 1.5;
2635
+ }
2636
+ }
2637
+ .pf-v6-c-text-input-group {
2638
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2639
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2640
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2641
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2642
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2643
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2644
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2645
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2646
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2647
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2648
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2649
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2650
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2651
+ --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));
2652
+ --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));
2653
+ --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));
2654
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2655
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2656
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2657
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2658
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2659
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2660
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2661
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2662
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2663
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2664
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2665
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2666
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2667
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2668
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2669
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2670
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2671
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2672
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2673
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2674
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2675
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2676
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2677
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2678
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2679
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2680
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2681
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2682
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2683
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2684
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2685
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2686
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2687
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2688
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2643
2689
  }
2644
2690
 
2645
- .pf-v6-c-label.pf-m-outline {
2646
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2647
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2648
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2649
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2650
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2651
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2652
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2653
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2654
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2655
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2691
+ .pf-v6-c-text-input-group {
2692
+ position: relative;
2693
+ display: flex;
2694
+ width: 100%;
2695
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2696
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2697
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2698
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2699
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2700
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2701
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2702
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2656
2703
  }
2657
2704
 
2658
- .pf-v6-c-label.pf-m-editable {
2659
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2660
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2705
+ .pf-v6-c-text-input-group::before {
2706
+ position: absolute;
2707
+ inset: 0;
2708
+ pointer-events: none;
2709
+ content: "";
2710
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2711
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2712
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2713
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2714
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2661
2715
  }
2662
2716
 
2663
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2664
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2665
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2717
+ .pf-v6-c-text-input-group.pf-m-disabled {
2718
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2719
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2720
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2721
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2722
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2723
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2724
+ pointer-events: none;
2666
2725
  }
2667
2726
 
2668
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2669
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2670
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2671
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2727
+ .pf-v6-c-text-input-group.pf-m-plain {
2728
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2672
2729
  }
2673
2730
 
2674
- .pf-v6-c-label.pf-m-editable-active {
2675
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2676
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2677
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2678
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2731
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2732
+ border: 0;
2679
2733
  }
2680
2734
 
2681
- .pf-v6-c-label.pf-m-overflow {
2682
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2683
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2684
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2735
+ .pf-v6-c-text-input-group.pf-m-success {
2736
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2737
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2738
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2685
2739
  }
2686
2740
 
2687
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2688
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2689
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2690
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2741
+ .pf-v6-c-text-input-group.pf-m-warning {
2742
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2743
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2744
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2691
2745
  }
2692
2746
 
2693
- .pf-v6-c-label.pf-m-add {
2694
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2695
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2696
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2697
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2747
+ .pf-v6-c-text-input-group.pf-m-error {
2748
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2749
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2750
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2698
2751
  }
2699
2752
 
2700
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2701
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2702
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2703
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2704
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2753
+ @media (prefers-reduced-motion: no-preference) {
2754
+ .pf-v6-c-text-input-group.pf-m-error {
2755
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2756
+ animation-name: pf-v6-global-danger-jiggle-motion;
2757
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2758
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2759
+ animation-fill-mode: both;
2760
+ }
2705
2761
  }
2706
-
2707
- .pf-v6-c-label.pf-m-clickable {
2708
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2762
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2763
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2764
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2765
+ animation-name: pf-v6-global-fade-in;
2766
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2767
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2709
2768
  }
2710
2769
 
2711
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2712
- text-decoration-line: none;
2770
+ .pf-v6-c-text-input-group:hover {
2771
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2713
2772
  }
2714
2773
 
2715
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2716
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2717
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2718
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2719
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2720
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2721
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2722
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2774
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2775
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2723
2776
  }
2724
2777
 
2725
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2726
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2778
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2779
+ --pf-v6-c-text-input-group__text--Position: relative;
2727
2780
  }
2728
2781
 
2729
- .pf-v6-c-label.pf-m-disabled {
2730
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2731
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2732
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2733
- --pf-v6-c-label--BorderWidth: 0;
2734
- pointer-events: none;
2782
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2783
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2784
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2735
2785
  }
2736
2786
 
2737
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2738
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2787
+ .pf-v6-c-text-input-group__main {
2788
+ display: flex;
2789
+ flex: 1;
2790
+ flex-wrap: wrap;
2791
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2792
+ min-width: 0;
2739
2793
  }
2740
2794
 
2741
- .pf-v6-c-label,
2742
- .pf-v6-c-label__content {
2795
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2796
+ --pf-v6-c-text-input-group__text--Position: relative;
2797
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2743
2798
  display: inline-flex;
2744
2799
  align-items: center;
2745
2800
  justify-content: center;
2801
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2746
2802
  }
2747
2803
 
2748
- .pf-v6-c-label__text {
2749
- overflow: hidden;
2750
- text-overflow: ellipsis;
2751
- white-space: nowrap;
2752
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2753
- }
2754
-
2755
- .pf-v6-c-label__content {
2756
- gap: var(--pf-v6-c-label__content--Gap);
2757
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2758
- padding: 0;
2759
- overflow: hidden;
2760
- color: var(--pf-v6-c-label--Color);
2761
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2762
- background: transparent;
2763
- border-width: 0;
2764
- }
2765
-
2766
- .pf-v6-c-label__content::before {
2767
- position: absolute;
2768
- inset: 0;
2769
- z-index: -1;
2770
- pointer-events: none;
2771
- content: "";
2772
- background-color: var(--pf-v6-c-label--BackgroundColor);
2773
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2774
- border-radius: var(--pf-v6-c-label--BorderRadius);
2775
- }
2776
-
2777
- input.pf-v6-c-label__content {
2778
- overflow: hidden;
2779
- text-overflow: ellipsis;
2780
- white-space: nowrap;
2781
- }
2782
-
2783
- .pf-v6-c-label__icon {
2784
- color: var(--pf-v6-c-label__icon--Color);
2785
- }
2786
-
2787
- .pf-v6-c-label__actions {
2788
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2789
- }
2790
-
2791
- .pf-v6-c-label__actions .pf-v6-c-button {
2792
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2793
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2794
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2795
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2796
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2797
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2798
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2799
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2804
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2805
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2800
2806
  }
2801
2807
 
2802
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2803
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2808
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2809
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2810
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2811
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2804
2812
  }
2805
2813
 
2806
- .pf-v6-c-badge {
2807
- --pf-v6-c-badge--BorderColor: transparent;
2808
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2809
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2810
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2811
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2812
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2813
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2814
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2815
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2816
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2817
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2818
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2819
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2820
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2821
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2822
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2823
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2824
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2825
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2826
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2827
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2814
+ .pf-v6-c-text-input-group__text {
2815
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2816
+ display: inline-grid;
2817
+ flex: 1;
2818
+ grid-template-areas: "text-input";
2819
+ grid-template-columns: 1fr;
2828
2820
  }
2829
2821
 
2830
- .pf-v6-c-badge {
2831
- position: relative;
2832
- display: inline-block;
2833
- min-width: var(--pf-v6-c-badge--MinWidth);
2834
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2835
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2836
- font-size: var(--pf-v6-c-badge--FontSize);
2837
- font-weight: var(--pf-v6-c-badge--FontWeight);
2838
- color: var(--pf-v6-c-badge--Color);
2839
- text-align: center;
2822
+ .pf-v6-c-text-input-group__icon {
2823
+ position: absolute;
2824
+ inset-block-start: 50%;
2825
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2826
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2827
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2828
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2829
+ }
2830
+
2831
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2832
+ inset-inline-start: auto;
2833
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2834
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2835
+ }
2836
+
2837
+ .pf-v6-c-text-input-group__text-input {
2838
+ overflow: hidden;
2839
+ text-overflow: ellipsis;
2840
2840
  white-space: nowrap;
2841
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2842
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2841
+ position: relative;
2842
+ width: 100%;
2843
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2844
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2845
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2846
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2847
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2848
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2849
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2850
+ border: 0;
2851
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2843
2852
  }
2844
2853
 
2845
- .pf-v6-c-badge::after {
2846
- position: absolute;
2847
- inset: 0;
2848
- pointer-events: none;
2849
- content: "";
2850
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2851
- border-radius: inherit;
2854
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2855
+ grid-area: text-input;
2852
2856
  }
2853
2857
 
2854
- .pf-v6-c-badge.pf-m-read {
2855
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2856
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2857
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2858
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2858
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2859
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2859
2860
  }
2860
2861
 
2861
- .pf-v6-c-badge.pf-m-unread {
2862
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2863
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2864
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2862
+ .pf-v6-c-text-input-group__text-input::placeholder {
2863
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2865
2864
  }
2866
2865
 
2867
- .pf-v6-c-badge.pf-m-disabled {
2868
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2869
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2866
+ .pf-v6-c-text-input-group__utilities {
2867
+ display: flex;
2868
+ align-items: center;
2869
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2870
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2870
2871
  }
2871
2872
 
2872
- .pf-v6-c-badge.pf-m-disabled::after {
2873
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2873
+ .pf-v6-c-text-input-group__utilities > * + * {
2874
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2874
2875
  }
2875
2876
 
2876
- .pf-v6-c-badge__toggle-icon {
2877
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2878
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2877
+ .pf-v6-c-text-input-group__group {
2878
+ display: flex;
2879
2879
  }
2880
2880
 
2881
2881
  .pf-v6-c-menu {
@@ -3562,6 +3562,93 @@ input.pf-v6-c-label__content {
3562
3562
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3563
3563
  }
3564
3564
 
3565
+ .pf-v6-c-spinner {
3566
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3567
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3568
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3569
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3570
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3571
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3572
+ --pf-v6-c-spinner--StrokeWidth: 10;
3573
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3574
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3575
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3576
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3577
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3578
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3579
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3580
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3581
+ }
3582
+
3583
+ .pf-v6-c-spinner {
3584
+ width: var(--pf-v6-c-spinner--Width);
3585
+ height: var(--pf-v6-c-spinner--Height);
3586
+ overflow: hidden;
3587
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3588
+ }
3589
+
3590
+ .pf-v6-c-spinner.pf-m-inline {
3591
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3592
+ }
3593
+
3594
+ .pf-v6-c-spinner.pf-m-xs {
3595
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3596
+ --pf-v6-c-spinner--StrokeWidth: 15;
3597
+ }
3598
+
3599
+ .pf-v6-c-spinner.pf-m-sm {
3600
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3601
+ }
3602
+
3603
+ .pf-v6-c-spinner.pf-m-md {
3604
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3605
+ }
3606
+
3607
+ .pf-v6-c-spinner.pf-m-lg {
3608
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3609
+ }
3610
+
3611
+ .pf-v6-c-spinner.pf-m-xl {
3612
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3613
+ }
3614
+
3615
+ .pf-v6-c-spinner__path {
3616
+ width: 100%;
3617
+ height: 100%;
3618
+ stroke: var(--pf-v6-c-spinner--Color);
3619
+ stroke-dasharray: 283;
3620
+ stroke-dashoffset: 280;
3621
+ stroke-linecap: round;
3622
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3623
+ transform-origin: 50% 50%;
3624
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3625
+ }
3626
+
3627
+ @keyframes pf-v6-c-spinner-animation-rotate {
3628
+ 0% {
3629
+ transform: rotate(0deg);
3630
+ }
3631
+ 100% {
3632
+ transform: rotate(360deg);
3633
+ }
3634
+ }
3635
+ @keyframes pf-v6-c-spinner-animation-dash {
3636
+ 0% {
3637
+ stroke-dashoffset: 280;
3638
+ transform: rotate(0);
3639
+ }
3640
+ 15% {
3641
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3642
+ }
3643
+ 40% {
3644
+ stroke-dasharray: 220;
3645
+ stroke-dashoffset: 150;
3646
+ }
3647
+ 100% {
3648
+ stroke-dashoffset: 280;
3649
+ transform: rotate(720deg);
3650
+ }
3651
+ }
3565
3652
  .pf-v6-c-breadcrumb {
3566
3653
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3567
3654
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -3807,92 +3894,4 @@ button.pf-v6-c-breadcrumb__link {
3807
3894
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3808
3895
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3809
3896
  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));
3810
- }
3811
-
3812
- .pf-v6-c-spinner {
3813
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3814
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3815
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3816
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3817
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3818
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3819
- --pf-v6-c-spinner--StrokeWidth: 10;
3820
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3821
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3822
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3823
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3824
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3825
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3826
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3827
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3828
- }
3829
-
3830
- .pf-v6-c-spinner {
3831
- width: var(--pf-v6-c-spinner--Width);
3832
- height: var(--pf-v6-c-spinner--Height);
3833
- overflow: hidden;
3834
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3835
- }
3836
-
3837
- .pf-v6-c-spinner.pf-m-inline {
3838
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3839
- }
3840
-
3841
- .pf-v6-c-spinner.pf-m-xs {
3842
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3843
- --pf-v6-c-spinner--StrokeWidth: 15;
3844
- }
3845
-
3846
- .pf-v6-c-spinner.pf-m-sm {
3847
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3848
- }
3849
-
3850
- .pf-v6-c-spinner.pf-m-md {
3851
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3852
- }
3853
-
3854
- .pf-v6-c-spinner.pf-m-lg {
3855
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3856
- }
3857
-
3858
- .pf-v6-c-spinner.pf-m-xl {
3859
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3860
- }
3861
-
3862
- .pf-v6-c-spinner__path {
3863
- width: 100%;
3864
- height: 100%;
3865
- stroke: var(--pf-v6-c-spinner--Color);
3866
- stroke-dasharray: 283;
3867
- stroke-dashoffset: 280;
3868
- stroke-linecap: round;
3869
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3870
- transform-origin: 50% 50%;
3871
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3872
- }
3873
-
3874
- @keyframes pf-v6-c-spinner-animation-rotate {
3875
- 0% {
3876
- transform: rotate(0deg);
3877
- }
3878
- 100% {
3879
- transform: rotate(360deg);
3880
- }
3881
- }
3882
- @keyframes pf-v6-c-spinner-animation-dash {
3883
- 0% {
3884
- stroke-dashoffset: 280;
3885
- transform: rotate(0);
3886
- }
3887
- 15% {
3888
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3889
- }
3890
- 40% {
3891
- stroke-dasharray: 220;
3892
- stroke-dashoffset: 150;
3893
- }
3894
- 100% {
3895
- stroke-dashoffset: 280;
3896
- transform: rotate(720deg);
3897
- }
3898
3897
  }