@patternfly/react-templates 6.2.1-prerelease.4 → 6.2.1-prerelease.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,322 +3,244 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-divider {
7
- --pf-v6-c-divider--Display: flex;
8
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
9
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
10
- --pf-v6-c-divider--before--FlexBasis: 100%;
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);
11
44
  }
12
45
 
13
- .pf-v6-c-divider {
14
- flex-direction: row;
15
- width: 100%;
16
- height: var(--pf-v6-c-divider--Size);
17
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
18
- --pf-v6-hidden-visible--hidden--Display: none;
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
20
- display: var(--pf-v6-hidden-visible--Display);
21
- flex-shrink: 0;
22
- align-items: stretch;
23
- align-self: stretch;
24
- justify-content: center;
25
- border: 0;
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);
26
52
  }
27
53
 
28
- .pf-v6-c-divider.pf-m-hidden {
29
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
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);
30
62
  }
31
63
 
32
- @media screen and (min-width: 36rem) {
33
- .pf-v6-c-divider.pf-m-hidden-on-sm {
34
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
35
- }
36
- .pf-v6-c-divider.pf-m-visible-on-sm {
37
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
38
- }
39
- }
40
- @media screen and (min-width: 48rem) {
41
- .pf-v6-c-divider.pf-m-hidden-on-md {
42
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
43
- }
44
- .pf-v6-c-divider.pf-m-visible-on-md {
45
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
46
- }
47
- }
48
- @media screen and (min-width: 62rem) {
49
- .pf-v6-c-divider.pf-m-hidden-on-lg {
50
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
51
- }
52
- .pf-v6-c-divider.pf-m-visible-on-lg {
53
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
54
- }
55
- }
56
- @media screen and (min-width: 75rem) {
57
- .pf-v6-c-divider.pf-m-hidden-on-xl {
58
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
59
- }
60
- .pf-v6-c-divider.pf-m-visible-on-xl {
61
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
62
- }
63
- }
64
- @media screen and (min-width: 90.625rem) {
65
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
66
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
67
- }
68
- .pf-v6-c-divider.pf-m-visible-on-2xl {
69
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
70
- }
71
- }
72
- .pf-v6-c-divider::before {
73
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
74
- content: "";
75
- background-color: var(--pf-v6-c-divider--Color);
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);
76
72
  }
77
73
 
78
- .pf-v6-c-divider.pf-m-horizontal {
79
- flex-direction: row;
80
- width: 100%;
81
- height: var(--pf-v6-c-divider--Size);
74
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
75
+ align-items: flex-start;
82
76
  }
83
77
 
84
- .pf-v6-c-divider.pf-m-vertical {
78
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
85
79
  flex-direction: column;
86
- width: var(--pf-v6-c-divider--Size);
87
- height: inherit;
80
+ align-items: flex-start;
81
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
88
82
  }
89
83
 
90
- .pf-v6-c-divider.pf-m-inset-none {
91
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
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);
92
87
  }
93
88
 
94
- .pf-v6-c-divider.pf-m-inset-xs {
95
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
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;
96
93
  }
97
94
 
98
- .pf-v6-c-divider.pf-m-inset-sm {
99
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
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;
100
100
  }
101
101
 
102
- .pf-v6-c-divider.pf-m-inset-md {
103
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
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);
104
110
  }
105
111
 
106
- .pf-v6-c-divider.pf-m-inset-lg {
107
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
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);
108
118
  }
109
119
 
110
- .pf-v6-c-divider.pf-m-inset-xl {
111
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
120
+ .pf-v6-c-label-group__list-item {
121
+ display: inline-flex;
122
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
112
123
  }
113
124
 
114
- .pf-v6-c-divider.pf-m-inset-2xl {
115
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
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);
116
130
  }
117
131
 
118
- .pf-v6-c-divider.pf-m-inset-3xl {
119
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
132
+ .pf-v6-c-label-group__close {
133
+ display: flex;
134
+ align-self: flex-start;
120
135
  }
121
136
 
122
- @media (min-width: 36rem) {
123
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
124
- flex-direction: row;
125
- width: 100%;
126
- height: var(--pf-v6-c-divider--Size);
127
- }
128
- }
129
- @media (min-width: 36rem) {
130
- .pf-v6-c-divider.pf-m-vertical-on-sm {
131
- flex-direction: column;
132
- width: var(--pf-v6-c-divider--Size);
133
- height: inherit;
134
- }
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);
135
143
  }
136
- @media (min-width: 36rem) {
137
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
138
- --pf-v6-c-divider--before--FlexBasis: 100%;
139
- }
140
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
141
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
142
- }
143
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
144
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
145
- }
146
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
147
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
148
- }
149
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
150
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
151
- }
152
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
153
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
154
- }
155
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
156
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
157
- }
158
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
159
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
160
- }
144
+
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;
161
156
  }
162
- @media (min-width: 48rem) {
163
- .pf-v6-c-divider.pf-m-horizontal-on-md {
164
- flex-direction: row;
165
- width: 100%;
166
- height: var(--pf-v6-c-divider--Size);
167
- }
157
+
158
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
+ display: none;
168
160
  }
169
- @media (min-width: 48rem) {
170
- .pf-v6-c-divider.pf-m-vertical-on-md {
171
- flex-direction: column;
172
- width: var(--pf-v6-c-divider--Size);
173
- height: inherit;
174
- }
161
+
162
+ .pf-v6-c-check {
163
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
164
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
165
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
166
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
167
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
168
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
169
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
170
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
171
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
172
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
173
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
174
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
175
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
176
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
175
177
  }
176
- @media (min-width: 48rem) {
177
- .pf-v6-c-divider.pf-m-inset-none-on-md {
178
- --pf-v6-c-divider--before--FlexBasis: 100%;
179
- }
180
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
181
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
182
- }
183
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
184
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
185
- }
186
- .pf-v6-c-divider.pf-m-inset-md-on-md {
187
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
188
- }
189
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
190
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
191
- }
192
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
193
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
194
- }
195
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
196
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
197
- }
198
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
199
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
200
- }
178
+
179
+ .pf-v6-c-check {
180
+ display: grid;
181
+ grid-template-columns: auto 1fr;
182
+ grid-gap: var(--pf-v6-c-check--GridGap);
183
+ accent-color: var(--pf-v6-c-check--AccentColor);
201
184
  }
202
- @media (min-width: 62rem) {
203
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
204
- flex-direction: row;
205
- width: 100%;
206
- height: var(--pf-v6-c-divider--Size);
207
- }
185
+
186
+ .pf-v6-c-check.pf-m-standalone {
187
+ display: inline-grid;
188
+ grid-template-columns: auto;
189
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
208
190
  }
209
- @media (min-width: 62rem) {
210
- .pf-v6-c-divider.pf-m-vertical-on-lg {
211
- flex-direction: column;
212
- width: var(--pf-v6-c-divider--Size);
213
- height: inherit;
214
- }
191
+
192
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
193
+ align-self: center;
194
+ transform: none;
215
195
  }
216
- @media (min-width: 62rem) {
217
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
218
- --pf-v6-c-divider--before--FlexBasis: 100%;
219
- }
220
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
221
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
222
- }
223
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
224
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
225
- }
226
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
227
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
228
- }
229
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
230
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
231
- }
232
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
233
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
234
- }
235
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
236
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
237
- }
238
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
239
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
240
- }
196
+
197
+ .pf-v6-c-check__input {
198
+ align-self: start;
199
+ font-size: var(--pf-v6-c-check__label--FontSize);
200
+ line-height: var(--pf-v6-c-check__label--LineHeight);
201
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
241
202
  }
242
- @media (min-width: 75rem) {
243
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
244
- flex-direction: row;
245
- width: 100%;
246
- height: var(--pf-v6-c-divider--Size);
247
- }
203
+
204
+ .pf-v6-c-check__label {
205
+ font-size: var(--pf-v6-c-check__label--FontSize);
206
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
207
+ line-height: var(--pf-v6-c-check__label--LineHeight);
208
+ color: var(--pf-v6-c-check__label--Color);
248
209
  }
249
- @media (min-width: 75rem) {
250
- .pf-v6-c-divider.pf-m-vertical-on-xl {
251
- flex-direction: column;
252
- width: var(--pf-v6-c-divider--Size);
253
- height: inherit;
254
- }
210
+
211
+ .pf-v6-c-check__description {
212
+ grid-column: 2;
213
+ font-size: var(--pf-v6-c-check__description--FontSize);
214
+ color: var(--pf-v6-c-check__description--Color);
255
215
  }
256
- @media (min-width: 75rem) {
257
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
258
- --pf-v6-c-divider--before--FlexBasis: 100%;
259
- }
260
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
261
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
262
- }
263
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
264
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
265
- }
266
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
267
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
268
- }
269
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
270
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
271
- }
272
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
273
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
274
- }
275
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
276
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
277
- }
278
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
279
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
280
- }
216
+
217
+ .pf-v6-c-check__body {
218
+ grid-column: 2;
281
219
  }
282
- @media (min-width: 90.625rem) {
283
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
284
- flex-direction: row;
285
- width: 100%;
286
- height: var(--pf-v6-c-divider--Size);
287
- }
220
+
221
+ .pf-v6-c-check__label,
222
+ .pf-v6-c-check__input {
223
+ justify-self: start;
288
224
  }
289
- @media (min-width: 90.625rem) {
290
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
291
- flex-direction: column;
292
- width: var(--pf-v6-c-divider--Size);
293
- height: inherit;
294
- }
225
+
226
+ label.pf-v6-c-check, .pf-v6-c-check__label,
227
+ .pf-v6-c-check__input {
228
+ cursor: pointer;
295
229
  }
296
- @media (min-width: 90.625rem) {
297
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
298
- --pf-v6-c-divider--before--FlexBasis: 100%;
299
- }
300
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
301
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
302
- }
303
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
304
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
305
- }
306
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
307
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
308
- }
309
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
310
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
311
- }
312
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
313
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
314
- }
315
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
316
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
317
- }
318
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
319
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
320
- }
230
+
231
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
232
+ .pf-v6-c-check__input:disabled,
233
+ .pf-v6-c-check__input.pf-m-disabled {
234
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
235
+ cursor: not-allowed;
236
+ }
237
+
238
+ .pf-v6-c-check__label-required {
239
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
240
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
241
+ color: var(--pf-v6-c-check__label-required--Color);
321
242
  }
243
+
322
244
  .pf-v6-c-label {
323
245
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
324
246
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -841,253 +763,15 @@ input.pf-v6-c-label__content {
841
763
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
842
764
  }
843
765
 
844
- .pf-v6-c-label__actions .pf-v6-c-button {
845
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
846
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
847
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
848
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
849
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
850
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
851
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
852
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
853
- }
854
-
855
- .pf-v6-c-check {
856
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
857
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
858
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
859
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
860
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
861
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
862
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
863
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
864
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
865
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
866
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
867
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
868
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
869
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
870
- }
871
-
872
- .pf-v6-c-check {
873
- display: grid;
874
- grid-template-columns: auto 1fr;
875
- grid-gap: var(--pf-v6-c-check--GridGap);
876
- accent-color: var(--pf-v6-c-check--AccentColor);
877
- }
878
-
879
- .pf-v6-c-check.pf-m-standalone {
880
- display: inline-grid;
881
- grid-template-columns: auto;
882
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
883
- }
884
-
885
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
886
- align-self: center;
887
- transform: none;
888
- }
889
-
890
- .pf-v6-c-check__input {
891
- align-self: start;
892
- font-size: var(--pf-v6-c-check__label--FontSize);
893
- line-height: var(--pf-v6-c-check__label--LineHeight);
894
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
895
- }
896
-
897
- .pf-v6-c-check__label {
898
- font-size: var(--pf-v6-c-check__label--FontSize);
899
- font-weight: var(--pf-v6-c-check__label--FontWeight);
900
- line-height: var(--pf-v6-c-check__label--LineHeight);
901
- color: var(--pf-v6-c-check__label--Color);
902
- }
903
-
904
- .pf-v6-c-check__description {
905
- grid-column: 2;
906
- font-size: var(--pf-v6-c-check__description--FontSize);
907
- color: var(--pf-v6-c-check__description--Color);
908
- }
909
-
910
- .pf-v6-c-check__body {
911
- grid-column: 2;
912
- }
913
-
914
- .pf-v6-c-check__label,
915
- .pf-v6-c-check__input {
916
- justify-self: start;
917
- }
918
-
919
- label.pf-v6-c-check, .pf-v6-c-check__label,
920
- .pf-v6-c-check__input {
921
- cursor: pointer;
922
- }
923
-
924
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
925
- .pf-v6-c-check__input:disabled,
926
- .pf-v6-c-check__input.pf-m-disabled {
927
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
928
- cursor: not-allowed;
929
- }
930
-
931
- .pf-v6-c-check__label-required {
932
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
933
- font-size: var(--pf-v6-c-check__label-required--FontSize);
934
- color: var(--pf-v6-c-check__label-required--Color);
935
- }
936
-
937
- .pf-v6-c-label-group {
938
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
939
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
940
- --pf-v6-c-label-group--MaxWidth: 100%;
941
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
942
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
943
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
944
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
945
- --pf-v6-c-label-group__main--MaxWidth: 100%;
946
- --pf-v6-c-label-group__main--MinWidth: 0;
947
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
948
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
949
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
950
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
951
- --pf-v6-c-label-group__list--MaxWidth: 100%;
952
- --pf-v6-c-label-group__list--MinWidth: 0;
953
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
954
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
955
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
956
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
957
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
958
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
959
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
960
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
961
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
962
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
963
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
964
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
965
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
966
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
967
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
968
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
969
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
970
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
971
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
972
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
973
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
974
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
975
- }
976
-
977
- .pf-v6-c-label-group {
978
- display: inline-flex;
979
- row-gap: var(--pf-v6-c-label-group--RowGap);
980
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
981
- align-items: center;
982
- max-width: var(--pf-v6-c-label-group--MaxWidth);
983
- }
984
-
985
- .pf-v6-c-label-group.pf-m-category {
986
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
987
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
988
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
989
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
990
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
991
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
992
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
993
- }
994
-
995
- .pf-v6-c-label-group.pf-m-vertical {
996
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
997
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
998
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
999
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1000
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1001
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1002
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1003
- }
1004
-
1005
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1006
- align-items: flex-start;
1007
- }
1008
-
1009
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1010
- flex-direction: column;
1011
- align-items: flex-start;
1012
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1013
- }
1014
-
1015
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1016
- flex-direction: column;
1017
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1018
- }
1019
-
1020
- .pf-v6-c-label-group.pf-m-editable,
1021
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1022
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1023
- display: flex;
1024
- }
1025
-
1026
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1027
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1028
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1029
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1030
- flex: 1;
1031
- }
1032
-
1033
- .pf-v6-c-label-group__main {
1034
- display: flex;
1035
- flex: 1;
1036
- flex-wrap: wrap;
1037
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1038
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1039
- align-items: baseline;
1040
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1041
- }
1042
-
1043
- .pf-v6-c-label-group__list {
1044
- display: inline-flex;
1045
- flex-wrap: wrap;
1046
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1047
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1048
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1049
- }
1050
-
1051
- .pf-v6-c-label-group__list-item {
1052
- display: inline-flex;
1053
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1054
- }
1055
-
1056
- .pf-v6-c-label-group__label {
1057
- overflow: hidden;
1058
- text-overflow: ellipsis;
1059
- white-space: nowrap;
1060
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1061
- }
1062
-
1063
- .pf-v6-c-label-group__close {
1064
- display: flex;
1065
- align-self: flex-start;
1066
- }
1067
-
1068
- .pf-v6-c-label-group__close .pf-v6-c-button {
1069
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1070
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1071
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1072
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1073
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1074
- }
1075
-
1076
- .pf-v6-c-label-group__textarea {
1077
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1078
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1079
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1080
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1081
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1082
- white-space: nowrap;
1083
- resize: none;
1084
- border: 0;
1085
- -ms-overflow-style: none;
1086
- scrollbar-width: none;
1087
- }
1088
-
1089
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1090
- display: none;
766
+ .pf-v6-c-label__actions .pf-v6-c-button {
767
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
768
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
769
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
770
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
771
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
772
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
773
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
774
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1091
775
  }
1092
776
 
1093
777
  .pf-v6-c-badge {
@@ -2050,50 +1734,366 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2050
1734
  inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2051
1735
  color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2052
1736
  }
2053
-
2054
- .pf-v6-c-text-input-group__text-input {
2055
- overflow: hidden;
2056
- text-overflow: ellipsis;
2057
- white-space: nowrap;
2058
- position: relative;
2059
- width: 100%;
2060
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2061
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2062
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2063
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2064
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2065
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2066
- border: 0;
2067
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1737
+
1738
+ .pf-v6-c-text-input-group__text-input {
1739
+ overflow: hidden;
1740
+ text-overflow: ellipsis;
1741
+ white-space: nowrap;
1742
+ position: relative;
1743
+ width: 100%;
1744
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1745
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1746
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1747
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1748
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1749
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1750
+ border: 0;
1751
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1752
+ }
1753
+
1754
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1755
+ grid-area: text-input;
1756
+ }
1757
+
1758
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1759
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1760
+ }
1761
+
1762
+ .pf-v6-c-text-input-group__text-input::placeholder {
1763
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1764
+ }
1765
+
1766
+ .pf-v6-c-text-input-group__utilities {
1767
+ display: flex;
1768
+ align-items: center;
1769
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1770
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1771
+ }
1772
+
1773
+ .pf-v6-c-text-input-group__utilities > * + * {
1774
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1775
+ }
1776
+
1777
+ .pf-v6-c-text-input-group__group {
1778
+ display: flex;
1779
+ }
1780
+
1781
+ .pf-v6-c-divider {
1782
+ --pf-v6-c-divider--Display: flex;
1783
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1784
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1785
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1786
+ }
1787
+
1788
+ .pf-v6-c-divider {
1789
+ flex-direction: row;
1790
+ width: 100%;
1791
+ height: var(--pf-v6-c-divider--Size);
1792
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1793
+ --pf-v6-hidden-visible--hidden--Display: none;
1794
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1795
+ display: var(--pf-v6-hidden-visible--Display);
1796
+ flex-shrink: 0;
1797
+ align-items: stretch;
1798
+ align-self: stretch;
1799
+ justify-content: center;
1800
+ border: 0;
1801
+ }
1802
+
1803
+ .pf-v6-c-divider.pf-m-hidden {
1804
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1805
+ }
1806
+
1807
+ @media screen and (min-width: 36rem) {
1808
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
1809
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1810
+ }
1811
+ .pf-v6-c-divider.pf-m-visible-on-sm {
1812
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1813
+ }
1814
+ }
1815
+ @media screen and (min-width: 48rem) {
1816
+ .pf-v6-c-divider.pf-m-hidden-on-md {
1817
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1818
+ }
1819
+ .pf-v6-c-divider.pf-m-visible-on-md {
1820
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1821
+ }
1822
+ }
1823
+ @media screen and (min-width: 62rem) {
1824
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
1825
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1826
+ }
1827
+ .pf-v6-c-divider.pf-m-visible-on-lg {
1828
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1829
+ }
1830
+ }
1831
+ @media screen and (min-width: 75rem) {
1832
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
1833
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1834
+ }
1835
+ .pf-v6-c-divider.pf-m-visible-on-xl {
1836
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1837
+ }
1838
+ }
1839
+ @media screen and (min-width: 90.625rem) {
1840
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
1841
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1842
+ }
1843
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
1844
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1845
+ }
1846
+ }
1847
+ .pf-v6-c-divider::before {
1848
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1849
+ content: "";
1850
+ background-color: var(--pf-v6-c-divider--Color);
1851
+ }
1852
+
1853
+ .pf-v6-c-divider.pf-m-horizontal {
1854
+ flex-direction: row;
1855
+ width: 100%;
1856
+ height: var(--pf-v6-c-divider--Size);
1857
+ }
1858
+
1859
+ .pf-v6-c-divider.pf-m-vertical {
1860
+ flex-direction: column;
1861
+ width: var(--pf-v6-c-divider--Size);
1862
+ height: inherit;
1863
+ }
1864
+
1865
+ .pf-v6-c-divider.pf-m-inset-none {
1866
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1867
+ }
1868
+
1869
+ .pf-v6-c-divider.pf-m-inset-xs {
1870
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1871
+ }
1872
+
1873
+ .pf-v6-c-divider.pf-m-inset-sm {
1874
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1875
+ }
1876
+
1877
+ .pf-v6-c-divider.pf-m-inset-md {
1878
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1879
+ }
1880
+
1881
+ .pf-v6-c-divider.pf-m-inset-lg {
1882
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1883
+ }
1884
+
1885
+ .pf-v6-c-divider.pf-m-inset-xl {
1886
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1887
+ }
1888
+
1889
+ .pf-v6-c-divider.pf-m-inset-2xl {
1890
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1891
+ }
1892
+
1893
+ .pf-v6-c-divider.pf-m-inset-3xl {
1894
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1895
+ }
1896
+
1897
+ @media (min-width: 36rem) {
1898
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
1899
+ flex-direction: row;
1900
+ width: 100%;
1901
+ height: var(--pf-v6-c-divider--Size);
1902
+ }
1903
+ }
1904
+ @media (min-width: 36rem) {
1905
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
1906
+ flex-direction: column;
1907
+ width: var(--pf-v6-c-divider--Size);
1908
+ height: inherit;
1909
+ }
1910
+ }
1911
+ @media (min-width: 36rem) {
1912
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
1913
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1914
+ }
1915
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1916
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1917
+ }
1918
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1919
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1920
+ }
1921
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
1922
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1923
+ }
1924
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1925
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1926
+ }
1927
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1928
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1929
+ }
1930
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1931
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1932
+ }
1933
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1934
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1935
+ }
1936
+ }
1937
+ @media (min-width: 48rem) {
1938
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
1939
+ flex-direction: row;
1940
+ width: 100%;
1941
+ height: var(--pf-v6-c-divider--Size);
1942
+ }
1943
+ }
1944
+ @media (min-width: 48rem) {
1945
+ .pf-v6-c-divider.pf-m-vertical-on-md {
1946
+ flex-direction: column;
1947
+ width: var(--pf-v6-c-divider--Size);
1948
+ height: inherit;
1949
+ }
1950
+ }
1951
+ @media (min-width: 48rem) {
1952
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
1953
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1954
+ }
1955
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
1956
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1957
+ }
1958
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
1959
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1960
+ }
1961
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
1962
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1963
+ }
1964
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
1965
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1966
+ }
1967
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
1968
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1969
+ }
1970
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1971
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1972
+ }
1973
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1974
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1975
+ }
1976
+ }
1977
+ @media (min-width: 62rem) {
1978
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
1979
+ flex-direction: row;
1980
+ width: 100%;
1981
+ height: var(--pf-v6-c-divider--Size);
1982
+ }
1983
+ }
1984
+ @media (min-width: 62rem) {
1985
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
1986
+ flex-direction: column;
1987
+ width: var(--pf-v6-c-divider--Size);
1988
+ height: inherit;
1989
+ }
2068
1990
  }
2069
-
2070
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2071
- grid-area: text-input;
1991
+ @media (min-width: 62rem) {
1992
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
1993
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1994
+ }
1995
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1996
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1997
+ }
1998
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1999
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2000
+ }
2001
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2002
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2003
+ }
2004
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2005
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2006
+ }
2007
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2008
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2009
+ }
2010
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2011
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2012
+ }
2013
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2014
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2015
+ }
2072
2016
  }
2073
-
2074
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
2075
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2017
+ @media (min-width: 75rem) {
2018
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2019
+ flex-direction: row;
2020
+ width: 100%;
2021
+ height: var(--pf-v6-c-divider--Size);
2022
+ }
2076
2023
  }
2077
-
2078
- .pf-v6-c-text-input-group__text-input::placeholder {
2079
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2024
+ @media (min-width: 75rem) {
2025
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2026
+ flex-direction: column;
2027
+ width: var(--pf-v6-c-divider--Size);
2028
+ height: inherit;
2029
+ }
2080
2030
  }
2081
-
2082
- .pf-v6-c-text-input-group__utilities {
2083
- display: flex;
2084
- align-items: center;
2085
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2086
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2031
+ @media (min-width: 75rem) {
2032
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2033
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2034
+ }
2035
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2036
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2037
+ }
2038
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2039
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2040
+ }
2041
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2042
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2043
+ }
2044
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2045
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2046
+ }
2047
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2048
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2049
+ }
2050
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2051
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2052
+ }
2053
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2054
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2055
+ }
2087
2056
  }
2088
-
2089
- .pf-v6-c-text-input-group__utilities > * + * {
2090
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2057
+ @media (min-width: 90.625rem) {
2058
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2059
+ flex-direction: row;
2060
+ width: 100%;
2061
+ height: var(--pf-v6-c-divider--Size);
2062
+ }
2091
2063
  }
2092
-
2093
- .pf-v6-c-text-input-group__group {
2094
- display: flex;
2064
+ @media (min-width: 90.625rem) {
2065
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2066
+ flex-direction: column;
2067
+ width: var(--pf-v6-c-divider--Size);
2068
+ height: inherit;
2069
+ }
2070
+ }
2071
+ @media (min-width: 90.625rem) {
2072
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2073
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2074
+ }
2075
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2076
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2077
+ }
2078
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2079
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2080
+ }
2081
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2082
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2083
+ }
2084
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2085
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2086
+ }
2087
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2088
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2089
+ }
2090
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2091
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2092
+ }
2093
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2094
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2095
+ }
2095
2096
  }
2096
-
2097
2097
  .pf-v6-c-menu-toggle {
2098
2098
  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2099
2099
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
@@ -2569,49 +2569,165 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2569
2569
  align-items: baseline;
2570
2570
  }
2571
2571
 
2572
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
2573
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2574
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2572
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
2573
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2574
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2575
+ }
2576
+
2577
+ .pf-v6-c-menu-toggle__text {
2578
+ overflow: hidden;
2579
+ text-overflow: ellipsis;
2580
+ white-space: nowrap;
2581
+ min-width: 0;
2582
+ }
2583
+
2584
+ .pf-v6-c-menu-toggle__count {
2585
+ display: flex;
2586
+ flex-wrap: nowrap;
2587
+ }
2588
+
2589
+ .pf-v6-c-menu-toggle__icon {
2590
+ flex-shrink: 0;
2591
+ }
2592
+
2593
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2594
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2595
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
2596
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2597
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2598
+ }
2599
+
2600
+ .pf-v6-c-menu-toggle__controls {
2601
+ display: flex;
2602
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2603
+ align-items: center;
2604
+ justify-content: center;
2605
+ margin-inline-start: auto;
2606
+ }
2607
+
2608
+ .pf-v6-c-menu-toggle__toggle-icon {
2609
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2610
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2611
+ }
2612
+
2613
+ .pf-v6-c-menu-toggle__status-icon {
2614
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2615
+ }
2616
+
2617
+ .pf-v6-c-breadcrumb {
2618
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2619
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2620
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2621
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2622
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2623
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2624
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2625
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2626
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2627
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2628
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2629
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2630
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2631
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2632
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2633
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2634
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2635
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2636
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2637
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2638
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2639
+ }
2640
+
2641
+ .pf-v6-c-breadcrumb {
2642
+ display: inline-flex;
2643
+ }
2644
+
2645
+ .pf-v6-c-breadcrumb__list {
2646
+ display: flex;
2647
+ flex-wrap: wrap;
2648
+ align-items: center;
2649
+ }
2650
+
2651
+ .pf-v6-c-breadcrumb__item {
2652
+ display: flex;
2653
+ align-items: baseline;
2654
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2655
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2656
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2657
+ white-space: nowrap;
2658
+ list-style: none;
2659
+ }
2660
+
2661
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2662
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2663
+ }
2664
+
2665
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
2666
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2667
+ }
2668
+
2669
+ .pf-v6-c-breadcrumb__item-divider {
2670
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2671
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2672
+ line-height: 1;
2673
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2674
+ }
2675
+
2676
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2677
+ scale: -1 1;
2678
+ }
2679
+
2680
+ .pf-v6-c-breadcrumb__link {
2681
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2682
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2683
+ font-size: inherit;
2684
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2685
+ line-height: inherit;
2686
+ color: var(--pf-v6-c-breadcrumb__link--Color);
2687
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2688
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2689
+ word-break: break-word;
2690
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2691
+ }
2692
+
2693
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2694
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2695
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2696
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2575
2697
  }
2576
2698
 
2577
- .pf-v6-c-menu-toggle__text {
2578
- overflow: hidden;
2579
- text-overflow: ellipsis;
2580
- white-space: nowrap;
2581
- min-width: 0;
2699
+ .pf-v6-c-breadcrumb__link.pf-m-current {
2700
+ cursor: default;
2582
2701
  }
2583
2702
 
2584
- .pf-v6-c-menu-toggle__count {
2585
- display: flex;
2586
- flex-wrap: nowrap;
2703
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2704
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2705
+ text-decoration-line: none;
2587
2706
  }
2588
2707
 
2589
- .pf-v6-c-menu-toggle__icon {
2590
- flex-shrink: 0;
2708
+ button.pf-v6-c-breadcrumb__link {
2709
+ border: none;
2591
2710
  }
2592
2711
 
2593
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2594
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2595
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
2596
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2597
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2712
+ .pf-v6-c-breadcrumb__dropdown {
2713
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2714
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2715
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2716
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2598
2717
  }
2599
2718
 
2600
- .pf-v6-c-menu-toggle__controls {
2601
- display: flex;
2602
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2603
- align-items: center;
2604
- justify-content: center;
2605
- margin-inline-start: auto;
2719
+ .pf-v6-c-breadcrumb__heading {
2720
+ display: inline;
2721
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2606
2722
  }
2607
2723
 
2608
- .pf-v6-c-menu-toggle__toggle-icon {
2609
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2610
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2724
+ .pf-v6-c-breadcrumb__link,
2725
+ .pf-v6-c-breadcrumb__heading {
2726
+ white-space: normal;
2611
2727
  }
2612
2728
 
2613
- .pf-v6-c-menu-toggle__status-icon {
2614
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2729
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2730
+ display: none;
2615
2731
  }
2616
2732
 
2617
2733
  .pf-v6-c-menu {
@@ -3134,327 +3250,130 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3134
3250
  .pf-v6-c-menu__item.pf-m-visible-on-lg {
3135
3251
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3136
3252
  }
3137
- }
3138
- @media screen and (min-width: 75rem) {
3139
- .pf-v6-c-menu__item.pf-m-hidden-on-xl {
3140
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3141
- }
3142
- .pf-v6-c-menu__item.pf-m-visible-on-xl {
3143
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3144
- }
3145
- }
3146
- @media screen and (min-width: 90.625rem) {
3147
- .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
3148
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3149
- }
3150
- .pf-v6-c-menu__item.pf-m-visible-on-2xl {
3151
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3152
- }
3153
- }
3154
- :where(label).pf-v6-c-menu__item {
3155
- cursor: pointer;
3156
- }
3157
-
3158
- .pf-v6-c-menu__item.pf-m-selected {
3159
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3160
- }
3161
-
3162
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3163
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3164
- opacity: 1;
3165
- }
3166
-
3167
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3168
- color: var(--pf-v6-c-menu__item-external--Color);
3169
- }
3170
-
3171
- .pf-v6-c-menu__item-select-icon {
3172
- color: var(--pf-v6-c-menu__item-select-icon--Color);
3173
- }
3174
-
3175
- .pf-v6-c-menu__item-main {
3176
- column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3177
- align-items: center;
3178
- width: 100%;
3179
- }
3180
-
3181
- .pf-v6-c-menu__item-text {
3182
- overflow: hidden;
3183
- text-overflow: ellipsis;
3184
- white-space: nowrap;
3185
- flex-grow: 1;
3186
- }
3187
-
3188
- .pf-v6-c-menu__group-title {
3189
- padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3190
- padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3191
- padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3192
- padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3193
- font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3194
- font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3195
- color: var(--pf-v6-c-menu__group-title--Color);
3196
- }
3197
-
3198
- .pf-v6-c-menu__item-description {
3199
- font-size: var(--pf-v6-c-menu__item-description--FontSize);
3200
- color: var(--pf-v6-c-menu__item-description--Color);
3201
- word-break: break-word;
3202
- }
3203
-
3204
- .pf-v6-c-menu__item-check .pf-v6-c-check {
3205
- --pf-v6-c-check__input--TranslateY: none;
3206
- }
3207
-
3208
- .pf-v6-c-menu__item-toggle-icon {
3209
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3210
- }
3211
-
3212
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3213
- scale: -1 1;
3214
- }
3215
-
3216
- .pf-v6-c-menu__item-icon {
3217
- color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3218
- }
3219
-
3220
- .pf-v6-c-menu__item-select-icon,
3221
- .pf-v6-c-menu__item-external-icon {
3222
- opacity: 0;
3223
- }
3224
-
3225
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3226
- .pf-v6-c-menu__item-action.pf-m-favorited,
3227
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3228
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3229
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3230
- }
3231
-
3232
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3233
- .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3234
- .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3235
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3236
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3237
- }
3238
-
3239
- .pf-v6-c-menu__breadcrumb {
3240
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3241
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3242
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3243
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3244
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3245
- }
3246
-
3247
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3248
- min-width: auto;
3249
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3250
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3251
- }
3252
-
3253
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3254
- height: auto;
3255
- }
3256
-
3257
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3258
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3259
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3260
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3261
- }
3262
-
3263
- .pf-v6-c-spinner {
3264
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3265
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3266
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3267
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3268
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3269
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3270
- --pf-v6-c-spinner--StrokeWidth: 10;
3271
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3272
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3273
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3274
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3275
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3276
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3277
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3278
- }
3279
-
3280
- .pf-v6-c-spinner {
3281
- width: var(--pf-v6-c-spinner--Width);
3282
- height: var(--pf-v6-c-spinner--Height);
3283
- overflow: hidden;
3284
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3285
- }
3286
-
3287
- .pf-v6-c-spinner.pf-m-inline {
3288
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3289
- }
3290
-
3291
- .pf-v6-c-spinner.pf-m-sm {
3292
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3293
- }
3294
-
3295
- .pf-v6-c-spinner.pf-m-md {
3296
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3297
- }
3298
-
3299
- .pf-v6-c-spinner.pf-m-lg {
3300
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3301
- }
3302
-
3303
- .pf-v6-c-spinner.pf-m-xl {
3304
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3305
- }
3306
-
3307
- .pf-v6-c-spinner__path {
3308
- width: 100%;
3309
- height: 100%;
3310
- stroke: var(--pf-v6-c-spinner--Color);
3311
- stroke-dasharray: 283;
3312
- stroke-dashoffset: 280;
3313
- stroke-linecap: round;
3314
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3315
- transform-origin: 50% 50%;
3316
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3317
- }
3318
-
3319
- @keyframes pf-v6-c-spinner-animation-rotate {
3320
- 0% {
3321
- transform: rotate(0deg);
3322
- }
3323
- 100% {
3324
- transform: rotate(360deg);
3325
- }
3326
- }
3327
- @keyframes pf-v6-c-spinner-animation-dash {
3328
- 0% {
3329
- stroke-dashoffset: 280;
3330
- transform: rotate(0);
3331
- }
3332
- 15% {
3333
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3253
+ }
3254
+ @media screen and (min-width: 75rem) {
3255
+ .pf-v6-c-menu__item.pf-m-hidden-on-xl {
3256
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3334
3257
  }
3335
- 40% {
3336
- stroke-dasharray: 220;
3337
- stroke-dashoffset: 150;
3258
+ .pf-v6-c-menu__item.pf-m-visible-on-xl {
3259
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3338
3260
  }
3339
- 100% {
3340
- stroke-dashoffset: 280;
3341
- transform: rotate(720deg);
3261
+ }
3262
+ @media screen and (min-width: 90.625rem) {
3263
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
3264
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3265
+ }
3266
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
3267
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3342
3268
  }
3343
3269
  }
3344
- .pf-v6-c-breadcrumb {
3345
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3346
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3347
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3348
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3349
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3350
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3351
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3352
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3353
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3354
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3355
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3356
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3357
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3358
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3359
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3360
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3361
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3362
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3363
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3364
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3365
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3270
+ :where(label).pf-v6-c-menu__item {
3271
+ cursor: pointer;
3366
3272
  }
3367
3273
 
3368
- .pf-v6-c-breadcrumb {
3369
- display: inline-flex;
3274
+ .pf-v6-c-menu__item.pf-m-selected {
3275
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3370
3276
  }
3371
3277
 
3372
- .pf-v6-c-breadcrumb__list {
3373
- display: flex;
3374
- flex-wrap: wrap;
3278
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3279
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3280
+ opacity: 1;
3281
+ }
3282
+
3283
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3284
+ color: var(--pf-v6-c-menu__item-external--Color);
3285
+ }
3286
+
3287
+ .pf-v6-c-menu__item-select-icon {
3288
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
3289
+ }
3290
+
3291
+ .pf-v6-c-menu__item-main {
3292
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3375
3293
  align-items: center;
3294
+ width: 100%;
3376
3295
  }
3377
3296
 
3378
- .pf-v6-c-breadcrumb__item {
3379
- display: flex;
3380
- align-items: baseline;
3381
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3382
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3383
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3297
+ .pf-v6-c-menu__item-text {
3298
+ overflow: hidden;
3299
+ text-overflow: ellipsis;
3384
3300
  white-space: nowrap;
3385
- list-style: none;
3301
+ flex-grow: 1;
3386
3302
  }
3387
3303
 
3388
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3389
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3304
+ .pf-v6-c-menu__group-title {
3305
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3306
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3307
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3308
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3309
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3310
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3311
+ color: var(--pf-v6-c-menu__group-title--Color);
3390
3312
  }
3391
3313
 
3392
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3393
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3314
+ .pf-v6-c-menu__item-description {
3315
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
3316
+ color: var(--pf-v6-c-menu__item-description--Color);
3317
+ word-break: break-word;
3394
3318
  }
3395
3319
 
3396
- .pf-v6-c-breadcrumb__item-divider {
3397
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3398
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3399
- line-height: 1;
3400
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3320
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
3321
+ --pf-v6-c-check__input--TranslateY: none;
3401
3322
  }
3402
3323
 
3403
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3404
- scale: -1 1;
3324
+ .pf-v6-c-menu__item-toggle-icon {
3325
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3405
3326
  }
3406
3327
 
3407
- .pf-v6-c-breadcrumb__link {
3408
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3409
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3410
- font-size: inherit;
3411
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3412
- line-height: inherit;
3413
- color: var(--pf-v6-c-breadcrumb__link--Color);
3414
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3415
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3416
- word-break: break-word;
3417
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3328
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3329
+ scale: -1 1;
3418
3330
  }
3419
3331
 
3420
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3421
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3422
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3423
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3332
+ .pf-v6-c-menu__item-icon {
3333
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3424
3334
  }
3425
3335
 
3426
- .pf-v6-c-breadcrumb__link.pf-m-current {
3427
- cursor: default;
3336
+ .pf-v6-c-menu__item-select-icon,
3337
+ .pf-v6-c-menu__item-external-icon {
3338
+ opacity: 0;
3428
3339
  }
3429
3340
 
3430
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3431
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3432
- text-decoration-line: none;
3341
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3342
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3343
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3344
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3345
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3433
3346
  }
3434
3347
 
3435
- button.pf-v6-c-breadcrumb__link {
3436
- border: none;
3348
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3349
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3350
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3351
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3352
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3437
3353
  }
3438
3354
 
3439
- .pf-v6-c-breadcrumb__dropdown {
3440
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3441
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3442
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3443
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3355
+ .pf-v6-c-menu__breadcrumb {
3356
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3357
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3358
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3359
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3360
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3444
3361
  }
3445
3362
 
3446
- .pf-v6-c-breadcrumb__heading {
3447
- display: inline;
3448
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3363
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3364
+ min-width: auto;
3365
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3366
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3449
3367
  }
3450
3368
 
3451
- .pf-v6-c-breadcrumb__link,
3452
- .pf-v6-c-breadcrumb__heading {
3453
- white-space: normal;
3369
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3370
+ height: auto;
3454
3371
  }
3455
3372
 
3456
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3457
- display: none;
3373
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3374
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3375
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3376
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3458
3377
  }
3459
3378
 
3460
3379
  .pf-v6-c-tooltip {
@@ -3586,4 +3505,86 @@ button.pf-v6-c-breadcrumb__link {
3586
3505
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3587
3506
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3588
3507
  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
+ }
3509
+
3510
+ .pf-v6-c-spinner {
3511
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3512
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3513
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3514
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3515
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3516
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3517
+ --pf-v6-c-spinner--StrokeWidth: 10;
3518
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3519
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3520
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3521
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3522
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3523
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3524
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3525
+ }
3526
+
3527
+ .pf-v6-c-spinner {
3528
+ width: var(--pf-v6-c-spinner--Width);
3529
+ height: var(--pf-v6-c-spinner--Height);
3530
+ overflow: hidden;
3531
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3532
+ }
3533
+
3534
+ .pf-v6-c-spinner.pf-m-inline {
3535
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3536
+ }
3537
+
3538
+ .pf-v6-c-spinner.pf-m-sm {
3539
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3540
+ }
3541
+
3542
+ .pf-v6-c-spinner.pf-m-md {
3543
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3544
+ }
3545
+
3546
+ .pf-v6-c-spinner.pf-m-lg {
3547
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3548
+ }
3549
+
3550
+ .pf-v6-c-spinner.pf-m-xl {
3551
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3552
+ }
3553
+
3554
+ .pf-v6-c-spinner__path {
3555
+ width: 100%;
3556
+ height: 100%;
3557
+ stroke: var(--pf-v6-c-spinner--Color);
3558
+ stroke-dasharray: 283;
3559
+ stroke-dashoffset: 280;
3560
+ stroke-linecap: round;
3561
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3562
+ transform-origin: 50% 50%;
3563
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3564
+ }
3565
+
3566
+ @keyframes pf-v6-c-spinner-animation-rotate {
3567
+ 0% {
3568
+ transform: rotate(0deg);
3569
+ }
3570
+ 100% {
3571
+ transform: rotate(360deg);
3572
+ }
3573
+ }
3574
+ @keyframes pf-v6-c-spinner-animation-dash {
3575
+ 0% {
3576
+ stroke-dashoffset: 280;
3577
+ transform: rotate(0);
3578
+ }
3579
+ 15% {
3580
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3581
+ }
3582
+ 40% {
3583
+ stroke-dasharray: 220;
3584
+ stroke-dashoffset: 150;
3585
+ }
3586
+ 100% {
3587
+ stroke-dashoffset: 280;
3588
+ transform: rotate(720deg);
3589
+ }
3589
3590
  }