@patternfly/react-templates 6.2.1-prerelease.9 → 6.2.2

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 (32) hide show
  1. package/CHANGELOG.md +2 -12
  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/esm/components/Dropdown/SimpleDropdown.d.ts +1 -1
  6. package/dist/esm/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  7. package/dist/esm/components/Select/CheckboxSelect.d.ts +1 -1
  8. package/dist/esm/components/Select/CheckboxSelect.d.ts.map +1 -1
  9. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts +1 -1
  10. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  11. package/dist/esm/components/Select/SimpleSelect.d.ts +1 -1
  12. package/dist/esm/components/Select/SimpleSelect.d.ts.map +1 -1
  13. package/dist/esm/components/Select/TypeaheadSelect.d.ts +1 -1
  14. package/dist/esm/components/Select/TypeaheadSelect.d.ts.map +1 -1
  15. package/dist/js/components/Dropdown/SimpleDropdown.d.ts +1 -1
  16. package/dist/js/components/Dropdown/SimpleDropdown.d.ts.map +1 -1
  17. package/dist/js/components/Select/CheckboxSelect.d.ts +1 -1
  18. package/dist/js/components/Select/CheckboxSelect.d.ts.map +1 -1
  19. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts +1 -1
  20. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  21. package/dist/js/components/Select/SimpleSelect.d.ts +1 -1
  22. package/dist/js/components/Select/SimpleSelect.d.ts.map +1 -1
  23. package/dist/js/components/Select/TypeaheadSelect.d.ts +1 -1
  24. package/dist/js/components/Select/TypeaheadSelect.d.ts.map +1 -1
  25. package/dist/umd/assets/{output-347m9OAQ.css → output-a09nbBE8.css} +939 -939
  26. package/dist/umd/react-templates.min.js +1 -1
  27. package/package.json +6 -6
  28. package/src/components/Dropdown/SimpleDropdown.tsx +1 -1
  29. package/src/components/Select/CheckboxSelect.tsx +1 -1
  30. package/src/components/Select/MultiTypeaheadSelect.tsx +1 -1
  31. package/src/components/Select/SimpleSelect.tsx +1 -1
  32. package/src/components/Select/TypeaheadSelect.tsx +1 -1
package/dist/umd/assets/{output-347m9OAQ.css → output-a09nbBE8.css} RENAMED
@@ -3,379 +3,86 @@
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);
44
- }
45
-
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);
52
- }
53
-
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);
62
- }
63
-
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);
72
- }
73
-
74
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
75
- align-items: flex-start;
76
- }
77
-
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);
82
- }
83
-
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);
6
+ .pf-v6-c-check {
7
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
87
21
  }
88
22
 
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;
23
+ .pf-v6-c-check {
24
+ display: grid;
25
+ grid-template-columns: auto 1fr;
26
+ grid-gap: var(--pf-v6-c-check--GridGap);
27
+ accent-color: var(--pf-v6-c-check--AccentColor);
93
28
  }
94
29
 
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;
30
+ .pf-v6-c-check.pf-m-standalone {
31
+ display: inline-grid;
32
+ grid-template-columns: auto;
33
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
100
34
  }
101
35
 
102
- .pf-v6-c-label-group__main {
103
- display: flex;
104
- flex: 1;
105
- 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);
36
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
+ align-self: center;
38
+ transform: none;
110
39
  }
111
40
 
112
- .pf-v6-c-label-group__list {
113
- 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);
41
+ .pf-v6-c-check__input {
42
+ align-self: start;
43
+ font-size: var(--pf-v6-c-check__label--FontSize);
44
+ line-height: var(--pf-v6-c-check__label--LineHeight);
45
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
118
46
  }
119
47
 
120
- .pf-v6-c-label-group__list-item {
121
- display: inline-flex;
122
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
48
+ .pf-v6-c-check__label {
49
+ font-size: var(--pf-v6-c-check__label--FontSize);
50
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
51
+ line-height: var(--pf-v6-c-check__label--LineHeight);
52
+ color: var(--pf-v6-c-check__label--Color);
123
53
  }
124
54
 
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);
55
+ .pf-v6-c-check__description {
56
+ grid-column: 2;
57
+ font-size: var(--pf-v6-c-check__description--FontSize);
58
+ color: var(--pf-v6-c-check__description--Color);
130
59
  }
131
60
 
132
- .pf-v6-c-label-group__close {
133
- display: flex;
134
- align-self: flex-start;
61
+ .pf-v6-c-check__body {
62
+ grid-column: 2;
135
63
  }
136
64
 
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);
65
+ .pf-v6-c-check__label,
66
+ .pf-v6-c-check__input {
67
+ justify-self: start;
143
68
  }
144
69
 
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;
70
+ label.pf-v6-c-check, .pf-v6-c-check__label,
71
+ .pf-v6-c-check__input {
72
+ cursor: pointer;
156
73
  }
157
74
 
158
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
- display: none;
75
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
+ .pf-v6-c-check__input:disabled,
77
+ .pf-v6-c-check__input.pf-m-disabled {
78
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
+ cursor: not-allowed;
160
80
  }
161
81
 
162
- .pf-v6-c-text-input-group {
163
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
164
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
165
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
166
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
167
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
168
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
169
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
170
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
171
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
172
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
173
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
174
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
175
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
176
- --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));
177
- --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));
178
- --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));
179
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
180
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
181
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
182
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
183
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
184
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
185
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
186
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
187
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
188
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
189
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
190
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
191
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
192
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
193
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
194
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
195
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
196
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
197
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
198
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
199
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
200
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
201
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
202
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
203
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
204
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
205
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
206
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
207
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
208
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
209
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
210
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
211
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
212
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
213
- }
214
-
215
- .pf-v6-c-text-input-group {
216
- position: relative;
217
- display: flex;
218
- width: 100%;
219
- font-size: var(--pf-v6-c-text-input-group__FontSize);
220
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
221
- color: var(--pf-v6-c-text-input-group--Color, inherit);
222
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
223
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
224
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
225
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
226
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
227
- }
228
-
229
- .pf-v6-c-text-input-group::before {
230
- position: absolute;
231
- inset: 0;
232
- pointer-events: none;
233
- content: "";
234
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
235
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
236
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
237
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
238
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
239
- }
240
-
241
- .pf-v6-c-text-input-group.pf-m-disabled {
242
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
243
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
244
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
245
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
246
- pointer-events: none;
247
- }
248
-
249
- .pf-v6-c-text-input-group.pf-m-plain {
250
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
251
- }
252
-
253
- .pf-v6-c-text-input-group.pf-m-plain::before {
254
- border: 0;
255
- }
256
-
257
- .pf-v6-c-text-input-group.pf-m-success {
258
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
259
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
260
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
261
- }
262
-
263
- .pf-v6-c-text-input-group.pf-m-warning {
264
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
265
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
266
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
267
- }
268
-
269
- .pf-v6-c-text-input-group.pf-m-error {
270
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
271
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
272
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
273
- }
274
-
275
- .pf-v6-c-text-input-group:hover {
276
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
277
- }
278
-
279
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
280
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
281
- }
282
-
283
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
284
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
285
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
286
- }
287
-
288
- .pf-v6-c-text-input-group__main {
289
- display: flex;
290
- flex: 1;
291
- flex-wrap: wrap;
292
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
293
- min-width: 0;
294
- }
295
-
296
- .pf-v6-c-text-input-group__main.pf-m-icon {
297
- --pf-v6-c-text-input-group__text--Position: relative;
298
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
299
- display: inline-flex;
300
- align-items: center;
301
- justify-content: center;
302
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
303
- }
304
-
305
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
306
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
307
- }
308
-
309
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
310
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
311
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
312
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
313
- }
314
-
315
- .pf-v6-c-text-input-group__text {
316
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
317
- display: inline-grid;
318
- flex: 1;
319
- grid-template-areas: "text-input";
320
- grid-template-columns: 1fr;
321
- }
322
-
323
- .pf-v6-c-text-input-group__icon {
324
- position: absolute;
325
- inset-block-start: 50%;
326
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
327
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
328
- color: var(--pf-v6-c-text-input-group__icon--Color);
329
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
330
- }
331
-
332
- .pf-v6-c-text-input-group__icon.pf-m-status {
333
- inset-inline-start: auto;
334
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
335
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
336
- }
337
-
338
- .pf-v6-c-text-input-group__text-input {
339
- overflow: hidden;
340
- text-overflow: ellipsis;
341
- white-space: nowrap;
342
- position: relative;
343
- width: 100%;
344
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
345
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
346
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
347
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
348
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
349
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
350
- border: 0;
351
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
352
- }
353
-
354
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
355
- grid-area: text-input;
356
- }
357
-
358
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
359
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
360
- }
361
-
362
- .pf-v6-c-text-input-group__text-input::placeholder {
363
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
364
- }
365
-
366
- .pf-v6-c-text-input-group__utilities {
367
- display: flex;
368
- align-items: center;
369
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
370
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
371
- }
372
-
373
- .pf-v6-c-text-input-group__utilities > * + * {
374
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
375
- }
376
-
377
- .pf-v6-c-text-input-group__group {
378
- display: flex;
82
+ .pf-v6-c-check__label-required {
83
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
85
+ color: var(--pf-v6-c-check__label-required--Color);
379
86
  }
380
87
 
381
88
  .pf-v6-c-menu-toggle {
@@ -898,159 +605,223 @@
898
605
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
899
606
  }
900
607
 
901
- .pf-v6-c-badge {
902
- --pf-v6-c-badge--BorderColor: transparent;
903
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
904
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
905
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
906
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
907
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
908
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
909
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
910
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
911
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
912
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
913
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
914
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
915
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
916
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
917
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
918
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
919
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
920
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
921
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
608
+ .pf-v6-c-text-input-group {
609
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
610
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
611
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
612
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
613
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
614
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
615
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
616
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
617
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
618
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
619
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
620
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
621
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
622
+ --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));
623
+ --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));
624
+ --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));
625
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
626
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
627
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
628
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
629
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
630
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
631
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
632
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
633
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
634
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
635
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
636
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
637
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
638
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
639
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
640
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
641
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
642
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
643
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
644
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
645
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
646
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
647
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
648
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
649
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
650
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
651
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
652
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
653
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
654
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
655
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
656
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
657
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
658
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
922
659
  }
923
660
 
924
- .pf-v6-c-badge {
661
+ .pf-v6-c-text-input-group {
925
662
  position: relative;
926
- display: inline-block;
927
- min-width: var(--pf-v6-c-badge--MinWidth);
928
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
929
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
930
- font-size: var(--pf-v6-c-badge--FontSize);
931
- font-weight: var(--pf-v6-c-badge--FontWeight);
932
- color: var(--pf-v6-c-badge--Color);
933
- text-align: center;
934
- white-space: nowrap;
935
- background-color: var(--pf-v6-c-badge--BackgroundColor);
936
- border-radius: var(--pf-v6-c-badge--BorderRadius);
663
+ display: flex;
664
+ width: 100%;
665
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
666
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
667
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
668
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
669
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
670
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
671
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
672
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
937
673
  }
938
674
 
939
- .pf-v6-c-badge::after {
675
+ .pf-v6-c-text-input-group::before {
940
676
  position: absolute;
941
677
  inset: 0;
942
678
  pointer-events: none;
943
679
  content: "";
944
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
945
- border-radius: inherit;
946
- }
947
-
948
- .pf-v6-c-badge.pf-m-read {
949
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
950
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
951
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
680
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
681
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
682
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
683
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
684
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
952
685
  }
953
686
 
954
- .pf-v6-c-badge.pf-m-unread {
955
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
956
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
957
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
687
+ .pf-v6-c-text-input-group.pf-m-disabled {
688
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
689
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
690
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
691
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
692
+ pointer-events: none;
958
693
  }
959
694
 
960
- .pf-v6-c-badge.pf-m-disabled {
961
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
962
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
695
+ .pf-v6-c-text-input-group.pf-m-plain {
696
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
963
697
  }
964
698
 
965
- .pf-v6-c-badge.pf-m-disabled::after {
966
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
699
+ .pf-v6-c-text-input-group.pf-m-plain::before {
700
+ border: 0;
967
701
  }
968
702
 
969
- .pf-v6-c-badge__toggle-icon {
970
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
971
- color: var(--pf-v6-c-badge__toggle-icon--Color);
703
+ .pf-v6-c-text-input-group.pf-m-success {
704
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
705
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
706
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
972
707
  }
973
708
 
974
- .pf-v6-c-check {
975
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
976
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
977
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
978
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
979
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
980
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
981
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
982
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
983
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
984
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
985
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
986
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
987
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
988
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
709
+ .pf-v6-c-text-input-group.pf-m-warning {
710
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
711
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
712
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
989
713
  }
990
714
 
991
- .pf-v6-c-check {
992
- display: grid;
993
- grid-template-columns: auto 1fr;
994
- grid-gap: var(--pf-v6-c-check--GridGap);
995
- accent-color: var(--pf-v6-c-check--AccentColor);
715
+ .pf-v6-c-text-input-group.pf-m-error {
716
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
717
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
718
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
996
719
  }
997
720
 
998
- .pf-v6-c-check.pf-m-standalone {
721
+ .pf-v6-c-text-input-group:hover {
722
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
723
+ }
724
+
725
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
726
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
727
+ }
728
+
729
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
730
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
731
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
732
+ }
733
+
734
+ .pf-v6-c-text-input-group__main {
735
+ display: flex;
736
+ flex: 1;
737
+ flex-wrap: wrap;
738
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
739
+ min-width: 0;
740
+ }
741
+
742
+ .pf-v6-c-text-input-group__main.pf-m-icon {
743
+ --pf-v6-c-text-input-group__text--Position: relative;
744
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
745
+ display: inline-flex;
746
+ align-items: center;
747
+ justify-content: center;
748
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
749
+ }
750
+
751
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
752
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
753
+ }
754
+
755
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
756
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
757
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
758
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
759
+ }
760
+
761
+ .pf-v6-c-text-input-group__text {
762
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
999
763
  display: inline-grid;
1000
- grid-template-columns: auto;
1001
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
764
+ flex: 1;
765
+ grid-template-areas: "text-input";
766
+ grid-template-columns: 1fr;
1002
767
  }
1003
768
 
1004
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1005
- align-self: center;
1006
- transform: none;
769
+ .pf-v6-c-text-input-group__icon {
770
+ position: absolute;
771
+ inset-block-start: 50%;
772
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
773
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
774
+ color: var(--pf-v6-c-text-input-group__icon--Color);
775
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1007
776
  }
1008
777
 
1009
- .pf-v6-c-check__input {
1010
- align-self: start;
1011
- font-size: var(--pf-v6-c-check__label--FontSize);
1012
- line-height: var(--pf-v6-c-check__label--LineHeight);
1013
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
778
+ .pf-v6-c-text-input-group__icon.pf-m-status {
779
+ inset-inline-start: auto;
780
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
781
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1014
782
  }
1015
783
 
1016
- .pf-v6-c-check__label {
1017
- font-size: var(--pf-v6-c-check__label--FontSize);
1018
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1019
- line-height: var(--pf-v6-c-check__label--LineHeight);
1020
- color: var(--pf-v6-c-check__label--Color);
784
+ .pf-v6-c-text-input-group__text-input {
785
+ overflow: hidden;
786
+ text-overflow: ellipsis;
787
+ white-space: nowrap;
788
+ position: relative;
789
+ width: 100%;
790
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
791
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
792
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
793
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
794
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
795
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
796
+ border: 0;
797
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1021
798
  }
1022
799
 
1023
- .pf-v6-c-check__description {
1024
- grid-column: 2;
1025
- font-size: var(--pf-v6-c-check__description--FontSize);
1026
- color: var(--pf-v6-c-check__description--Color);
800
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
801
+ grid-area: text-input;
1027
802
  }
1028
803
 
1029
- .pf-v6-c-check__body {
1030
- grid-column: 2;
804
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
805
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1031
806
  }
1032
807
 
1033
- .pf-v6-c-check__label,
1034
- .pf-v6-c-check__input {
1035
- justify-self: start;
808
+ .pf-v6-c-text-input-group__text-input::placeholder {
809
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1036
810
  }
1037
811
 
1038
- label.pf-v6-c-check, .pf-v6-c-check__label,
1039
- .pf-v6-c-check__input {
1040
- cursor: pointer;
812
+ .pf-v6-c-text-input-group__utilities {
813
+ display: flex;
814
+ align-items: center;
815
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
816
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1041
817
  }
1042
818
 
1043
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1044
- .pf-v6-c-check__input:disabled,
1045
- .pf-v6-c-check__input.pf-m-disabled {
1046
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1047
- cursor: not-allowed;
819
+ .pf-v6-c-text-input-group__utilities > * + * {
820
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1048
821
  }
1049
822
 
1050
- .pf-v6-c-check__label-required {
1051
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1052
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1053
- color: var(--pf-v6-c-check__label-required--Color);
823
+ .pf-v6-c-text-input-group__group {
824
+ display: flex;
1054
825
  }
1055
826
 
1056
827
  .pf-v6-c-label {
@@ -1586,79 +1357,395 @@ input.pf-v6-c-label__content {
1586
1357
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1587
1358
  }
1588
1359
 
1589
- .pf-v6-c-button {
1590
- --pf-v6-c-button--Display: inline-flex;
1591
- --pf-v6-c-button--AlignItems: baseline;
1592
- --pf-v6-c-button--JustifyContent: center;
1593
- --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1594
- --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1595
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1596
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1597
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1598
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1599
- --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1600
- --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1601
- --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1602
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1603
- --pf-v6-c-button--BackgroundColor: transparent;
1604
- --pf-v6-c-button--BorderColor: transparent;
1605
- --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1606
- --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1607
- --pf-v6-c-button--TextDecorationLine: none;
1608
- --pf-v6-c-button--TextDecorationStyle: none;
1609
- --pf-v6-c-button--TextDecorationColor: currentcolor;
1610
- --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1611
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1612
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1613
- --pf-v6-c-button--hover--BackgroundColor: transparent;
1614
- --pf-v6-c-button--hover--BorderColor: transparent;
1615
- --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1616
- --pf-v6-c-button--hover--TextDecorationLine: none;
1617
- --pf-v6-c-button--hover--TextDecorationStyle: none;
1618
- --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
1619
- --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1620
- --pf-v6-c-button--m-clicked--BorderColor: transparent;
1621
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1622
- --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1623
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1624
- --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1625
- --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1626
- --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1627
- --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1628
- --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
1629
- --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1630
- --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1631
- --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1632
- --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1633
- --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1634
- --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1635
- --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1636
- --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1637
- --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1638
- --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1639
- --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1640
- --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1641
- --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1642
- --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1643
- --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1644
- --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1645
- --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1646
- --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1647
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1648
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
1649
- --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
1650
- --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
1651
- --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
1652
- --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1653
- --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1654
- --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1655
- --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
1656
- --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1657
- --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1658
- --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1659
- --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1660
- --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
1661
- --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1360
+ .pf-v6-c-divider {
1361
+ --pf-v6-c-divider--Display: flex;
1362
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1363
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1364
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1365
+ }
1366
+
1367
+ .pf-v6-c-divider {
1368
+ flex-direction: row;
1369
+ width: 100%;
1370
+ height: var(--pf-v6-c-divider--Size);
1371
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1372
+ --pf-v6-hidden-visible--hidden--Display: none;
1373
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1374
+ display: var(--pf-v6-hidden-visible--Display);
1375
+ flex-shrink: 0;
1376
+ align-items: stretch;
1377
+ align-self: stretch;
1378
+ justify-content: center;
1379
+ border: 0;
1380
+ }
1381
+
1382
+ .pf-v6-c-divider.pf-m-hidden {
1383
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1384
+ }
1385
+
1386
+ @media screen and (min-width: 36rem) {
1387
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1388
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1389
+ }
1390
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1391
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1392
+ }
1393
+ }
1394
+ @media screen and (min-width: 48rem) {
1395
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1396
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1397
+ }
1398
+ .pf-v6-c-divider.pf-m-visible-on-md {
1399
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1400
+ }
1401
+ }
1402
+ @media screen and (min-width: 62rem) {
1403
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1404
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1405
+ }
1406
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1407
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1408
+ }
1409
+ }
1410
+ @media screen and (min-width: 75rem) {
1411
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1412
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1413
+ }
1414
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1415
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1416
+ }
1417
+ }
1418
+ @media screen and (min-width: 90.625rem) {
1419
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1420
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1421
+ }
1422
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1423
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1424
+ }
1425
+ }
1426
+ .pf-v6-c-divider::before {
1427
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1428
+ content: "";
1429
+ background-color: var(--pf-v6-c-divider--Color);
1430
+ }
1431
+
1432
+ .pf-v6-c-divider.pf-m-horizontal {
1433
+ flex-direction: row;
1434
+ width: 100%;
1435
+ height: var(--pf-v6-c-divider--Size);
1436
+ }
1437
+
1438
+ .pf-v6-c-divider.pf-m-vertical {
1439
+ flex-direction: column;
1440
+ width: var(--pf-v6-c-divider--Size);
1441
+ height: inherit;
1442
+ }
1443
+
1444
+ .pf-v6-c-divider.pf-m-inset-none {
1445
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1446
+ }
1447
+
1448
+ .pf-v6-c-divider.pf-m-inset-xs {
1449
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1450
+ }
1451
+
1452
+ .pf-v6-c-divider.pf-m-inset-sm {
1453
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1454
+ }
1455
+
1456
+ .pf-v6-c-divider.pf-m-inset-md {
1457
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1458
+ }
1459
+
1460
+ .pf-v6-c-divider.pf-m-inset-lg {
1461
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1462
+ }
1463
+
1464
+ .pf-v6-c-divider.pf-m-inset-xl {
1465
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1466
+ }
1467
+
1468
+ .pf-v6-c-divider.pf-m-inset-2xl {
1469
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1470
+ }
1471
+
1472
+ .pf-v6-c-divider.pf-m-inset-3xl {
1473
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1474
+ }
1475
+
1476
+ @media (min-width: 36rem) {
1477
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1478
+ flex-direction: row;
1479
+ width: 100%;
1480
+ height: var(--pf-v6-c-divider--Size);
1481
+ }
1482
+ }
1483
+ @media (min-width: 36rem) {
1484
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1485
+ flex-direction: column;
1486
+ width: var(--pf-v6-c-divider--Size);
1487
+ height: inherit;
1488
+ }
1489
+ }
1490
+ @media (min-width: 36rem) {
1491
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1492
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1493
+ }
1494
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1495
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1496
+ }
1497
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1498
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1499
+ }
1500
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1501
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1502
+ }
1503
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1504
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1505
+ }
1506
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1507
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1508
+ }
1509
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1510
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1511
+ }
1512
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1513
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1514
+ }
1515
+ }
1516
+ @media (min-width: 48rem) {
1517
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1518
+ flex-direction: row;
1519
+ width: 100%;
1520
+ height: var(--pf-v6-c-divider--Size);
1521
+ }
1522
+ }
1523
+ @media (min-width: 48rem) {
1524
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1525
+ flex-direction: column;
1526
+ width: var(--pf-v6-c-divider--Size);
1527
+ height: inherit;
1528
+ }
1529
+ }
1530
+ @media (min-width: 48rem) {
1531
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
1532
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1533
+ }
1534
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
1535
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1536
+ }
1537
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
1538
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1539
+ }
1540
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
1541
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1542
+ }
1543
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
1544
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1545
+ }
1546
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
1547
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1548
+ }
1549
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1550
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1551
+ }
1552
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1553
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1554
+ }
1555
+ }
1556
+ @media (min-width: 62rem) {
1557
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1558
+ flex-direction: row;
1559
+ width: 100%;
1560
+ height: var(--pf-v6-c-divider--Size);
1561
+ }
1562
+ }
1563
+ @media (min-width: 62rem) {
1564
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1565
+ flex-direction: column;
1566
+ width: var(--pf-v6-c-divider--Size);
1567
+ height: inherit;
1568
+ }
1569
+ }
1570
+ @media (min-width: 62rem) {
1571
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1572
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1573
+ }
1574
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1575
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1576
+ }
1577
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1578
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1579
+ }
1580
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
1581
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1582
+ }
1583
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1584
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1585
+ }
1586
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1587
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1588
+ }
1589
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1590
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1591
+ }
1592
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1593
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1594
+ }
1595
+ }
1596
+ @media (min-width: 75rem) {
1597
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1598
+ flex-direction: row;
1599
+ width: 100%;
1600
+ height: var(--pf-v6-c-divider--Size);
1601
+ }
1602
+ }
1603
+ @media (min-width: 75rem) {
1604
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1605
+ flex-direction: column;
1606
+ width: var(--pf-v6-c-divider--Size);
1607
+ height: inherit;
1608
+ }
1609
+ }
1610
+ @media (min-width: 75rem) {
1611
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1612
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1613
+ }
1614
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1615
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1616
+ }
1617
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1618
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1619
+ }
1620
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1621
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1622
+ }
1623
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1624
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1625
+ }
1626
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1627
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1628
+ }
1629
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1630
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1631
+ }
1632
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1633
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1634
+ }
1635
+ }
1636
+ @media (min-width: 90.625rem) {
1637
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1638
+ flex-direction: row;
1639
+ width: 100%;
1640
+ height: var(--pf-v6-c-divider--Size);
1641
+ }
1642
+ }
1643
+ @media (min-width: 90.625rem) {
1644
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1645
+ flex-direction: column;
1646
+ width: var(--pf-v6-c-divider--Size);
1647
+ height: inherit;
1648
+ }
1649
+ }
1650
+ @media (min-width: 90.625rem) {
1651
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1652
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1653
+ }
1654
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1655
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1656
+ }
1657
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1658
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1659
+ }
1660
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1661
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1662
+ }
1663
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1664
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1665
+ }
1666
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1667
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1668
+ }
1669
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1670
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1671
+ }
1672
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1673
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1674
+ }
1675
+ }
1676
+ .pf-v6-c-button {
1677
+ --pf-v6-c-button--Display: inline-flex;
1678
+ --pf-v6-c-button--AlignItems: baseline;
1679
+ --pf-v6-c-button--JustifyContent: center;
1680
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1681
+ --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1682
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1683
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1684
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1685
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1686
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1687
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1688
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1689
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1690
+ --pf-v6-c-button--BackgroundColor: transparent;
1691
+ --pf-v6-c-button--BorderColor: transparent;
1692
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1693
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1694
+ --pf-v6-c-button--TextDecorationLine: none;
1695
+ --pf-v6-c-button--TextDecorationStyle: none;
1696
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
1697
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1698
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1699
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1700
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
1701
+ --pf-v6-c-button--hover--BorderColor: transparent;
1702
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1703
+ --pf-v6-c-button--hover--TextDecorationLine: none;
1704
+ --pf-v6-c-button--hover--TextDecorationStyle: none;
1705
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
1706
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1707
+ --pf-v6-c-button--m-clicked--BorderColor: transparent;
1708
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1709
+ --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1710
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1711
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1712
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1713
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1714
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1715
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
1716
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1717
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1718
+ --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1719
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1720
+ --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1721
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1722
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1723
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1724
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1725
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1726
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1727
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1728
+ --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1729
+ --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1730
+ --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1731
+ --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1732
+ --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1733
+ --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1734
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1735
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
1736
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
1737
+ --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
1738
+ --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
1739
+ --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1740
+ --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1741
+ --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1742
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
1743
+ --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1744
+ --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1745
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1746
+ --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1747
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
1748
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1662
1749
  --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1663
1750
  --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
1664
1751
  --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
@@ -2298,322 +2385,235 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2298
2385
  transform: scale(1.5);
2299
2386
  }
2300
2387
  }
2301
- .pf-v6-c-divider {
2302
- --pf-v6-c-divider--Display: flex;
2303
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2304
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2305
- --pf-v6-c-divider--before--FlexBasis: 100%;
2388
+ .pf-v6-c-label-group {
2389
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2390
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2391
+ --pf-v6-c-label-group--MaxWidth: 100%;
2392
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2393
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2394
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2395
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2396
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2397
+ --pf-v6-c-label-group__main--MinWidth: 0;
2398
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2399
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2400
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2401
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2402
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2403
+ --pf-v6-c-label-group__list--MinWidth: 0;
2404
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2405
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2406
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2407
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2408
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2409
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2410
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2411
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2412
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2413
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2414
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2415
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2416
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2417
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2418
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2419
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2420
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2421
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2422
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2423
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2424
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2425
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2306
2426
  }
2307
2427
 
2308
- .pf-v6-c-divider {
2309
- flex-direction: row;
2310
- width: 100%;
2311
- height: var(--pf-v6-c-divider--Size);
2312
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2313
- --pf-v6-hidden-visible--hidden--Display: none;
2314
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2315
- display: var(--pf-v6-hidden-visible--Display);
2316
- flex-shrink: 0;
2317
- align-items: stretch;
2318
- align-self: stretch;
2319
- justify-content: center;
2320
- border: 0;
2428
+ .pf-v6-c-label-group {
2429
+ display: inline-flex;
2430
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2431
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2432
+ align-items: center;
2433
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2321
2434
  }
2322
2435
 
2323
- .pf-v6-c-divider.pf-m-hidden {
2324
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2436
+ .pf-v6-c-label-group.pf-m-category {
2437
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2438
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2439
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2440
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2441
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2442
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2443
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2325
2444
  }
2326
2445
 
2327
- @media screen and (min-width: 36rem) {
2328
- .pf-v6-c-divider.pf-m-hidden-on-sm {
2329
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2330
- }
2331
- .pf-v6-c-divider.pf-m-visible-on-sm {
2332
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2333
- }
2334
- }
2335
- @media screen and (min-width: 48rem) {
2336
- .pf-v6-c-divider.pf-m-hidden-on-md {
2337
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2338
- }
2339
- .pf-v6-c-divider.pf-m-visible-on-md {
2340
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2341
- }
2342
- }
2343
- @media screen and (min-width: 62rem) {
2344
- .pf-v6-c-divider.pf-m-hidden-on-lg {
2345
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2346
- }
2347
- .pf-v6-c-divider.pf-m-visible-on-lg {
2348
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2349
- }
2350
- }
2351
- @media screen and (min-width: 75rem) {
2352
- .pf-v6-c-divider.pf-m-hidden-on-xl {
2353
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2354
- }
2355
- .pf-v6-c-divider.pf-m-visible-on-xl {
2356
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2357
- }
2358
- }
2359
- @media screen and (min-width: 90.625rem) {
2360
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
2361
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2362
- }
2363
- .pf-v6-c-divider.pf-m-visible-on-2xl {
2364
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2365
- }
2366
- }
2367
- .pf-v6-c-divider::before {
2368
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2369
- content: "";
2370
- background-color: var(--pf-v6-c-divider--Color);
2446
+ .pf-v6-c-label-group.pf-m-vertical {
2447
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2448
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2449
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2450
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2451
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2452
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2453
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2371
2454
  }
2372
2455
 
2373
- .pf-v6-c-divider.pf-m-horizontal {
2374
- flex-direction: row;
2375
- width: 100%;
2376
- height: var(--pf-v6-c-divider--Size);
2456
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2457
+ align-items: flex-start;
2377
2458
  }
2378
2459
 
2379
- .pf-v6-c-divider.pf-m-vertical {
2460
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2380
2461
  flex-direction: column;
2381
- width: var(--pf-v6-c-divider--Size);
2382
- height: inherit;
2383
- }
2384
-
2385
- .pf-v6-c-divider.pf-m-inset-none {
2386
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2387
- }
2388
-
2389
- .pf-v6-c-divider.pf-m-inset-xs {
2390
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2391
- }
2392
-
2393
- .pf-v6-c-divider.pf-m-inset-sm {
2394
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2395
- }
2396
-
2397
- .pf-v6-c-divider.pf-m-inset-md {
2398
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2399
- }
2400
-
2401
- .pf-v6-c-divider.pf-m-inset-lg {
2402
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2403
- }
2404
-
2405
- .pf-v6-c-divider.pf-m-inset-xl {
2406
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2407
- }
2408
-
2409
- .pf-v6-c-divider.pf-m-inset-2xl {
2410
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2462
+ align-items: flex-start;
2463
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2411
2464
  }
2412
2465
 
2413
- .pf-v6-c-divider.pf-m-inset-3xl {
2414
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2466
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2467
+ flex-direction: column;
2468
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2415
2469
  }
2416
2470
 
2417
- @media (min-width: 36rem) {
2418
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
2419
- flex-direction: row;
2420
- width: 100%;
2421
- height: var(--pf-v6-c-divider--Size);
2422
- }
2423
- }
2424
- @media (min-width: 36rem) {
2425
- .pf-v6-c-divider.pf-m-vertical-on-sm {
2426
- flex-direction: column;
2427
- width: var(--pf-v6-c-divider--Size);
2428
- height: inherit;
2429
- }
2430
- }
2431
- @media (min-width: 36rem) {
2432
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
2433
- --pf-v6-c-divider--before--FlexBasis: 100%;
2434
- }
2435
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2436
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2437
- }
2438
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2439
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2440
- }
2441
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
2442
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2443
- }
2444
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2445
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2446
- }
2447
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2448
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2449
- }
2450
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2451
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2452
- }
2453
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2454
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2455
- }
2471
+ .pf-v6-c-label-group.pf-m-editable,
2472
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2473
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2474
+ display: flex;
2456
2475
  }
2457
- @media (min-width: 48rem) {
2458
- .pf-v6-c-divider.pf-m-horizontal-on-md {
2459
- flex-direction: row;
2460
- width: 100%;
2461
- height: var(--pf-v6-c-divider--Size);
2462
- }
2476
+
2477
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2478
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2479
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2480
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2481
+ flex: 1;
2463
2482
  }
2464
- @media (min-width: 48rem) {
2465
- .pf-v6-c-divider.pf-m-vertical-on-md {
2466
- flex-direction: column;
2467
- width: var(--pf-v6-c-divider--Size);
2468
- height: inherit;
2469
- }
2483
+
2484
+ .pf-v6-c-label-group__main {
2485
+ display: flex;
2486
+ flex: 1;
2487
+ flex-wrap: wrap;
2488
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2489
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2490
+ align-items: baseline;
2491
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2470
2492
  }
2471
- @media (min-width: 48rem) {
2472
- .pf-v6-c-divider.pf-m-inset-none-on-md {
2473
- --pf-v6-c-divider--before--FlexBasis: 100%;
2474
- }
2475
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
2476
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2477
- }
2478
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
2479
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2480
- }
2481
- .pf-v6-c-divider.pf-m-inset-md-on-md {
2482
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2483
- }
2484
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
2485
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2486
- }
2487
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
2488
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2489
- }
2490
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2491
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2492
- }
2493
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2494
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2495
- }
2493
+
2494
+ .pf-v6-c-label-group__list {
2495
+ display: inline-flex;
2496
+ flex-wrap: wrap;
2497
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2498
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2499
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2496
2500
  }
2497
- @media (min-width: 62rem) {
2498
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
2499
- flex-direction: row;
2500
- width: 100%;
2501
- height: var(--pf-v6-c-divider--Size);
2502
- }
2501
+
2502
+ .pf-v6-c-label-group__list-item {
2503
+ display: inline-flex;
2504
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2503
2505
  }
2504
- @media (min-width: 62rem) {
2505
- .pf-v6-c-divider.pf-m-vertical-on-lg {
2506
- flex-direction: column;
2507
- width: var(--pf-v6-c-divider--Size);
2508
- height: inherit;
2509
- }
2506
+
2507
+ .pf-v6-c-label-group__label {
2508
+ overflow: hidden;
2509
+ text-overflow: ellipsis;
2510
+ white-space: nowrap;
2511
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2510
2512
  }
2511
- @media (min-width: 62rem) {
2512
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
2513
- --pf-v6-c-divider--before--FlexBasis: 100%;
2514
- }
2515
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2516
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2517
- }
2518
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2519
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2520
- }
2521
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2522
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2523
- }
2524
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2525
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2526
- }
2527
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2528
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2529
- }
2530
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2531
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2532
- }
2533
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2534
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2535
- }
2513
+
2514
+ .pf-v6-c-label-group__close {
2515
+ display: flex;
2516
+ align-self: flex-start;
2536
2517
  }
2537
- @media (min-width: 75rem) {
2538
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2539
- flex-direction: row;
2540
- width: 100%;
2541
- height: var(--pf-v6-c-divider--Size);
2542
- }
2518
+
2519
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2520
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2521
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2522
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2523
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2524
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2543
2525
  }
2544
- @media (min-width: 75rem) {
2545
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2546
- flex-direction: column;
2547
- width: var(--pf-v6-c-divider--Size);
2548
- height: inherit;
2549
- }
2526
+
2527
+ .pf-v6-c-label-group__textarea {
2528
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2529
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2530
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2531
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2532
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2533
+ white-space: nowrap;
2534
+ resize: none;
2535
+ border: 0;
2536
+ -ms-overflow-style: none;
2537
+ scrollbar-width: none;
2550
2538
  }
2551
- @media (min-width: 75rem) {
2552
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2553
- --pf-v6-c-divider--before--FlexBasis: 100%;
2554
- }
2555
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2556
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2557
- }
2558
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2559
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2560
- }
2561
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2562
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2563
- }
2564
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2565
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2566
- }
2567
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2568
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2569
- }
2570
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2571
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2572
- }
2573
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2574
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2575
- }
2539
+
2540
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2541
+ display: none;
2576
2542
  }
2577
- @media (min-width: 90.625rem) {
2578
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2579
- flex-direction: row;
2580
- width: 100%;
2581
- height: var(--pf-v6-c-divider--Size);
2582
- }
2543
+
2544
+ .pf-v6-c-badge {
2545
+ --pf-v6-c-badge--BorderColor: transparent;
2546
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2547
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2548
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2549
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2550
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2551
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2552
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2553
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2554
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2555
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2556
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2557
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2558
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2559
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2560
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2561
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2562
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2563
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2564
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2583
2565
  }
2584
- @media (min-width: 90.625rem) {
2585
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2586
- flex-direction: column;
2587
- width: var(--pf-v6-c-divider--Size);
2588
- height: inherit;
2589
- }
2566
+
2567
+ .pf-v6-c-badge {
2568
+ position: relative;
2569
+ display: inline-block;
2570
+ min-width: var(--pf-v6-c-badge--MinWidth);
2571
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2572
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2573
+ font-size: var(--pf-v6-c-badge--FontSize);
2574
+ font-weight: var(--pf-v6-c-badge--FontWeight);
2575
+ color: var(--pf-v6-c-badge--Color);
2576
+ text-align: center;
2577
+ white-space: nowrap;
2578
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
2579
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
2590
2580
  }
2591
- @media (min-width: 90.625rem) {
2592
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2593
- --pf-v6-c-divider--before--FlexBasis: 100%;
2594
- }
2595
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2596
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2597
- }
2598
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2599
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2600
- }
2601
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2602
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2603
- }
2604
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2605
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2606
- }
2607
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2608
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2609
- }
2610
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2611
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2612
- }
2613
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2614
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2615
- }
2581
+
2582
+ .pf-v6-c-badge::after {
2583
+ position: absolute;
2584
+ inset: 0;
2585
+ pointer-events: none;
2586
+ content: "";
2587
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2588
+ border-radius: inherit;
2589
+ }
2590
+
2591
+ .pf-v6-c-badge.pf-m-read {
2592
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2593
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2594
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2595
+ }
2596
+
2597
+ .pf-v6-c-badge.pf-m-unread {
2598
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2599
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2600
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2601
+ }
2602
+
2603
+ .pf-v6-c-badge.pf-m-disabled {
2604
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2605
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2606
+ }
2607
+
2608
+ .pf-v6-c-badge.pf-m-disabled::after {
2609
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2610
+ }
2611
+
2612
+ .pf-v6-c-badge__toggle-icon {
2613
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2614
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
2616
2615
  }
2616
+
2617
2617
  .pf-v6-c-menu {
2618
2618
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2619
2619
  --pf-v6-c-menu--Width: auto;
@@ -3260,122 +3260,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3260
3260
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3261
3261
  }
3262
3262
 
3263
- .pf-v6-c-breadcrumb {
3264
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3265
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3266
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3267
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3268
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3269
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3270
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3271
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3272
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3273
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3274
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3275
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3276
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3277
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3278
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3279
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3280
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3281
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3282
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3283
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3284
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3285
- }
3286
-
3287
- .pf-v6-c-breadcrumb {
3288
- display: inline-flex;
3289
- }
3290
-
3291
- .pf-v6-c-breadcrumb__list {
3292
- display: flex;
3293
- flex-wrap: wrap;
3294
- align-items: center;
3295
- }
3296
-
3297
- .pf-v6-c-breadcrumb__item {
3298
- display: flex;
3299
- align-items: baseline;
3300
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3301
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3302
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3303
- white-space: nowrap;
3304
- list-style: none;
3305
- }
3306
-
3307
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3308
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3309
- }
3310
-
3311
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3312
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3313
- }
3314
-
3315
- .pf-v6-c-breadcrumb__item-divider {
3316
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3317
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3318
- line-height: 1;
3319
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3320
- }
3321
-
3322
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3323
- scale: -1 1;
3324
- }
3325
-
3326
- .pf-v6-c-breadcrumb__link {
3327
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3328
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3329
- font-size: inherit;
3330
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3331
- line-height: inherit;
3332
- color: var(--pf-v6-c-breadcrumb__link--Color);
3333
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3334
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3335
- word-break: break-word;
3336
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3337
- }
3338
-
3339
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3340
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3341
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3342
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3343
- }
3344
-
3345
- .pf-v6-c-breadcrumb__link.pf-m-current {
3346
- cursor: default;
3347
- }
3348
-
3349
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3350
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3351
- text-decoration-line: none;
3352
- }
3353
-
3354
- button.pf-v6-c-breadcrumb__link {
3355
- border: none;
3356
- }
3357
-
3358
- .pf-v6-c-breadcrumb__dropdown {
3359
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3360
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3361
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3362
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3363
- }
3364
-
3365
- .pf-v6-c-breadcrumb__heading {
3366
- display: inline;
3367
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3368
- }
3369
-
3370
- .pf-v6-c-breadcrumb__link,
3371
- .pf-v6-c-breadcrumb__heading {
3372
- white-space: normal;
3373
- }
3374
-
3375
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3376
- display: none;
3377
- }
3378
-
3379
3263
  .pf-v6-c-tooltip {
3380
3264
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3381
3265
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3507,6 +3391,122 @@ button.pf-v6-c-breadcrumb__link {
3507
3391
  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));
3508
3392
  }
3509
3393
 
3394
+ .pf-v6-c-breadcrumb {
3395
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3396
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3397
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3398
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3399
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3400
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3401
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3402
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3403
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3404
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3405
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3406
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3407
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3408
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3409
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3410
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3411
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3412
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3413
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3414
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3415
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3416
+ }
3417
+
3418
+ .pf-v6-c-breadcrumb {
3419
+ display: inline-flex;
3420
+ }
3421
+
3422
+ .pf-v6-c-breadcrumb__list {
3423
+ display: flex;
3424
+ flex-wrap: wrap;
3425
+ align-items: center;
3426
+ }
3427
+
3428
+ .pf-v6-c-breadcrumb__item {
3429
+ display: flex;
3430
+ align-items: baseline;
3431
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3432
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3433
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3434
+ white-space: nowrap;
3435
+ list-style: none;
3436
+ }
3437
+
3438
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3439
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3440
+ }
3441
+
3442
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3443
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3444
+ }
3445
+
3446
+ .pf-v6-c-breadcrumb__item-divider {
3447
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3448
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3449
+ line-height: 1;
3450
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3451
+ }
3452
+
3453
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3454
+ scale: -1 1;
3455
+ }
3456
+
3457
+ .pf-v6-c-breadcrumb__link {
3458
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3459
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3460
+ font-size: inherit;
3461
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3462
+ line-height: inherit;
3463
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3464
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3465
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3466
+ word-break: break-word;
3467
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3468
+ }
3469
+
3470
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3471
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3472
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3473
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3474
+ }
3475
+
3476
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3477
+ cursor: default;
3478
+ }
3479
+
3480
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3481
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3482
+ text-decoration-line: none;
3483
+ }
3484
+
3485
+ button.pf-v6-c-breadcrumb__link {
3486
+ border: none;
3487
+ }
3488
+
3489
+ .pf-v6-c-breadcrumb__dropdown {
3490
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3491
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3492
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3493
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3494
+ }
3495
+
3496
+ .pf-v6-c-breadcrumb__heading {
3497
+ display: inline;
3498
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3499
+ }
3500
+
3501
+ .pf-v6-c-breadcrumb__link,
3502
+ .pf-v6-c-breadcrumb__heading {
3503
+ white-space: normal;
3504
+ }
3505
+
3506
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3507
+ display: none;
3508
+ }
3509
+
3510
3510
  .pf-v6-c-spinner {
3511
3511
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3512
3512
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);