@patternfly/react-templates 6.2.0-prerelease.10 → 6.2.0-prerelease.12

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-BdZsLlTf.css → output-CuhECVfX.css} +1059 -1058
  6. package/package.json +3 -3
package/dist/umd/assets/{output-BdZsLlTf.css → output-CuhECVfX.css} RENAMED
@@ -3,1066 +3,993 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-label-group {
7
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
8
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
9
- --pf-v6-c-label-group--MaxWidth: 100%;
10
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
11
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
12
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
13
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
14
- --pf-v6-c-label-group__main--MaxWidth: 100%;
15
- --pf-v6-c-label-group__main--MinWidth: 0;
16
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
17
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
19
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
20
- --pf-v6-c-label-group__list--MaxWidth: 100%;
21
- --pf-v6-c-label-group__list--MinWidth: 0;
22
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
23
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
25
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
26
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
27
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
28
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
29
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
30
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
31
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
32
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
34
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
35
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
36
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
38
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
39
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
40
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
41
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
42
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
43
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
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--placeholder--Color: var(--pf-t--global--text--color--placeholder);
40
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
41
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
42
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
43
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
44
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
45
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
46
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
47
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
48
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
49
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
50
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
51
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
52
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
53
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
54
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
55
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
56
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
44
57
  }
45
58
 
46
- .pf-v6-c-label-group {
47
- display: inline-flex;
48
- row-gap: var(--pf-v6-c-label-group--RowGap);
49
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
50
- align-items: center;
51
- max-width: var(--pf-v6-c-label-group--MaxWidth);
59
+ .pf-v6-c-text-input-group {
60
+ position: relative;
61
+ display: flex;
62
+ width: 100%;
63
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
64
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
65
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
66
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
67
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
68
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
69
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
70
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
52
71
  }
53
72
 
54
- .pf-v6-c-label-group.pf-m-category {
55
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
56
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
57
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
58
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
59
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
60
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
61
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
73
+ .pf-v6-c-text-input-group::before {
74
+ position: absolute;
75
+ inset: 0;
76
+ pointer-events: none;
77
+ content: "";
78
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
79
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
80
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
81
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
82
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
62
83
  }
63
84
 
64
- .pf-v6-c-label-group.pf-m-vertical {
65
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
66
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
67
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
68
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
69
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
70
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
71
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
85
+ .pf-v6-c-text-input-group.pf-m-disabled {
86
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
87
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
88
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
89
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
90
+ pointer-events: none;
72
91
  }
73
92
 
74
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
75
- align-items: flex-start;
93
+ .pf-v6-c-text-input-group.pf-m-plain {
94
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
76
95
  }
77
96
 
78
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
79
- flex-direction: column;
80
- align-items: flex-start;
81
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
97
+ .pf-v6-c-text-input-group.pf-m-plain::before {
98
+ border: 0;
82
99
  }
83
100
 
84
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
85
- flex-direction: column;
86
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
101
+ .pf-v6-c-text-input-group.pf-m-success {
102
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
103
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
104
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
87
105
  }
88
106
 
89
- .pf-v6-c-label-group.pf-m-editable,
90
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
91
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
92
- display: flex;
107
+ .pf-v6-c-text-input-group.pf-m-warning {
108
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
109
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
110
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
93
111
  }
94
112
 
95
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
96
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
97
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
98
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
99
- flex: 1;
113
+ .pf-v6-c-text-input-group.pf-m-error {
114
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
115
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
116
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
100
117
  }
101
118
 
102
- .pf-v6-c-label-group__main {
119
+ .pf-v6-c-text-input-group:hover {
120
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
121
+ }
122
+
123
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
124
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
125
+ }
126
+
127
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
128
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
129
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
130
+ }
131
+
132
+ .pf-v6-c-text-input-group__main {
103
133
  display: flex;
104
134
  flex: 1;
105
135
  flex-wrap: wrap;
106
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
107
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
108
- align-items: baseline;
109
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
136
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
137
+ min-width: 0;
110
138
  }
111
139
 
112
- .pf-v6-c-label-group__list {
140
+ .pf-v6-c-text-input-group__main.pf-m-icon {
141
+ --pf-v6-c-text-input-group__text--Position: relative;
142
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
113
143
  display: inline-flex;
114
- flex-wrap: wrap;
115
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
116
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
117
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
144
+ align-items: center;
145
+ justify-content: center;
146
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
118
147
  }
119
148
 
120
- .pf-v6-c-label-group__list-item {
121
- display: inline-flex;
122
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
149
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
150
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
123
151
  }
124
152
 
125
- .pf-v6-c-label-group__label {
126
- overflow: hidden;
127
- text-overflow: ellipsis;
128
- white-space: nowrap;
129
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
153
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
154
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
155
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
156
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
130
157
  }
131
158
 
132
- .pf-v6-c-label-group__close {
133
- display: flex;
134
- align-self: flex-start;
159
+ .pf-v6-c-text-input-group__text {
160
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
161
+ display: inline-grid;
162
+ flex: 1;
163
+ grid-template-areas: "text-input";
164
+ grid-template-columns: 1fr;
135
165
  }
136
166
 
137
- .pf-v6-c-label-group__close .pf-v6-c-button {
138
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
139
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
140
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
141
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
142
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
167
+ .pf-v6-c-text-input-group__icon {
168
+ position: absolute;
169
+ inset-block-start: 50%;
170
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
171
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
172
+ color: var(--pf-v6-c-text-input-group__icon--Color);
173
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
143
174
  }
144
175
 
145
- .pf-v6-c-label-group__textarea {
146
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
147
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
148
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
149
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
150
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
151
- white-space: nowrap;
152
- resize: none;
153
- border: 0;
154
- -ms-overflow-style: none;
155
- scrollbar-width: none;
176
+ .pf-v6-c-text-input-group__icon.pf-m-status {
177
+ inset-inline-start: auto;
178
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
179
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
156
180
  }
157
181
 
158
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
- display: none;
182
+ .pf-v6-c-text-input-group__text-input {
183
+ overflow: hidden;
184
+ text-overflow: ellipsis;
185
+ white-space: nowrap;
186
+ position: relative;
187
+ width: 100%;
188
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
189
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
190
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
191
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
192
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
193
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
194
+ border: 0;
195
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
160
196
  }
161
197
 
162
- .pf-v6-c-label {
163
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
164
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
165
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
166
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
167
- --pf-v6-c-label--MaxWidth: 100%;
168
- --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)));
169
- --pf-v6-c-label--BorderWidth: 0;
170
- --pf-v6-c-label--BorderColor: transparent;
171
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
172
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
173
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
174
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
175
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
176
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
177
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
178
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
179
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
180
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
181
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
182
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
183
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
184
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
185
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
186
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
187
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
188
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
189
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
190
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
191
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
192
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
193
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
194
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
195
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
196
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
197
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
198
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
199
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
200
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
201
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
202
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
203
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
204
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
205
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
206
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
207
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
208
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
209
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
210
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
211
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
212
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
213
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
214
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
215
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
216
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
217
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
218
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
219
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
220
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
221
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
222
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
223
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
224
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
225
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
226
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
227
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
228
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
229
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
230
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
231
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
232
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
233
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
234
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
235
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
236
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
237
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
238
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
239
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
240
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
241
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
242
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
243
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
244
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
245
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
246
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
247
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
248
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
249
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
250
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
251
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
252
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
253
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
254
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
255
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
256
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
257
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
258
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
259
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
260
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
261
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
262
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
263
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
264
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
265
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
266
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
267
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
268
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
269
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
270
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
271
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
272
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
273
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
274
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
275
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
276
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
277
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
278
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
279
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
280
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
281
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
282
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
283
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
284
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
285
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
286
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
287
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
288
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
289
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
290
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
291
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
292
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
293
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
294
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
295
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
296
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
297
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
298
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
299
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
300
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
301
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
302
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
303
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
304
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
305
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
306
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
307
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
308
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
309
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
310
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
311
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
312
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
313
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
314
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
315
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
316
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
317
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
318
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
319
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
320
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
321
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
322
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
323
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
324
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
325
- --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)));
326
- --pf-v6-c-label__content--MaxWidth: 100%;
327
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
328
- --pf-v6-c-label__content--Cursor: initial;
329
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
330
- --pf-v6-c-label__text--MaxWidth: 100%;
331
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
332
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
333
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
334
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
335
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
336
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
337
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
338
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
339
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
340
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
341
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
342
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
343
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
344
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
345
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
346
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
347
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
348
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
349
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
350
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
351
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
352
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
353
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
354
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
198
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
199
+ grid-area: text-input;
355
200
  }
356
201
 
357
- .pf-v6-c-label {
358
- position: relative;
359
- min-width: var(--pf-v6-c-label--MinWidth);
360
- max-width: var(--pf-v6-c-label--MaxWidth);
361
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
362
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
363
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
364
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
365
- font-size: var(--pf-v6-c-label--FontSize);
366
- white-space: nowrap;
367
- background: transparent;
368
- isolation: isolate;
369
- border: 0;
370
- border-radius: var(--pf-v6-c-label--BorderRadius);
202
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
203
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
371
204
  }
372
205
 
373
- .pf-v6-c-label.pf-m-blue {
374
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
375
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
376
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
377
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
378
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
379
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
380
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
381
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
206
+ .pf-v6-c-text-input-group__text-input::placeholder {
207
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
382
208
  }
383
209
 
384
- .pf-v6-c-label.pf-m-red {
385
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
386
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
387
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
388
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
389
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
390
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
391
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
392
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
210
+ .pf-v6-c-text-input-group__utilities {
211
+ display: flex;
212
+ align-items: center;
213
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
214
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
393
215
  }
394
216
 
395
- .pf-v6-c-label.pf-m-orange {
396
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
397
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
398
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
399
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
400
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
401
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
402
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
403
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
217
+ .pf-v6-c-text-input-group__utilities > * + * {
218
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
404
219
  }
405
220
 
406
- .pf-v6-c-label.pf-m-orangered {
407
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
408
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
409
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
410
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
411
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
412
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
413
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
414
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
221
+ .pf-v6-c-text-input-group__group {
222
+ display: flex;
415
223
  }
416
224
 
417
- .pf-v6-c-label.pf-m-yellow {
418
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
419
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
420
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
421
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
422
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
423
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
424
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
425
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
225
+ .pf-v6-c-check {
226
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
227
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
228
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
229
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
230
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
231
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
232
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
233
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
234
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
235
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
236
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
237
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
238
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
239
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
426
240
  }
427
241
 
428
- .pf-v6-c-label.pf-m-green {
429
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
430
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
431
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
432
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
433
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
434
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
435
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
436
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
242
+ .pf-v6-c-check {
243
+ display: grid;
244
+ grid-template-columns: auto 1fr;
245
+ grid-gap: var(--pf-v6-c-check--GridGap);
246
+ accent-color: var(--pf-v6-c-check--AccentColor);
437
247
  }
438
248
 
439
- .pf-v6-c-label.pf-m-teal {
440
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
441
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
442
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
443
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
444
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
445
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
446
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
447
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
249
+ .pf-v6-c-check.pf-m-standalone {
250
+ display: inline-grid;
251
+ grid-template-columns: auto;
252
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
448
253
  }
449
254
 
450
- .pf-v6-c-label.pf-m-purple {
451
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
452
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
453
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
454
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
455
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
456
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
457
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
458
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
255
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
256
+ align-self: center;
257
+ transform: none;
459
258
  }
460
259
 
461
- .pf-v6-c-label.pf-m-success {
462
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
463
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
464
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
465
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
466
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
467
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
468
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
469
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
470
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
471
- --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);
260
+ .pf-v6-c-check__input {
261
+ align-self: start;
262
+ font-size: var(--pf-v6-c-check__label--FontSize);
263
+ line-height: var(--pf-v6-c-check__label--LineHeight);
264
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
472
265
  }
473
266
 
474
- .pf-v6-c-label.pf-m-warning {
475
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
476
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
477
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
478
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
479
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
480
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
481
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
482
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
483
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
484
- --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);
267
+ .pf-v6-c-check__label {
268
+ font-size: var(--pf-v6-c-check__label--FontSize);
269
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
270
+ line-height: var(--pf-v6-c-check__label--LineHeight);
271
+ color: var(--pf-v6-c-check__label--Color);
485
272
  }
486
273
 
487
- .pf-v6-c-label.pf-m-danger {
488
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
489
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
490
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
491
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
492
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
493
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
494
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
495
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
496
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
497
- --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);
274
+ .pf-v6-c-check__description {
275
+ grid-column: 2;
276
+ font-size: var(--pf-v6-c-check__description--FontSize);
277
+ color: var(--pf-v6-c-check__description--Color);
498
278
  }
499
279
 
500
- .pf-v6-c-label.pf-m-info {
501
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
502
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
503
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
504
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
505
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
506
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
507
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
508
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
509
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
510
- --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);
280
+ .pf-v6-c-check__body {
281
+ grid-column: 2;
511
282
  }
512
283
 
513
- .pf-v6-c-label.pf-m-custom {
514
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
515
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
516
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
517
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
518
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
519
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
520
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
521
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
522
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
523
- --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);
284
+ .pf-v6-c-check__label,
285
+ .pf-v6-c-check__input {
286
+ justify-self: start;
524
287
  }
525
288
 
526
- .pf-v6-c-label.pf-m-compact {
527
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
528
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
529
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
530
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
531
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
532
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
533
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
289
+ label.pf-v6-c-check, .pf-v6-c-check__label,
290
+ .pf-v6-c-check__input {
291
+ cursor: pointer;
534
292
  }
535
293
 
536
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
537
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
294
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
295
+ .pf-v6-c-check__input:disabled,
296
+ .pf-v6-c-check__input.pf-m-disabled {
297
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
298
+ cursor: not-allowed;
538
299
  }
539
300
 
540
- .pf-v6-c-label.pf-m-outline {
541
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
542
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
543
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
544
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
545
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
546
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
547
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
548
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
549
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
550
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
301
+ .pf-v6-c-check__label-required {
302
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
303
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
304
+ color: var(--pf-v6-c-check__label-required--Color);
551
305
  }
552
306
 
553
- .pf-v6-c-label.pf-m-editable {
554
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
555
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
307
+ .pf-v6-c-label-group {
308
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
309
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
310
+ --pf-v6-c-label-group--MaxWidth: 100%;
311
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
312
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
313
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
314
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
315
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
316
+ --pf-v6-c-label-group__main--MinWidth: 0;
317
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
318
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
319
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
320
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
321
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
322
+ --pf-v6-c-label-group__list--MinWidth: 0;
323
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
324
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
325
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
326
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
327
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
328
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
329
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
330
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
331
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
332
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
333
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
334
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
335
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
336
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
337
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
338
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
339
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
340
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
341
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
342
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
343
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
344
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
556
345
  }
557
346
 
558
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
559
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
560
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
347
+ .pf-v6-c-label-group {
348
+ display: inline-flex;
349
+ row-gap: var(--pf-v6-c-label-group--RowGap);
350
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
351
+ align-items: center;
352
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
561
353
  }
562
354
 
563
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
564
- text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
565
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
355
+ .pf-v6-c-label-group.pf-m-category {
356
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
357
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
358
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
359
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
360
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
361
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
362
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
566
363
  }
567
364
 
568
- .pf-v6-c-label.pf-m-editable-active {
569
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
570
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
571
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
572
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
365
+ .pf-v6-c-label-group.pf-m-vertical {
366
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
367
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
368
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
369
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
370
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
371
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
372
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
573
373
  }
574
374
 
575
- .pf-v6-c-label.pf-m-overflow {
576
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
577
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
375
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
376
+ align-items: flex-start;
578
377
  }
579
378
 
580
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
581
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
582
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
379
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
380
+ flex-direction: column;
381
+ align-items: flex-start;
382
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
583
383
  }
584
384
 
585
- .pf-v6-c-label.pf-m-add {
586
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
587
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
588
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
589
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
385
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
386
+ flex-direction: column;
387
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
590
388
  }
591
389
 
592
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
593
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
594
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
595
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
596
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
390
+ .pf-v6-c-label-group.pf-m-editable,
391
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
392
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
393
+ display: flex;
597
394
  }
598
395
 
599
- .pf-v6-c-label.pf-m-clickable {
600
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
396
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
397
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
398
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
399
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
400
+ flex: 1;
601
401
  }
602
402
 
603
- .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) {
604
- text-decoration: none;
403
+ .pf-v6-c-label-group__main {
404
+ display: flex;
405
+ flex: 1;
406
+ flex-wrap: wrap;
407
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
408
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
409
+ align-items: baseline;
410
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
605
411
  }
606
412
 
607
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
608
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
609
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
610
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
611
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
612
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
613
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
614
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
413
+ .pf-v6-c-label-group__list {
414
+ display: inline-flex;
415
+ flex-wrap: wrap;
416
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
417
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
418
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
615
419
  }
616
420
 
617
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
618
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
421
+ .pf-v6-c-label-group__list-item {
422
+ display: inline-flex;
423
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
619
424
  }
620
425
 
621
- .pf-v6-c-label.pf-m-disabled {
622
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
623
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
624
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
625
- --pf-v6-c-label--BorderWidth: 0;
626
- pointer-events: none;
426
+ .pf-v6-c-label-group__label {
427
+ overflow: hidden;
428
+ text-overflow: ellipsis;
429
+ white-space: nowrap;
430
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
627
431
  }
628
432
 
629
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
630
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
433
+ .pf-v6-c-label-group__close {
434
+ display: flex;
435
+ align-self: flex-start;
631
436
  }
632
437
 
633
- .pf-v6-c-label,
634
- .pf-v6-c-label__content {
635
- display: inline-flex;
636
- align-items: center;
637
- justify-content: center;
438
+ .pf-v6-c-label-group__close .pf-v6-c-button {
439
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
440
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
441
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
442
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
443
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
638
444
  }
639
445
 
640
- .pf-v6-c-label__text {
641
- overflow: hidden;
642
- text-overflow: ellipsis;
446
+ .pf-v6-c-label-group__textarea {
447
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
448
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
449
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
450
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
451
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
643
452
  white-space: nowrap;
644
- max-width: var(--pf-v6-c-label__text--MaxWidth);
453
+ resize: none;
454
+ border: 0;
455
+ -ms-overflow-style: none;
456
+ scrollbar-width: none;
645
457
  }
646
458
 
647
- .pf-v6-c-label__content {
648
- gap: var(--pf-v6-c-label__content--Gap);
649
- max-width: var(--pf-v6-c-label__content--MaxWidth);
650
- padding: 0;
651
- overflow: hidden;
652
- color: var(--pf-v6-c-label--Color);
653
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
654
- background: transparent;
655
- border-width: 0;
459
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
460
+ display: none;
656
461
  }
657
462
 
658
- .pf-v6-c-label__content::before {
659
- position: absolute;
660
- inset: 0;
661
- z-index: -1;
662
- pointer-events: none;
663
- content: "";
664
- background-color: var(--pf-v6-c-label--BackgroundColor);
665
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
666
- border-radius: var(--pf-v6-c-label--BorderRadius);
463
+ .pf-v6-c-label {
464
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
465
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
466
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
467
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
468
+ --pf-v6-c-label--MaxWidth: 100%;
469
+ --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)));
470
+ --pf-v6-c-label--BorderWidth: 0;
471
+ --pf-v6-c-label--BorderColor: transparent;
472
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
473
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
474
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
475
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
476
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
477
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
478
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
479
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
480
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
481
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
482
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
483
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
484
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
485
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
486
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
487
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
488
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
489
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
490
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
491
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
492
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
493
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
494
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
495
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
496
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
497
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
498
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
499
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
500
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
501
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
502
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
503
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
504
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
505
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
506
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
507
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
508
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
509
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
510
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
511
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
512
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
513
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
514
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
515
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
516
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
517
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
518
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
519
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
520
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
521
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
522
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
523
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
524
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
525
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
526
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
527
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
528
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
529
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
530
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
531
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
532
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
533
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
534
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
535
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
536
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
537
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
538
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
539
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
540
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
541
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
542
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
543
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
544
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
545
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
546
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
547
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
548
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
549
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
550
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
551
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
552
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
553
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
554
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
555
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
556
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
557
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
558
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
559
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
560
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
561
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
562
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
563
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
564
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
565
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
566
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
567
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
568
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
569
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
570
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
571
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
572
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
573
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
574
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
575
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
576
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
577
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
578
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
579
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
580
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
581
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
582
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
583
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
584
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
585
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
586
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
587
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
588
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
589
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
590
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
591
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
592
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
593
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
594
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
595
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
596
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
597
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
598
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
599
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
600
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
601
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
602
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
603
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
604
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
605
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
606
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
607
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
608
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
609
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
610
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
611
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
612
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
613
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
614
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
615
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
616
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
617
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
618
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
619
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
620
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
621
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
622
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
623
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
624
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
625
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
626
+ --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)));
627
+ --pf-v6-c-label__content--MaxWidth: 100%;
628
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
629
+ --pf-v6-c-label__content--Cursor: initial;
630
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
631
+ --pf-v6-c-label__text--MaxWidth: 100%;
632
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
633
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
634
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
635
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
636
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
637
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
638
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
639
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
640
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
641
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
642
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
643
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
644
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
645
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
646
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
647
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
648
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
649
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
650
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
651
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
652
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
653
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
654
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
655
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
667
656
  }
668
657
 
669
- input.pf-v6-c-label__content {
670
- overflow: hidden;
671
- text-overflow: ellipsis;
658
+ .pf-v6-c-label {
659
+ position: relative;
660
+ min-width: var(--pf-v6-c-label--MinWidth);
661
+ max-width: var(--pf-v6-c-label--MaxWidth);
662
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
663
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
664
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
665
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
666
+ font-size: var(--pf-v6-c-label--FontSize);
672
667
  white-space: nowrap;
668
+ background: transparent;
669
+ isolation: isolate;
670
+ border: 0;
671
+ border-radius: var(--pf-v6-c-label--BorderRadius);
673
672
  }
674
673
 
675
- .pf-v6-c-label__icon {
676
- color: var(--pf-v6-c-label__icon--Color);
677
- }
678
-
679
- .pf-v6-c-label__actions {
680
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
681
- }
682
-
683
- .pf-v6-c-label__actions .pf-v6-c-button {
684
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
685
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
686
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
687
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
688
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
689
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
690
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
691
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
692
- }
693
-
694
- .pf-v6-c-check {
695
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
696
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
697
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
698
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
699
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
700
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
701
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
702
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
703
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
704
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
705
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
706
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
707
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
708
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
709
- }
710
-
711
- .pf-v6-c-check {
712
- display: grid;
713
- grid-template-columns: auto 1fr;
714
- grid-gap: var(--pf-v6-c-check--GridGap);
715
- accent-color: var(--pf-v6-c-check--AccentColor);
716
- }
717
-
718
- .pf-v6-c-check.pf-m-standalone {
719
- display: inline-grid;
720
- grid-template-columns: auto;
721
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
722
- }
723
-
724
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
725
- align-self: center;
726
- transform: none;
727
- }
728
-
729
- .pf-v6-c-check__input {
730
- align-self: start;
731
- font-size: var(--pf-v6-c-check__label--FontSize);
732
- line-height: var(--pf-v6-c-check__label--LineHeight);
733
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
734
- }
735
-
736
- .pf-v6-c-check__label {
737
- font-size: var(--pf-v6-c-check__label--FontSize);
738
- font-weight: var(--pf-v6-c-check__label--FontWeight);
739
- line-height: var(--pf-v6-c-check__label--LineHeight);
740
- color: var(--pf-v6-c-check__label--Color);
741
- }
742
-
743
- .pf-v6-c-check__description {
744
- grid-column: 2;
745
- font-size: var(--pf-v6-c-check__description--FontSize);
746
- color: var(--pf-v6-c-check__description--Color);
747
- }
748
-
749
- .pf-v6-c-check__body {
750
- grid-column: 2;
751
- }
752
-
753
- .pf-v6-c-check__label,
754
- .pf-v6-c-check__input {
755
- justify-self: start;
756
- }
757
-
758
- label.pf-v6-c-check, .pf-v6-c-check__label,
759
- .pf-v6-c-check__input {
760
- cursor: pointer;
674
+ .pf-v6-c-label.pf-m-blue {
675
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
676
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
677
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
678
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
679
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
680
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
681
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
682
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
761
683
  }
762
684
 
763
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
764
- .pf-v6-c-check__input:disabled,
765
- .pf-v6-c-check__input.pf-m-disabled {
766
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
767
- cursor: not-allowed;
685
+ .pf-v6-c-label.pf-m-red {
686
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
687
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
688
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
689
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
690
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
691
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
692
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
693
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
768
694
  }
769
695
 
770
- .pf-v6-c-check__label-required {
771
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
772
- font-size: var(--pf-v6-c-check__label-required--FontSize);
773
- color: var(--pf-v6-c-check__label-required--Color);
696
+ .pf-v6-c-label.pf-m-orange {
697
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
698
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
699
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
700
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
701
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
702
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
703
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
704
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
774
705
  }
775
706
 
776
- .pf-v6-c-text-input-group {
777
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
778
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
779
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
780
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
781
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
782
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
783
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
784
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
785
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
786
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
787
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
788
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
789
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
790
- --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));
791
- --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));
792
- --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));
793
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
794
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
795
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
796
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
797
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
798
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
799
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
800
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
801
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
802
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
803
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
804
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
805
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
806
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
807
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
808
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
809
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
810
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
811
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
812
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
813
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
814
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
815
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
816
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
817
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
818
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
819
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
820
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
821
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
822
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
823
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
824
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
825
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
826
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
707
+ .pf-v6-c-label.pf-m-orangered {
708
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
709
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
710
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
711
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
712
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
713
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
714
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
715
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
827
716
  }
828
717
 
829
- .pf-v6-c-text-input-group {
830
- position: relative;
831
- display: flex;
832
- width: 100%;
833
- font-size: var(--pf-v6-c-text-input-group__FontSize);
834
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
835
- color: var(--pf-v6-c-text-input-group--Color, inherit);
836
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
837
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
838
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
839
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
840
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
718
+ .pf-v6-c-label.pf-m-yellow {
719
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
720
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
721
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
722
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
723
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
724
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
725
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
726
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
841
727
  }
842
728
 
843
- .pf-v6-c-text-input-group::before {
844
- position: absolute;
845
- inset: 0;
846
- pointer-events: none;
847
- content: "";
848
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
849
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
850
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
851
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
852
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
729
+ .pf-v6-c-label.pf-m-green {
730
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
731
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
732
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
733
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
734
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
735
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
736
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
737
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
853
738
  }
854
739
 
855
- .pf-v6-c-text-input-group.pf-m-disabled {
856
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
857
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
858
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
859
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
860
- pointer-events: none;
740
+ .pf-v6-c-label.pf-m-teal {
741
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
742
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
743
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
744
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
745
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
746
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
747
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
748
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
861
749
  }
862
750
 
863
- .pf-v6-c-text-input-group.pf-m-plain {
864
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
751
+ .pf-v6-c-label.pf-m-purple {
752
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
753
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
754
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
755
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
756
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
757
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
758
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
759
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
865
760
  }
866
761
 
867
- .pf-v6-c-text-input-group.pf-m-plain::before {
868
- border: 0;
762
+ .pf-v6-c-label.pf-m-success {
763
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
764
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
765
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
766
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
767
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
768
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
769
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
770
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
771
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
772
+ --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);
869
773
  }
870
774
 
871
- .pf-v6-c-text-input-group.pf-m-success {
872
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
873
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
874
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
775
+ .pf-v6-c-label.pf-m-warning {
776
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
777
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
778
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
779
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
780
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
781
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
782
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
783
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
784
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
785
+ --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);
875
786
  }
876
787
 
877
- .pf-v6-c-text-input-group.pf-m-warning {
878
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
879
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
880
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
788
+ .pf-v6-c-label.pf-m-danger {
789
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
790
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
791
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
792
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
793
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
794
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
795
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
796
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
797
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
798
+ --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);
881
799
  }
882
800
 
883
- .pf-v6-c-text-input-group.pf-m-error {
884
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
885
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
886
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
801
+ .pf-v6-c-label.pf-m-info {
802
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
803
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
804
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
805
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
806
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
807
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
808
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
809
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
810
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
811
+ --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);
887
812
  }
888
813
 
889
- .pf-v6-c-text-input-group:hover {
890
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
814
+ .pf-v6-c-label.pf-m-custom {
815
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
816
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
817
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
818
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
819
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
820
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
821
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
822
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
823
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
824
+ --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);
891
825
  }
892
826
 
893
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
894
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
827
+ .pf-v6-c-label.pf-m-compact {
828
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
829
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
830
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
831
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
832
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
833
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
834
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
895
835
  }
896
836
 
897
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
898
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
899
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
837
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
838
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
900
839
  }
901
840
 
902
- .pf-v6-c-text-input-group__main {
903
- display: flex;
904
- flex: 1;
905
- flex-wrap: wrap;
906
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
907
- min-width: 0;
841
+ .pf-v6-c-label.pf-m-outline {
842
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
843
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
844
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
845
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
846
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
847
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
848
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
849
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
850
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
851
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
908
852
  }
909
853
 
910
- .pf-v6-c-text-input-group__main.pf-m-icon {
911
- --pf-v6-c-text-input-group__text--Position: relative;
912
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
913
- display: inline-flex;
914
- align-items: center;
915
- justify-content: center;
916
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
854
+ .pf-v6-c-label.pf-m-editable {
855
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
856
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
917
857
  }
918
858
 
919
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
920
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
859
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
860
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
861
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
921
862
  }
922
863
 
923
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
924
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
925
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
926
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
864
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
865
+ text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
866
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
927
867
  }
928
868
 
929
- .pf-v6-c-text-input-group__text {
930
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
931
- display: inline-grid;
932
- flex: 1;
933
- grid-template-areas: "text-input";
934
- grid-template-columns: 1fr;
869
+ .pf-v6-c-label.pf-m-editable-active {
870
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
871
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
872
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
873
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
935
874
  }
936
875
 
937
- .pf-v6-c-text-input-group__icon {
938
- position: absolute;
939
- inset-block-start: 50%;
940
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
941
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
942
- color: var(--pf-v6-c-text-input-group__icon--Color);
943
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
876
+ .pf-v6-c-label.pf-m-overflow {
877
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
878
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
944
879
  }
945
880
 
946
- .pf-v6-c-text-input-group__icon.pf-m-status {
947
- inset-inline-start: auto;
948
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
949
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
881
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
882
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
883
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
950
884
  }
951
885
 
952
- .pf-v6-c-text-input-group__text-input {
953
- overflow: hidden;
954
- text-overflow: ellipsis;
955
- white-space: nowrap;
956
- position: relative;
957
- width: 100%;
958
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
959
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
960
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
961
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
962
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
963
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
964
- border: 0;
965
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
886
+ .pf-v6-c-label.pf-m-add {
887
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
888
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
889
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
890
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
966
891
  }
967
892
 
968
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
969
- grid-area: text-input;
893
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
894
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
895
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
896
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
897
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
970
898
  }
971
899
 
972
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
973
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
900
+ .pf-v6-c-label.pf-m-clickable {
901
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
974
902
  }
975
903
 
976
- .pf-v6-c-text-input-group__text-input::placeholder {
977
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
904
+ .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) {
905
+ text-decoration: none;
978
906
  }
979
907
 
980
- .pf-v6-c-text-input-group__utilities {
981
- display: flex;
982
- align-items: center;
983
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
984
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
908
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
909
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
910
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
911
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
912
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
913
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
914
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
915
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
985
916
  }
986
917
 
987
- .pf-v6-c-text-input-group__utilities > * + * {
988
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
918
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
919
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
989
920
  }
990
921
 
991
- .pf-v6-c-text-input-group__group {
992
- display: flex;
922
+ .pf-v6-c-label.pf-m-disabled {
923
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
924
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
925
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
926
+ --pf-v6-c-label--BorderWidth: 0;
927
+ pointer-events: none;
993
928
  }
994
929
 
995
- .pf-v6-c-badge {
996
- --pf-v6-c-badge--BorderColor: transparent;
997
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
998
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
999
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1000
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1001
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1002
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1003
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1004
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1005
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1006
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1007
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1008
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1009
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1010
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1011
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1012
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1013
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1014
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1015
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
930
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
931
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1016
932
  }
1017
933
 
1018
- .pf-v6-c-badge {
1019
- position: relative;
1020
- display: inline-block;
1021
- min-width: var(--pf-v6-c-badge--MinWidth);
1022
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1023
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1024
- font-size: var(--pf-v6-c-badge--FontSize);
1025
- font-weight: var(--pf-v6-c-badge--FontWeight);
1026
- color: var(--pf-v6-c-badge--Color);
1027
- text-align: center;
934
+ .pf-v6-c-label,
935
+ .pf-v6-c-label__content {
936
+ display: inline-flex;
937
+ align-items: center;
938
+ justify-content: center;
939
+ }
940
+
941
+ .pf-v6-c-label__text {
942
+ overflow: hidden;
943
+ text-overflow: ellipsis;
1028
944
  white-space: nowrap;
1029
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1030
- border-radius: var(--pf-v6-c-badge--BorderRadius);
945
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1031
946
  }
1032
947
 
1033
- .pf-v6-c-badge::after {
948
+ .pf-v6-c-label__content {
949
+ gap: var(--pf-v6-c-label__content--Gap);
950
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
951
+ padding: 0;
952
+ overflow: hidden;
953
+ color: var(--pf-v6-c-label--Color);
954
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
955
+ background: transparent;
956
+ border-width: 0;
957
+ }
958
+
959
+ .pf-v6-c-label__content::before {
1034
960
  position: absolute;
1035
961
  inset: 0;
962
+ z-index: -1;
1036
963
  pointer-events: none;
1037
964
  content: "";
1038
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1039
- border-radius: inherit;
1040
- }
1041
-
1042
- .pf-v6-c-badge.pf-m-read {
1043
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1044
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1045
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
965
+ background-color: var(--pf-v6-c-label--BackgroundColor);
966
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
967
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1046
968
  }
1047
969
 
1048
- .pf-v6-c-badge.pf-m-unread {
1049
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1050
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1051
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
970
+ input.pf-v6-c-label__content {
971
+ overflow: hidden;
972
+ text-overflow: ellipsis;
973
+ white-space: nowrap;
1052
974
  }
1053
975
 
1054
- .pf-v6-c-badge.pf-m-disabled {
1055
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1056
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
976
+ .pf-v6-c-label__icon {
977
+ color: var(--pf-v6-c-label__icon--Color);
1057
978
  }
1058
979
 
1059
- .pf-v6-c-badge.pf-m-disabled::after {
1060
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
980
+ .pf-v6-c-label__actions {
981
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1061
982
  }
1062
983
 
1063
- .pf-v6-c-badge__toggle-icon {
1064
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1065
- color: var(--pf-v6-c-badge__toggle-icon--Color);
984
+ .pf-v6-c-label__actions .pf-v6-c-button {
985
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
986
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
987
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
988
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
989
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
990
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
991
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
992
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1066
993
  }
1067
994
 
1068
995
  .pf-v6-c-menu-toggle {
@@ -1537,6 +1464,79 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1537
1464
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1538
1465
  }
1539
1466
 
1467
+ .pf-v6-c-badge {
1468
+ --pf-v6-c-badge--BorderColor: transparent;
1469
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1470
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1471
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1472
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1473
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1474
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1475
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1476
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1477
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1478
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1479
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1480
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1481
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1482
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1483
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1484
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1485
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1486
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1487
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1488
+ }
1489
+
1490
+ .pf-v6-c-badge {
1491
+ position: relative;
1492
+ display: inline-block;
1493
+ min-width: var(--pf-v6-c-badge--MinWidth);
1494
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1495
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1496
+ font-size: var(--pf-v6-c-badge--FontSize);
1497
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1498
+ color: var(--pf-v6-c-badge--Color);
1499
+ text-align: center;
1500
+ white-space: nowrap;
1501
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1502
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1503
+ }
1504
+
1505
+ .pf-v6-c-badge::after {
1506
+ position: absolute;
1507
+ inset: 0;
1508
+ pointer-events: none;
1509
+ content: "";
1510
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1511
+ border-radius: inherit;
1512
+ }
1513
+
1514
+ .pf-v6-c-badge.pf-m-read {
1515
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1516
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1517
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1518
+ }
1519
+
1520
+ .pf-v6-c-badge.pf-m-unread {
1521
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1522
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1523
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1524
+ }
1525
+
1526
+ .pf-v6-c-badge.pf-m-disabled {
1527
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1528
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1529
+ }
1530
+
1531
+ .pf-v6-c-badge.pf-m-disabled::after {
1532
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1533
+ }
1534
+
1535
+ .pf-v6-c-badge__toggle-icon {
1536
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1537
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1538
+ }
1539
+
1540
1540
  .pf-v6-c-divider {
1541
1541
  --pf-v6-c-divider--Display: flex;
1542
1542
  --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
@@ -2486,134 +2486,19 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2486
2486
  .pf-v6-c-button__progress {
2487
2487
  position: absolute;
2488
2488
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2489
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2490
- line-height: 1;
2491
- color: var(--pf-v6-c-button__progress--Color);
2492
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2493
- }
2494
-
2495
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2496
- --pf-v6-c-spinner--Color: currentcolor;
2497
- }
2498
-
2499
- .pf-v6-c-button__count {
2500
- display: inline-flex;
2501
- align-items: center;
2502
- }
2503
-
2504
- .pf-v6-c-breadcrumb {
2505
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2506
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2507
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2508
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2509
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2510
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2511
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2512
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2513
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2514
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2515
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2516
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2517
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2518
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2519
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2520
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2521
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2522
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2523
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2524
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2525
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2526
- }
2527
-
2528
- .pf-v6-c-breadcrumb {
2529
- display: inline-flex;
2530
- }
2531
-
2532
- .pf-v6-c-breadcrumb__list {
2533
- display: flex;
2534
- flex-wrap: wrap;
2535
- align-items: center;
2536
- }
2537
-
2538
- .pf-v6-c-breadcrumb__item {
2539
- display: flex;
2540
- align-items: baseline;
2541
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2542
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2543
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2544
- white-space: nowrap;
2545
- list-style: none;
2546
- }
2547
-
2548
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2549
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2550
- }
2551
-
2552
- .pf-v6-c-breadcrumb__item:not(:last-child) {
2553
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2554
- }
2555
-
2556
- .pf-v6-c-breadcrumb__item-divider {
2557
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2558
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2559
- line-height: 1;
2560
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2561
- }
2562
-
2563
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2564
- scale: -1 1;
2565
- }
2566
-
2567
- .pf-v6-c-breadcrumb__link {
2568
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2569
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2570
- font-size: inherit;
2571
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2572
- line-height: inherit;
2573
- color: var(--pf-v6-c-breadcrumb__link--Color);
2574
- text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2575
- word-break: break-word;
2576
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2577
- }
2578
-
2579
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2580
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2581
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2582
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2583
- }
2584
-
2585
- .pf-v6-c-breadcrumb__link.pf-m-current {
2586
- cursor: default;
2587
- }
2588
-
2589
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2590
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2591
- text-decoration: none;
2592
- }
2593
-
2594
- button.pf-v6-c-breadcrumb__link {
2595
- border: none;
2596
- }
2597
-
2598
- .pf-v6-c-breadcrumb__dropdown {
2599
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2600
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2601
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2602
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2603
- }
2604
-
2605
- .pf-v6-c-breadcrumb__heading {
2606
- display: inline;
2607
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2489
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2490
+ line-height: 1;
2491
+ color: var(--pf-v6-c-button__progress--Color);
2492
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2608
2493
  }
2609
2494
 
2610
- .pf-v6-c-breadcrumb__link,
2611
- .pf-v6-c-breadcrumb__heading {
2612
- white-space: normal;
2495
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2496
+ --pf-v6-c-spinner--Color: currentcolor;
2613
2497
  }
2614
2498
 
2615
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2616
- display: none;
2499
+ .pf-v6-c-button__count {
2500
+ display: inline-flex;
2501
+ align-items: center;
2617
2502
  }
2618
2503
 
2619
2504
  .pf-v6-c-menu {
@@ -3252,87 +3137,121 @@ button.pf-v6-c-breadcrumb__link {
3252
3137
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3253
3138
  }
3254
3139
 
3255
- .pf-v6-c-spinner {
3256
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3257
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3258
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3259
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3260
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3261
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3262
- --pf-v6-c-spinner--StrokeWidth: 10;
3263
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3264
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3265
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3266
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3267
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3268
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3269
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3140
+ .pf-v6-c-breadcrumb {
3141
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3142
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3143
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3144
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3145
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3146
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3147
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3148
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3149
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3150
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3151
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3152
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3153
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3154
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3155
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3156
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3157
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3158
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3159
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3160
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3161
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3270
3162
  }
3271
3163
 
3272
- .pf-v6-c-spinner {
3273
- width: var(--pf-v6-c-spinner--Width);
3274
- height: var(--pf-v6-c-spinner--Height);
3275
- overflow: hidden;
3276
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3164
+ .pf-v6-c-breadcrumb {
3165
+ display: inline-flex;
3277
3166
  }
3278
3167
 
3279
- .pf-v6-c-spinner.pf-m-inline {
3280
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3168
+ .pf-v6-c-breadcrumb__list {
3169
+ display: flex;
3170
+ flex-wrap: wrap;
3171
+ align-items: center;
3281
3172
  }
3282
3173
 
3283
- .pf-v6-c-spinner.pf-m-sm {
3284
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3174
+ .pf-v6-c-breadcrumb__item {
3175
+ display: flex;
3176
+ align-items: baseline;
3177
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3178
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3179
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3180
+ white-space: nowrap;
3181
+ list-style: none;
3285
3182
  }
3286
3183
 
3287
- .pf-v6-c-spinner.pf-m-md {
3288
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3184
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3185
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3289
3186
  }
3290
3187
 
3291
- .pf-v6-c-spinner.pf-m-lg {
3292
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3188
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3189
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3293
3190
  }
3294
3191
 
3295
- .pf-v6-c-spinner.pf-m-xl {
3296
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3192
+ .pf-v6-c-breadcrumb__item-divider {
3193
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3194
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3195
+ line-height: 1;
3196
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3297
3197
  }
3298
3198
 
3299
- .pf-v6-c-spinner__path {
3300
- width: 100%;
3301
- height: 100%;
3302
- stroke: var(--pf-v6-c-spinner--Color);
3303
- stroke-dasharray: 283;
3304
- stroke-dashoffset: 280;
3305
- stroke-linecap: round;
3306
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3307
- transform-origin: 50% 50%;
3308
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3199
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3200
+ scale: -1 1;
3309
3201
  }
3310
3202
 
3311
- @keyframes pf-v6-c-spinner-animation-rotate {
3312
- 0% {
3313
- transform: rotate(0deg);
3314
- }
3315
- 100% {
3316
- transform: rotate(360deg);
3317
- }
3203
+ .pf-v6-c-breadcrumb__link {
3204
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3205
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3206
+ font-size: inherit;
3207
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3208
+ line-height: inherit;
3209
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3210
+ text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3211
+ word-break: break-word;
3212
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3318
3213
  }
3319
- @keyframes pf-v6-c-spinner-animation-dash {
3320
- 0% {
3321
- stroke-dashoffset: 280;
3322
- transform: rotate(0);
3323
- }
3324
- 15% {
3325
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3326
- }
3327
- 40% {
3328
- stroke-dasharray: 220;
3329
- stroke-dashoffset: 150;
3330
- }
3331
- 100% {
3332
- stroke-dashoffset: 280;
3333
- transform: rotate(720deg);
3334
- }
3214
+
3215
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3216
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3217
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3218
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3219
+ }
3220
+
3221
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3222
+ cursor: default;
3223
+ }
3224
+
3225
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3226
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3227
+ text-decoration: none;
3228
+ }
3229
+
3230
+ button.pf-v6-c-breadcrumb__link {
3231
+ border: none;
3232
+ }
3233
+
3234
+ .pf-v6-c-breadcrumb__dropdown {
3235
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3236
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3237
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3238
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3239
+ }
3240
+
3241
+ .pf-v6-c-breadcrumb__heading {
3242
+ display: inline;
3243
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3244
+ }
3245
+
3246
+ .pf-v6-c-breadcrumb__link,
3247
+ .pf-v6-c-breadcrumb__heading {
3248
+ white-space: normal;
3249
+ }
3250
+
3251
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3252
+ display: none;
3335
3253
  }
3254
+
3336
3255
  .pf-v6-c-tooltip {
3337
3256
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3338
3257
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3462,4 +3381,86 @@ button.pf-v6-c-breadcrumb__link {
3462
3381
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3463
3382
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3464
3383
  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));
3384
+ }
3385
+
3386
+ .pf-v6-c-spinner {
3387
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3388
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3389
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3390
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3391
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3392
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3393
+ --pf-v6-c-spinner--StrokeWidth: 10;
3394
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3395
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3396
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3397
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3398
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3399
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3400
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3401
+ }
3402
+
3403
+ .pf-v6-c-spinner {
3404
+ width: var(--pf-v6-c-spinner--Width);
3405
+ height: var(--pf-v6-c-spinner--Height);
3406
+ overflow: hidden;
3407
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3408
+ }
3409
+
3410
+ .pf-v6-c-spinner.pf-m-inline {
3411
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3412
+ }
3413
+
3414
+ .pf-v6-c-spinner.pf-m-sm {
3415
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3416
+ }
3417
+
3418
+ .pf-v6-c-spinner.pf-m-md {
3419
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3420
+ }
3421
+
3422
+ .pf-v6-c-spinner.pf-m-lg {
3423
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3424
+ }
3425
+
3426
+ .pf-v6-c-spinner.pf-m-xl {
3427
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3428
+ }
3429
+
3430
+ .pf-v6-c-spinner__path {
3431
+ width: 100%;
3432
+ height: 100%;
3433
+ stroke: var(--pf-v6-c-spinner--Color);
3434
+ stroke-dasharray: 283;
3435
+ stroke-dashoffset: 280;
3436
+ stroke-linecap: round;
3437
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3438
+ transform-origin: 50% 50%;
3439
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3440
+ }
3441
+
3442
+ @keyframes pf-v6-c-spinner-animation-rotate {
3443
+ 0% {
3444
+ transform: rotate(0deg);
3445
+ }
3446
+ 100% {
3447
+ transform: rotate(360deg);
3448
+ }
3449
+ }
3450
+ @keyframes pf-v6-c-spinner-animation-dash {
3451
+ 0% {
3452
+ stroke-dashoffset: 280;
3453
+ transform: rotate(0);
3454
+ }
3455
+ 15% {
3456
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3457
+ }
3458
+ 40% {
3459
+ stroke-dasharray: 220;
3460
+ stroke-dashoffset: 150;
3461
+ }
3462
+ 100% {
3463
+ stroke-dashoffset: 280;
3464
+ transform: rotate(720deg);
3465
+ }
3465
3466
  }