@patternfly/react-templates 6.6.2 → 6.7.0-prerelease.1

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,162 +3,6 @@
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);
87
- }
88
-
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;
93
- }
94
-
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
- }
101
-
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);
110
- }
111
-
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);
118
- }
119
-
120
- .pf-v6-c-label-group__list-item {
121
- display: inline-flex;
122
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
123
- }
124
-
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);
130
- }
131
-
132
- .pf-v6-c-label-group__close {
133
- display: flex;
134
- align-self: flex-start;
135
- }
136
-
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);
143
- }
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
- scrollbar-width: none;
154
- -ms-overflow-style: none;
155
- border: 0;
156
- }
157
-
158
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
- display: none;
160
- }
161
-
162
6
  .pf-v6-c-divider {
163
7
  --pf-v6-c-divider--Display: flex;
164
8
  --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
@@ -480,704 +324,176 @@
480
324
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
481
325
  }
482
326
  }
483
- .pf-v6-c-label {
484
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
485
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
486
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
487
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
488
- --pf-v6-c-label--MaxWidth: 100%;
489
- --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
490
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
491
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
492
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
493
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
494
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
495
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
496
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
497
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
498
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
499
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
500
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
501
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
502
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
503
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
504
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
505
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
506
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
507
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
508
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
509
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
510
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
511
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
512
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
513
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
514
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
515
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
516
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
517
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
518
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
519
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
520
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
521
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
522
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
523
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
524
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
525
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
526
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
527
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
528
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
529
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
530
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
531
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
532
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
533
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
534
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
535
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
536
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
537
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
538
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
539
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
540
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
541
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
542
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
543
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
544
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
545
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
546
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
547
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
548
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
549
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
550
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
551
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
552
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
553
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
554
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
555
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
556
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
557
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
558
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
559
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
560
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
561
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
562
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
563
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
564
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
565
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
566
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
567
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
568
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
569
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
570
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
571
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
572
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
573
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
574
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
575
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
576
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
577
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
578
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
579
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
580
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
581
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
582
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
583
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
584
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
585
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
586
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
587
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
588
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
589
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
590
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
591
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
592
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
593
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
594
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
595
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
596
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
597
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
598
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
599
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
600
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
601
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
602
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
603
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
604
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
605
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
606
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
607
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
608
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
609
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
610
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
611
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
612
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
613
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
614
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
615
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
616
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
617
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
618
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
619
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
620
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
621
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
622
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
623
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
624
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
625
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
626
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
627
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
628
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
629
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
630
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
631
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
632
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
633
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
634
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
635
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
636
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
637
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
638
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
639
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
640
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
641
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
642
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
643
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
644
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
645
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
646
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
647
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
648
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
649
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
650
- --pf-v6-c-label__content--MaxWidth: 100%;
651
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
652
- --pf-v6-c-label__content--Cursor: initial;
653
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
654
- --pf-v6-c-label__text--MaxWidth: 100%;
655
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
656
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
657
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
658
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
659
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
660
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
661
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
662
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
663
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
664
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
665
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
666
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
667
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
668
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
669
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
670
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
671
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
672
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
673
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
674
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
675
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
676
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
677
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
678
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
327
+ .pf-v6-c-badge {
328
+ --pf-v6-c-badge--BorderColor: transparent;
329
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
330
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
331
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
332
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
333
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
334
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
335
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
336
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
337
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
338
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
339
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
340
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
341
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
342
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
343
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
344
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
345
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
346
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
347
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
348
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
679
349
  }
680
350
 
681
- .pf-v6-c-label {
351
+ .pf-v6-c-badge {
682
352
  position: relative;
683
- gap: var(--pf-v6-c-label--Gap);
684
- min-width: var(--pf-v6-c-label--MinWidth);
685
- max-width: var(--pf-v6-c-label--MaxWidth);
686
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
687
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
688
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
689
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
690
- font-size: var(--pf-v6-c-label--FontSize);
353
+ display: inline-block;
354
+ min-width: var(--pf-v6-c-badge--MinWidth);
355
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
356
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
357
+ font-size: var(--pf-v6-c-badge--FontSize);
358
+ font-weight: var(--pf-v6-c-badge--FontWeight);
359
+ color: var(--pf-v6-c-badge--Color);
360
+ text-align: center;
691
361
  white-space: nowrap;
692
- background: transparent;
693
- border: 0;
694
- border-radius: var(--pf-v6-c-label--BorderRadius);
695
- isolation: isolate;
696
- }
697
-
698
- .pf-v6-c-label.pf-m-blue {
699
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
700
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
701
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
702
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
703
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
704
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
705
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
706
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
362
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
363
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
707
364
  }
708
365
 
709
- .pf-v6-c-label.pf-m-red {
710
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
711
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
712
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
713
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
714
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
715
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
716
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
717
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
366
+ .pf-v6-c-badge::after {
367
+ position: absolute;
368
+ inset: 0;
369
+ pointer-events: none;
370
+ content: "";
371
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
372
+ border-radius: inherit;
718
373
  }
719
374
 
720
- .pf-v6-c-label.pf-m-orange {
721
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
722
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
723
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
724
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
725
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
726
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
727
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
728
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
375
+ .pf-v6-c-badge.pf-m-read {
376
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
377
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
378
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
379
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
729
380
  }
730
381
 
731
- .pf-v6-c-label.pf-m-orangered {
732
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
733
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
734
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
735
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
736
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
737
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
738
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
739
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
382
+ .pf-v6-c-badge.pf-m-unread {
383
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
384
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
385
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
740
386
  }
741
387
 
742
- .pf-v6-c-label.pf-m-yellow {
743
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
744
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
745
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
746
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
747
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
748
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
749
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
750
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
388
+ .pf-v6-c-badge.pf-m-disabled {
389
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
390
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
751
391
  }
752
392
 
753
- .pf-v6-c-label.pf-m-green {
754
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
755
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
756
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
757
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
758
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
759
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
760
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
761
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
393
+ .pf-v6-c-badge.pf-m-disabled::after {
394
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
762
395
  }
763
396
 
764
- .pf-v6-c-label.pf-m-teal {
765
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
766
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
767
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
768
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
769
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
770
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
771
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
772
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
397
+ .pf-v6-c-badge__toggle-icon {
398
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
399
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
773
400
  }
774
401
 
775
- .pf-v6-c-label.pf-m-purple {
776
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
777
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
778
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
779
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
780
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
781
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
782
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
783
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
402
+ .pf-v6-c-check {
403
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
404
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
405
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
406
+ --pf-v6-c-check--m-standalone--before--Inset: calc(var(--pf-t--global--spacer--sm) * -1);
407
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
408
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
409
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
410
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
411
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
412
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
413
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
414
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
415
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
416
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
417
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
784
418
  }
785
419
 
786
- .pf-v6-c-label.pf-m-success {
787
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
788
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
789
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
790
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
791
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
792
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
793
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
794
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
795
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
796
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
797
- }
798
-
799
- .pf-v6-c-label.pf-m-warning {
800
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
801
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
802
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
803
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
804
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
805
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
806
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
807
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
808
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
809
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
810
- }
811
-
812
- .pf-v6-c-label.pf-m-danger {
813
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
814
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
815
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
816
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
817
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
818
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
819
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
820
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
821
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
822
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
823
- }
824
-
825
- .pf-v6-c-label.pf-m-info {
826
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
827
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
828
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
829
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
830
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
831
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
832
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
833
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
834
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
835
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
836
- }
837
-
838
- .pf-v6-c-label.pf-m-custom {
839
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
840
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
841
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
842
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
843
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
844
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
845
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
846
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
847
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
848
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
849
- }
850
-
851
- .pf-v6-c-label.pf-m-compact {
852
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
853
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
854
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
855
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
856
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
857
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
858
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
859
- }
860
-
861
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
862
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
863
- }
864
-
865
- .pf-v6-c-label.pf-m-outline {
866
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
867
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
868
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
869
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
870
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
871
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
872
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
873
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
874
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
875
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
876
- }
877
-
878
- .pf-v6-c-label.pf-m-editable {
879
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
880
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
881
- }
882
-
883
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
884
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
885
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
886
- }
887
-
888
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
889
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
890
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
891
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
892
- }
893
-
894
- .pf-v6-c-label.pf-m-editable-active {
895
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
896
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
897
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
898
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
899
- }
900
-
901
- .pf-v6-c-label.pf-m-overflow {
902
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
903
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
904
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
905
- }
906
-
907
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
908
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
909
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
910
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
911
- }
912
-
913
- .pf-v6-c-label.pf-m-add {
914
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
915
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
916
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
917
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
918
- }
919
-
920
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
921
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
922
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
923
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
924
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
925
- }
926
-
927
- .pf-v6-c-label.pf-m-clickable {
928
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
929
- }
930
-
931
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
932
- text-decoration-line: none;
420
+ .pf-v6-c-check {
421
+ display: grid;
422
+ grid-template-columns: auto 1fr;
423
+ gap: var(--pf-v6-c-check--GridGap);
424
+ accent-color: var(--pf-v6-c-check--AccentColor);
933
425
  }
934
426
 
935
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
936
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
937
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
938
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
939
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
940
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
941
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
942
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
427
+ .pf-v6-c-check.pf-m-standalone {
428
+ display: inline-grid;
429
+ grid-template-columns: auto;
430
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
943
431
  }
944
432
 
945
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
946
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
433
+ label.pf-v6-c-check.pf-m-standalone {
434
+ position: relative;
435
+ isolation: isolate;
947
436
  }
948
437
 
949
- .pf-v6-c-label.pf-m-disabled {
950
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
951
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
952
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
953
- --pf-v6-c-label--BorderWidth: 0;
954
- pointer-events: none;
438
+ label.pf-v6-c-check.pf-m-standalone::before {
439
+ position: absolute;
440
+ inset: var(--pf-v6-c-check--m-standalone--before--Inset);
441
+ z-index: -1;
442
+ pointer-events: auto;
443
+ cursor: inherit;
444
+ content: "";
955
445
  }
956
446
 
957
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
958
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
447
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
448
+ align-self: center;
449
+ transform: none;
959
450
  }
960
451
 
961
- .pf-v6-c-label,
962
- .pf-v6-c-label__content {
963
- display: inline-flex;
964
- align-items: center;
965
- justify-content: center;
452
+ .pf-v6-c-check__input {
453
+ align-self: start;
454
+ font-size: var(--pf-v6-c-check__label--FontSize);
455
+ line-height: var(--pf-v6-c-check__label--LineHeight);
456
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
966
457
  }
967
458
 
968
- .pf-v6-c-label__text {
969
- overflow: hidden;
970
- text-overflow: ellipsis;
971
- white-space: nowrap;
972
- max-width: var(--pf-v6-c-label__text--MaxWidth);
459
+ .pf-v6-c-check__label {
460
+ font-size: var(--pf-v6-c-check__label--FontSize);
461
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
462
+ line-height: var(--pf-v6-c-check__label--LineHeight);
463
+ color: var(--pf-v6-c-check__label--Color);
973
464
  }
974
465
 
975
- .pf-v6-c-label__content {
976
- gap: var(--pf-v6-c-label__content--Gap);
977
- max-width: var(--pf-v6-c-label__content--MaxWidth);
978
- padding: 0;
979
- overflow: hidden;
980
- color: var(--pf-v6-c-label--Color);
981
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
982
- background: transparent;
983
- border-width: 0;
466
+ .pf-v6-c-check__description {
467
+ grid-column: 2;
468
+ font-size: var(--pf-v6-c-check__description--FontSize);
469
+ color: var(--pf-v6-c-check__description--Color);
984
470
  }
985
471
 
986
- .pf-v6-c-label__content::before {
987
- position: absolute;
988
- inset: 0;
989
- z-index: -1;
990
- pointer-events: none;
991
- content: "";
992
- background-color: var(--pf-v6-c-label--BackgroundColor);
993
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
994
- border-radius: var(--pf-v6-c-label--BorderRadius);
472
+ .pf-v6-c-check__body {
473
+ grid-column: 2;
995
474
  }
996
475
 
997
- input.pf-v6-c-label__content {
998
- overflow: hidden;
999
- text-overflow: ellipsis;
1000
- white-space: nowrap;
476
+ .pf-v6-c-check__label,
477
+ .pf-v6-c-check__input {
478
+ justify-self: start;
1001
479
  }
1002
480
 
1003
- .pf-v6-c-label__icon {
1004
- color: var(--pf-v6-c-label__icon--Color);
481
+ label.pf-v6-c-check, .pf-v6-c-check__label,
482
+ .pf-v6-c-check__input {
483
+ cursor: pointer;
1005
484
  }
1006
485
 
1007
- .pf-v6-c-label__actions {
1008
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
486
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
487
+ .pf-v6-c-check__input:disabled,
488
+ .pf-v6-c-check__input.pf-m-disabled {
489
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
490
+ cursor: not-allowed;
1009
491
  }
1010
492
 
1011
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1012
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1013
- }
1014
-
1015
- .pf-v6-c-label__actions .pf-v6-c-button {
1016
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1017
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1018
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1019
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1020
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1021
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1022
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1023
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1024
- }
1025
-
1026
- .pf-v6-c-check {
1027
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1028
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1029
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1030
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1031
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1032
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1033
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1034
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1035
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1036
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1037
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1038
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1039
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1040
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1041
- }
1042
-
1043
- .pf-v6-c-check {
1044
- display: grid;
1045
- grid-template-columns: auto 1fr;
1046
- gap: var(--pf-v6-c-check--GridGap);
1047
- accent-color: var(--pf-v6-c-check--AccentColor);
1048
- }
1049
-
1050
- .pf-v6-c-check.pf-m-standalone {
1051
- display: inline-grid;
1052
- grid-template-columns: auto;
1053
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1054
- }
1055
-
1056
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1057
- align-self: center;
1058
- transform: none;
1059
- }
1060
-
1061
- .pf-v6-c-check__input {
1062
- align-self: start;
1063
- font-size: var(--pf-v6-c-check__label--FontSize);
1064
- line-height: var(--pf-v6-c-check__label--LineHeight);
1065
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1066
- }
1067
-
1068
- .pf-v6-c-check__label {
1069
- font-size: var(--pf-v6-c-check__label--FontSize);
1070
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1071
- line-height: var(--pf-v6-c-check__label--LineHeight);
1072
- color: var(--pf-v6-c-check__label--Color);
1073
- }
1074
-
1075
- .pf-v6-c-check__description {
1076
- grid-column: 2;
1077
- font-size: var(--pf-v6-c-check__description--FontSize);
1078
- color: var(--pf-v6-c-check__description--Color);
1079
- }
1080
-
1081
- .pf-v6-c-check__body {
1082
- grid-column: 2;
1083
- }
1084
-
1085
- .pf-v6-c-check__label,
1086
- .pf-v6-c-check__input {
1087
- justify-self: start;
1088
- }
1089
-
1090
- label.pf-v6-c-check, .pf-v6-c-check__label,
1091
- .pf-v6-c-check__input {
1092
- cursor: pointer;
1093
- }
1094
-
1095
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1096
- .pf-v6-c-check__input:disabled,
1097
- .pf-v6-c-check__input.pf-m-disabled {
1098
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1099
- cursor: not-allowed;
1100
- }
1101
-
1102
- .pf-v6-c-check__label-required {
1103
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1104
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1105
- color: var(--pf-v6-c-check__label-required--Color);
1106
- }
1107
-
1108
- .pf-v6-c-badge {
1109
- --pf-v6-c-badge--BorderColor: transparent;
1110
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1111
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1112
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1113
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1114
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1115
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1116
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1117
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1118
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1119
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1120
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1121
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1122
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1123
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1124
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1125
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1126
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1127
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1128
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1129
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1130
- }
1131
-
1132
- .pf-v6-c-badge {
1133
- position: relative;
1134
- display: inline-block;
1135
- min-width: var(--pf-v6-c-badge--MinWidth);
1136
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1137
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1138
- font-size: var(--pf-v6-c-badge--FontSize);
1139
- font-weight: var(--pf-v6-c-badge--FontWeight);
1140
- color: var(--pf-v6-c-badge--Color);
1141
- text-align: center;
1142
- white-space: nowrap;
1143
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1144
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1145
- }
1146
-
1147
- .pf-v6-c-badge::after {
1148
- position: absolute;
1149
- inset: 0;
1150
- pointer-events: none;
1151
- content: "";
1152
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1153
- border-radius: inherit;
1154
- }
1155
-
1156
- .pf-v6-c-badge.pf-m-read {
1157
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
1158
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1159
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1160
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1161
- }
1162
-
1163
- .pf-v6-c-badge.pf-m-unread {
1164
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1165
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1166
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1167
- }
1168
-
1169
- .pf-v6-c-badge.pf-m-disabled {
1170
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1171
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1172
- }
1173
-
1174
- .pf-v6-c-badge.pf-m-disabled::after {
1175
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1176
- }
1177
-
1178
- .pf-v6-c-badge__toggle-icon {
1179
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1180
- color: var(--pf-v6-c-badge__toggle-icon--Color);
493
+ .pf-v6-c-check__label-required {
494
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
495
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
496
+ color: var(--pf-v6-c-check__label-required--Color);
1181
497
  }
1182
498
 
1183
499
  .pf-v6-c-button {
@@ -1195,6 +511,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1195
511
  --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1196
512
  --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1197
513
  --pf-v6-c-button--BackgroundColor: transparent;
514
+ --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
1198
515
  --pf-v6-c-button--BorderColor: transparent;
1199
516
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1200
517
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -1433,6 +750,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1433
750
  --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
1434
751
  --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
1435
752
  --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
753
+ --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
1436
754
  --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
1437
755
  --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
1438
756
  --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -1508,12 +826,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1508
826
  --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
1509
827
  --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1510
828
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1511
- --pf-v6-c-button__progress--Opacity: 0;
1512
829
  --pf-v6-c-button__progress--TranslateY: -50%;
1513
830
  --pf-v6-c-button__progress--TranslateX: 0;
1514
831
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
1515
832
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1516
833
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
834
+ --pf-v6-c-button__progress--Position: absolute;
1517
835
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1518
836
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
1519
837
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -1521,6 +839,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1521
839
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
1522
840
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1523
841
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
842
+ --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
843
+ --pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
1524
844
  --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1525
845
  --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1526
846
  --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
@@ -1570,7 +890,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1570
890
  cursor: pointer;
1571
891
  -webkit-user-select: none;
1572
892
  user-select: none;
1573
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
893
+ background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
1574
894
  border: 0;
1575
895
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1576
896
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -1886,7 +1206,17 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1886
1206
 
1887
1207
  .pf-v6-c-button.pf-m-block {
1888
1208
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
1209
+ --pf-v6-c-button__progress--Position: relative;
1210
+ --pf-v6-c-button__progress--InsetBlockStart: 0;
1211
+ --pf-v6-c-button__progress--InsetInlineStart: 0;
1212
+ --pf-v6-c-button__progress--TranslateY: 0;
1889
1213
  width: var(--pf-v6-c-button--m-block--Width);
1214
+ transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
1215
+ transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
1216
+ }
1217
+
1218
+ .pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
1219
+ align-self: center;
1890
1220
  }
1891
1221
 
1892
1222
  .pf-v6-c-button.pf-m-small {
@@ -1973,7 +1303,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1973
1303
  --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1974
1304
  --pf-v6-c-button__icon--TransitionDuration: 0s;
1975
1305
  --pf-v6-c-button__icon--TransitionProperty: scale;
1976
- --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1977
1306
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1978
1307
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
1979
1308
  }
@@ -2054,11 +1383,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2054
1383
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2055
1384
  color: var(--pf-v6-c-button--disabled--Color);
2056
1385
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2057
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
1386
+ background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
2058
1387
  }
2059
1388
 
2060
1389
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2061
- border-color: transparent;
1390
+ border-color: var(--pf-v6-c-button--disabled--BorderColor);
2062
1391
  }
2063
1392
 
2064
1393
  .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
@@ -2117,12 +1446,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2117
1446
  display: none;
2118
1447
  }
2119
1448
  }
2120
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
1449
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) {
2121
1450
  justify-content: flex-start;
2122
1451
  width: 100%;
2123
1452
  }
2124
1453
 
2125
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
1454
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button__text {
2126
1455
  display: revert;
2127
1456
  }
2128
1457
 
@@ -2162,7 +1491,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2162
1491
  }
2163
1492
 
2164
1493
  .pf-v6-c-button__progress {
2165
- position: absolute;
1494
+ position: var(--pf-v6-c-button__progress--Position);
2166
1495
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2167
1496
  inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2168
1497
  line-height: 1;
@@ -2518,552 +1847,1377 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2518
1847
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
2519
1848
  }
2520
1849
 
2521
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1850
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
1851
+ border: 0;
1852
+ }
1853
+
1854
+ .pf-v6-c-menu-toggle.pf-m-small {
1855
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1856
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1857
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1858
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1859
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1860
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1861
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1862
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
1863
+ }
1864
+
1865
+ .pf-v6-c-menu-toggle.pf-m-success {
1866
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1867
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
1868
+ }
1869
+
1870
+ .pf-v6-c-menu-toggle.pf-m-warning {
1871
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1872
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
1873
+ }
1874
+
1875
+ .pf-v6-c-menu-toggle.pf-m-danger {
1876
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1877
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
1878
+ }
1879
+
1880
+ @media screen and (prefers-reduced-motion: no-preference) {
1881
+ .pf-v6-c-menu-toggle.pf-m-danger {
1882
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1883
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1884
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1885
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1886
+ animation-fill-mode: both;
1887
+ }
1888
+ }
1889
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1890
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1891
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1892
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
1893
+ }
1894
+
1895
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1896
+ from {
1897
+ opacity: 0;
1898
+ }
1899
+ to {
1900
+ opacity: 1;
1901
+ }
1902
+ }
1903
+ .pf-v6-c-menu-toggle.pf-m-settings {
1904
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1905
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1906
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1907
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1908
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1909
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1910
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1911
+ }
1912
+
1913
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1914
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1915
+ }
1916
+
1917
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1918
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1919
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1920
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1921
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1922
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
1923
+ }
1924
+
1925
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1926
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1927
+ pointer-events: none;
1928
+ }
1929
+
1930
+ .pf-v6-c-menu-toggle.pf-m-docked {
1931
+ justify-content: flex-start;
1932
+ width: 100%;
1933
+ }
1934
+
1935
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
1936
+ min-width: 1lh;
1937
+ }
1938
+
1939
+ @media (min-width: 62rem) {
1940
+ .pf-v6-c-menu-toggle.pf-m-docked {
1941
+ justify-content: center;
1942
+ width: auto;
1943
+ }
1944
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
1945
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
1946
+ display: none;
1947
+ }
1948
+ }
1949
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle:is(.pf-m-text-expanded, .pf-m-expandable-expanded) {
1950
+ justify-content: flex-start;
1951
+ width: 100%;
1952
+ }
1953
+
1954
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
1955
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle:is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-menu-toggle__text,
1956
+ .pf-v6-c-menu-toggle:is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-menu-toggle__controls {
1957
+ display: revert;
1958
+ }
1959
+
1960
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1961
+ syntax: "<length>";
1962
+ inherits: false;
1963
+ initial-value: 0;
1964
+ }
1965
+ @media (prefers-reduced-motion: no-preference) {
1966
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1967
+ 33% {
1968
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1969
+ }
1970
+ 66% {
1971
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1972
+ }
1973
+ }
1974
+ }
1975
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1976
+ --pf-v6-c-menu-toggle--Gap: 0;
1977
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1978
+ padding: 0;
1979
+ }
1980
+
1981
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1982
+ position: relative;
1983
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1984
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1985
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1986
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
1987
+ }
1988
+
1989
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1990
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1991
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1992
+ }
1993
+
1994
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1995
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1996
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1997
+ }
1998
+
1999
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
2000
+ --pf-v6-c-check__label--Color: currentcolor;
2001
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
2002
+ align-items: center;
2003
+ align-self: stretch;
2004
+ }
2005
+
2006
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
2007
+ --pf-v6-c-check__input--TranslateY: 0;
2008
+ align-self: center;
2009
+ }
2010
+
2011
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
2012
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
2013
+ }
2014
+
2015
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
2016
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2017
+ }
2018
+
2019
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
2020
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
2021
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2022
+ }
2023
+
2024
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
2025
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
2026
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
2027
+ }
2028
+
2029
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
2030
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
2031
+ }
2032
+
2033
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
2034
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2035
+ }
2036
+
2037
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2038
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2039
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
2040
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2041
+ }
2042
+
2043
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2044
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2045
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
2046
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2047
+ }
2048
+
2049
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
2050
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2051
+ }
2052
+
2053
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
2054
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
2055
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
2056
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2057
+ }
2058
+
2059
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
2060
+ content: none;
2061
+ }
2062
+
2063
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
2064
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
2065
+ --pf-v6-c-menu-toggle--Gap: 0;
2066
+ align-items: stretch;
2067
+ padding: 0;
2068
+ }
2069
+
2070
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
2071
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2072
+ }
2073
+
2074
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
2075
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2076
+ display: flex;
2077
+ align-items: stretch;
2078
+ }
2079
+
2080
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
2081
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
2082
+ flex: 1;
2083
+ }
2084
+
2085
+ .pf-v6-c-menu-toggle__button {
2086
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
2087
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
2088
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
2089
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
2090
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
2091
+ color: inherit;
2092
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
2093
+ border: 0;
2094
+ }
2095
+
2096
+ .pf-v6-c-menu-toggle__button.pf-m-text {
2097
+ display: inline-flex;
2098
+ align-items: baseline;
2099
+ }
2100
+
2101
+ .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) {
2102
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2103
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2104
+ }
2105
+
2106
+ .pf-v6-c-menu-toggle__text {
2107
+ overflow: hidden;
2108
+ text-overflow: ellipsis;
2109
+ white-space: nowrap;
2110
+ min-width: 0;
2111
+ }
2112
+
2113
+ .pf-v6-c-menu-toggle__count {
2114
+ display: flex;
2115
+ flex-wrap: nowrap;
2116
+ }
2117
+
2118
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2119
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2120
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
2121
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2122
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2123
+ }
2124
+
2125
+ .pf-v6-c-menu-toggle__icon {
2126
+ flex-shrink: 0;
2127
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
2128
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
2129
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
2130
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
2131
+ }
2132
+
2133
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
2134
+ vertical-align: middle;
2135
+ }
2136
+
2137
+ .pf-v6-c-menu-toggle__controls {
2138
+ display: flex;
2139
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2140
+ align-items: center;
2141
+ justify-content: center;
2142
+ margin-inline-start: auto;
2143
+ }
2144
+
2145
+ .pf-v6-c-menu-toggle__toggle-icon {
2146
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2147
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2148
+ }
2149
+
2150
+ .pf-v6-c-menu-toggle__status-icon {
2151
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2152
+ }
2153
+
2154
+ .pf-v6-c-text-input-group {
2155
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2156
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2157
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2158
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2159
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2160
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2161
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2162
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2163
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2164
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2165
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2166
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2167
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2168
+ --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));
2169
+ --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));
2170
+ --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));
2171
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2172
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2173
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2174
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2175
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2176
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2177
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2178
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2179
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2180
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2181
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2182
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2183
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2184
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2185
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2186
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2187
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2188
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2189
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2190
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2191
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2192
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2193
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2194
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2195
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2196
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2197
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2198
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2199
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2200
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2201
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2202
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2203
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2204
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2205
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2206
+ }
2207
+
2208
+ .pf-v6-c-text-input-group {
2209
+ position: relative;
2210
+ display: flex;
2211
+ width: 100%;
2212
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2213
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2214
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2215
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2216
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2217
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2218
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2219
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2220
+ }
2221
+
2222
+ .pf-v6-c-text-input-group::before {
2223
+ position: absolute;
2224
+ inset: 0;
2225
+ pointer-events: none;
2226
+ content: "";
2227
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2228
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2229
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2230
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2231
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2232
+ }
2233
+
2234
+ .pf-v6-c-text-input-group.pf-m-disabled {
2235
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2236
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2237
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2238
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2239
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2240
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2241
+ pointer-events: none;
2242
+ }
2243
+
2244
+ .pf-v6-c-text-input-group.pf-m-plain {
2245
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2246
+ }
2247
+
2248
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2249
+ border: 0;
2250
+ }
2251
+
2252
+ .pf-v6-c-text-input-group.pf-m-success {
2253
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2254
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2255
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2256
+ }
2257
+
2258
+ .pf-v6-c-text-input-group.pf-m-warning {
2259
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2260
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2261
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2262
+ }
2263
+
2264
+ .pf-v6-c-text-input-group.pf-m-error {
2265
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2266
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2267
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2268
+ }
2269
+
2270
+ @media (prefers-reduced-motion: no-preference) {
2271
+ .pf-v6-c-text-input-group.pf-m-error {
2272
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2273
+ animation-name: pf-v6-global-danger-jiggle-motion;
2274
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2275
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2276
+ animation-fill-mode: both;
2277
+ }
2278
+ }
2279
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2280
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2281
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2282
+ animation-name: pf-v6-global-fade-in;
2283
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2284
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2285
+ }
2286
+
2287
+ .pf-v6-c-text-input-group:hover {
2288
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2289
+ }
2290
+
2291
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2292
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2293
+ }
2294
+
2295
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2296
+ --pf-v6-c-text-input-group__text--Position: relative;
2297
+ }
2298
+
2299
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2300
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2301
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2302
+ }
2303
+
2304
+ .pf-v6-c-text-input-group__main {
2305
+ display: flex;
2306
+ flex: 1;
2307
+ flex-wrap: wrap;
2308
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2309
+ min-width: 0;
2310
+ }
2311
+
2312
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2313
+ --pf-v6-c-text-input-group__text--Position: relative;
2314
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2315
+ display: inline-flex;
2316
+ align-items: center;
2317
+ justify-content: center;
2318
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2319
+ }
2320
+
2321
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2322
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2323
+ }
2324
+
2325
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2326
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2327
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2328
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2329
+ }
2330
+
2331
+ .pf-v6-c-text-input-group__text {
2332
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2333
+ display: inline-grid;
2334
+ flex: 1;
2335
+ grid-template-areas: "text-input";
2336
+ grid-template-columns: 1fr;
2337
+ }
2338
+
2339
+ .pf-v6-c-text-input-group__icon {
2340
+ position: absolute;
2341
+ inset-block-start: 50%;
2342
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2343
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2344
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2345
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2346
+ }
2347
+
2348
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2349
+ inset-inline-start: auto;
2350
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2351
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2352
+ }
2353
+
2354
+ .pf-v6-c-text-input-group__text-input {
2355
+ overflow: hidden;
2356
+ text-overflow: ellipsis;
2357
+ white-space: nowrap;
2358
+ position: relative;
2359
+ width: 100%;
2360
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2361
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2362
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2363
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2364
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2365
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2366
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2367
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2368
+ border: 0;
2369
+ }
2370
+
2371
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2372
+ grid-area: text-input;
2373
+ }
2374
+
2375
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2376
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2377
+ }
2378
+
2379
+ .pf-v6-c-text-input-group__text-input::placeholder {
2380
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2381
+ }
2382
+
2383
+ .pf-v6-c-text-input-group__utilities {
2384
+ display: flex;
2385
+ align-items: center;
2386
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2387
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2388
+ }
2389
+
2390
+ .pf-v6-c-text-input-group__utilities > * + * {
2391
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2392
+ }
2393
+
2394
+ .pf-v6-c-text-input-group__group {
2395
+ display: flex;
2396
+ }
2397
+
2398
+ .pf-v6-c-label {
2399
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2400
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2401
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2402
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2403
+ --pf-v6-c-label--MaxWidth: 100%;
2404
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
2405
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2406
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
2407
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
2408
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
2409
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2410
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2411
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2412
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2413
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
2414
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
2415
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
2416
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
2417
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
2418
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
2419
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
2420
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
2421
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
2422
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
2423
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
2424
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
2425
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
2426
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
2427
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
2428
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
2429
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
2430
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
2431
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
2432
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
2433
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
2434
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
2435
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
2436
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
2437
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
2438
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
2439
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
2440
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
2441
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
2442
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
2443
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
2444
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
2445
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
2446
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
2447
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
2448
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
2449
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
2450
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
2451
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
2452
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
2453
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
2454
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
2455
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
2456
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
2457
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
2458
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
2459
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
2460
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
2461
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
2462
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
2463
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
2464
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
2465
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
2466
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
2467
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
2468
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
2469
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
2470
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
2471
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
2472
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
2473
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
2474
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
2475
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
2476
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
2477
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
2478
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
2479
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
2480
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
2481
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
2482
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
2483
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
2484
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
2485
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
2486
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
2487
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
2488
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
2489
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
2490
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2491
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
2492
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
2493
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
2494
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
2495
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
2496
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
2497
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
2498
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2499
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2500
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2501
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
2502
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
2503
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
2504
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
2505
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
2506
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
2507
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2508
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2509
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2510
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2511
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2512
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2513
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2514
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2515
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2516
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2517
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2518
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2519
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2520
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2521
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2522
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2523
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2524
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2525
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2526
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2527
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2528
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2529
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2530
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2531
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2532
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2533
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2534
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2535
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2536
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2537
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2538
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2539
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2540
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2541
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2542
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2543
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2544
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2545
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2546
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2547
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2548
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2549
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2550
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2551
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
2552
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2553
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2554
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2555
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2556
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2557
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2558
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2559
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2560
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2561
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2562
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2563
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2564
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
2565
+ --pf-v6-c-label__content--MaxWidth: 100%;
2566
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2567
+ --pf-v6-c-label__content--Cursor: initial;
2568
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2569
+ --pf-v6-c-label__text--MaxWidth: 100%;
2570
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
2571
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2572
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2573
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2574
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2575
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2576
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2577
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2578
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2579
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2580
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2581
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2582
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2583
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2584
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2585
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
2586
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2587
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2588
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2589
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2590
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2591
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2592
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2593
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2594
+ }
2595
+
2596
+ .pf-v6-c-label {
2597
+ position: relative;
2598
+ gap: var(--pf-v6-c-label--Gap);
2599
+ min-width: var(--pf-v6-c-label--MinWidth);
2600
+ max-width: var(--pf-v6-c-label--MaxWidth);
2601
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2602
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2603
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2604
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2605
+ font-size: var(--pf-v6-c-label--FontSize);
2606
+ white-space: nowrap;
2607
+ background: transparent;
2522
2608
  border: 0;
2609
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2610
+ isolation: isolate;
2523
2611
  }
2524
2612
 
2525
- .pf-v6-c-menu-toggle.pf-m-small {
2526
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
2527
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
2528
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
2529
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
2530
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
2531
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
2532
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
2533
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
2534
- }
2535
-
2536
- .pf-v6-c-menu-toggle.pf-m-success {
2537
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
2538
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
2539
- }
2540
-
2541
- .pf-v6-c-menu-toggle.pf-m-warning {
2542
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
2543
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
2544
- }
2545
-
2546
- .pf-v6-c-menu-toggle.pf-m-danger {
2547
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
2548
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
2613
+ .pf-v6-c-label.pf-m-blue {
2614
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2615
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2616
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2617
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2618
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2619
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2620
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2621
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2549
2622
  }
2550
2623
 
2551
- @media screen and (prefers-reduced-motion: no-preference) {
2552
- .pf-v6-c-menu-toggle.pf-m-danger {
2553
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
2554
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
2555
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
2556
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
2557
- animation-fill-mode: both;
2558
- }
2559
- }
2560
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
2561
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
2562
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
2563
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
2624
+ .pf-v6-c-label.pf-m-red {
2625
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2626
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2627
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2628
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2629
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2630
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2631
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2632
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2564
2633
  }
2565
2634
 
2566
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
2567
- from {
2568
- opacity: 0;
2569
- }
2570
- to {
2571
- opacity: 1;
2572
- }
2573
- }
2574
- .pf-v6-c-menu-toggle.pf-m-settings {
2575
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
2576
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
2577
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
2578
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
2579
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
2580
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
2581
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
2635
+ .pf-v6-c-label.pf-m-orange {
2636
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2637
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2638
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2639
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2640
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2641
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2642
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2643
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2582
2644
  }
2583
2645
 
2584
- .pf-v6-c-menu-toggle.pf-m-placeholder {
2585
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
2646
+ .pf-v6-c-label.pf-m-orangered {
2647
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2648
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2649
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2650
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2651
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2652
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2653
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2654
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2586
2655
  }
2587
2656
 
2588
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
2589
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
2590
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
2591
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
2592
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
2593
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
2657
+ .pf-v6-c-label.pf-m-yellow {
2658
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2659
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2660
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2661
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2662
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2663
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2664
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2665
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2594
2666
  }
2595
2667
 
2596
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
2597
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
2598
- pointer-events: none;
2668
+ .pf-v6-c-label.pf-m-green {
2669
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2670
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2671
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2672
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2673
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2674
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2675
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2676
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2599
2677
  }
2600
2678
 
2601
- .pf-v6-c-menu-toggle.pf-m-docked {
2602
- justify-content: flex-start;
2603
- width: 100%;
2679
+ .pf-v6-c-label.pf-m-teal {
2680
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2681
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2682
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2683
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2684
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2685
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2686
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2687
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2604
2688
  }
2605
2689
 
2606
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
2607
- min-width: 1lh;
2690
+ .pf-v6-c-label.pf-m-purple {
2691
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2692
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2693
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2694
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2695
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2696
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2697
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2698
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2608
2699
  }
2609
2700
 
2610
- @media (min-width: 62rem) {
2611
- .pf-v6-c-menu-toggle.pf-m-docked {
2612
- justify-content: center;
2613
- width: auto;
2614
- }
2615
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
2616
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
2617
- display: none;
2618
- }
2619
- }
2620
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
2621
- justify-content: flex-start;
2622
- width: 100%;
2701
+ .pf-v6-c-label.pf-m-success {
2702
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2703
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2704
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2705
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2706
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2707
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2708
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2709
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2710
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2711
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2623
2712
  }
2624
2713
 
2625
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
2626
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
2627
- .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
2628
- display: revert;
2714
+ .pf-v6-c-label.pf-m-warning {
2715
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2716
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2717
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2718
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2719
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2720
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2721
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2722
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2723
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2724
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
2629
2725
  }
2630
2726
 
2631
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
2632
- syntax: "<length>";
2633
- inherits: false;
2634
- initial-value: 0;
2635
- }
2636
- @media (prefers-reduced-motion: no-preference) {
2637
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
2638
- 33% {
2639
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
2640
- }
2641
- 66% {
2642
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
2643
- }
2644
- }
2645
- }
2646
- .pf-v6-c-menu-toggle.pf-m-split-button {
2647
- --pf-v6-c-menu-toggle--Gap: 0;
2648
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
2649
- padding: 0;
2727
+ .pf-v6-c-label.pf-m-danger {
2728
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2729
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2730
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2731
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2732
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2733
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2734
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2735
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2736
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2737
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
2650
2738
  }
2651
2739
 
2652
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
2653
- position: relative;
2654
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2655
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2656
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2657
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2740
+ .pf-v6-c-label.pf-m-info {
2741
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2742
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2743
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2744
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2745
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2746
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2747
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2748
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2749
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2750
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
2658
2751
  }
2659
2752
 
2660
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
2661
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2662
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2753
+ .pf-v6-c-label.pf-m-custom {
2754
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2755
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2756
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2757
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2758
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2759
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2760
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2761
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2762
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2763
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2663
2764
  }
2664
2765
 
2665
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
2666
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2667
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2766
+ .pf-v6-c-label.pf-m-compact {
2767
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2768
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2769
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2770
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2771
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2772
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2773
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2668
2774
  }
2669
2775
 
2670
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
2671
- --pf-v6-c-check__label--Color: currentcolor;
2672
- --pf-v6-c-check__label--disabled--Color: currentcolor;
2673
- align-items: center;
2674
- align-self: stretch;
2776
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2777
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2675
2778
  }
2676
2779
 
2677
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
2678
- --pf-v6-c-check__input--TranslateY: 0;
2679
- align-self: center;
2780
+ .pf-v6-c-label.pf-m-outline {
2781
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2782
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2783
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2784
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2785
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2786
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2787
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2788
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2789
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2790
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2680
2791
  }
2681
2792
 
2682
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
2683
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
2793
+ .pf-v6-c-label.pf-m-editable {
2794
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2795
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2684
2796
  }
2685
2797
 
2686
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
2687
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2798
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2799
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2800
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2688
2801
  }
2689
2802
 
2690
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
2691
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
2692
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2803
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2804
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2805
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2806
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2693
2807
  }
2694
2808
 
2695
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
2696
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
2697
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
2809
+ .pf-v6-c-label.pf-m-editable-active {
2810
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2811
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2812
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2813
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2698
2814
  }
2699
2815
 
2700
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
2701
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
2816
+ .pf-v6-c-label.pf-m-overflow {
2817
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2818
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2819
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2702
2820
  }
2703
2821
 
2704
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
2705
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2822
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2823
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2824
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2825
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2706
2826
  }
2707
2827
 
2708
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2709
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
2710
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
2711
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2828
+ .pf-v6-c-label.pf-m-add {
2829
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2830
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2831
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2832
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2712
2833
  }
2713
2834
 
2714
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2715
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
2716
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
2717
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2835
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2836
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2837
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2838
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2839
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2718
2840
  }
2719
2841
 
2720
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
2721
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2842
+ .pf-v6-c-label.pf-m-clickable {
2843
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2722
2844
  }
2723
2845
 
2724
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
2725
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
2726
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
2727
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2846
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2847
+ text-decoration-line: none;
2728
2848
  }
2729
2849
 
2730
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
2731
- content: none;
2850
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2851
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2852
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2853
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2854
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2855
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2856
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2857
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2732
2858
  }
2733
2859
 
2734
- .pf-v6-c-menu-toggle.pf-m-typeahead {
2735
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
2736
- --pf-v6-c-menu-toggle--Gap: 0;
2737
- align-items: stretch;
2738
- padding: 0;
2860
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2861
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2739
2862
  }
2740
2863
 
2741
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
2742
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2864
+ .pf-v6-c-label.pf-m-disabled {
2865
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2866
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2867
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2868
+ --pf-v6-c-label--BorderWidth: 0;
2869
+ pointer-events: none;
2743
2870
  }
2744
2871
 
2745
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
2746
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2747
- display: flex;
2748
- align-items: stretch;
2872
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2873
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2749
2874
  }
2750
2875
 
2751
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
2752
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
2753
- flex: 1;
2876
+ .pf-v6-c-label,
2877
+ .pf-v6-c-label__content {
2878
+ display: inline-flex;
2879
+ align-items: center;
2880
+ justify-content: center;
2754
2881
  }
2755
2882
 
2756
- .pf-v6-c-menu-toggle__button {
2757
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
2758
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
2759
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
2760
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
2761
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
2762
- color: inherit;
2763
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
2764
- border: 0;
2883
+ .pf-v6-c-label__text {
2884
+ overflow: hidden;
2885
+ text-overflow: ellipsis;
2886
+ white-space: nowrap;
2887
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
2765
2888
  }
2766
2889
 
2767
- .pf-v6-c-menu-toggle__button.pf-m-text {
2768
- display: inline-flex;
2769
- align-items: baseline;
2890
+ .pf-v6-c-label__content {
2891
+ gap: var(--pf-v6-c-label__content--Gap);
2892
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
2893
+ padding: 0;
2894
+ overflow: hidden;
2895
+ color: var(--pf-v6-c-label--Color);
2896
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
2897
+ background: transparent;
2898
+ border-width: 0;
2770
2899
  }
2771
2900
 
2772
- .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) {
2773
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2774
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2901
+ .pf-v6-c-label__content::before {
2902
+ position: absolute;
2903
+ inset: 0;
2904
+ z-index: -1;
2905
+ content: "";
2906
+ background-color: var(--pf-v6-c-label--BackgroundColor);
2907
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2908
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2775
2909
  }
2776
2910
 
2777
- .pf-v6-c-menu-toggle__text {
2911
+ input.pf-v6-c-label__content {
2778
2912
  overflow: hidden;
2779
2913
  text-overflow: ellipsis;
2780
2914
  white-space: nowrap;
2781
- min-width: 0;
2782
2915
  }
2783
2916
 
2784
- .pf-v6-c-menu-toggle__count {
2785
- display: flex;
2786
- flex-wrap: nowrap;
2917
+ .pf-v6-c-label__icon {
2918
+ color: var(--pf-v6-c-label__icon--Color);
2787
2919
  }
2788
2920
 
2789
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2790
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2791
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
2792
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2793
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2921
+ .pf-v6-c-label__actions {
2922
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2923
+ }
2924
+
2925
+ .pf-v6-c-label .pf-v6-c-label__actions .pf-v6-c-button {
2926
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2927
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2928
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2929
+ margin-block-start: calc(var(--pf-v6-c-label--PaddingBlockStart) * -1);
2930
+ margin-block-end: calc(var(--pf-v6-c-label--PaddingBlockEnd) * -1);
2931
+ margin-inline-end: calc(var(--pf-v6-c-label--PaddingInlineEnd) * -1);
2932
+ border-start-end-radius: var(--pf-v6-c-label--BorderRadius);
2933
+ border-end-end-radius: var(--pf-v6-c-label--BorderRadius);
2934
+ }
2935
+
2936
+ .pf-v6-c-label__actions .pf-v6-c-button {
2937
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2938
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2939
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2940
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2941
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2942
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2943
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2944
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2945
+ }
2946
+
2947
+ .pf-v6-c-label-group {
2948
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2949
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2950
+ --pf-v6-c-label-group--MaxWidth: 100%;
2951
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2952
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2953
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2954
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2955
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2956
+ --pf-v6-c-label-group__main--MinWidth: 0;
2957
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2958
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2959
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2960
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2961
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2962
+ --pf-v6-c-label-group__list--MinWidth: 0;
2963
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2964
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2965
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2966
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2967
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2968
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2969
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2970
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2971
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2972
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2973
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2974
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2975
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2976
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2977
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2978
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2979
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2980
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2981
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2982
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2983
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2984
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2794
2985
  }
2795
2986
 
2796
- .pf-v6-c-menu-toggle__icon {
2797
- flex-shrink: 0;
2798
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
2799
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
2800
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
2801
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
2987
+ .pf-v6-c-label-group {
2988
+ display: inline-flex;
2989
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2990
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2991
+ align-items: center;
2992
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2802
2993
  }
2803
2994
 
2804
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
2805
- vertical-align: middle;
2995
+ .pf-v6-c-label-group.pf-m-category {
2996
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2997
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2998
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2999
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
3000
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
3001
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
3002
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2806
3003
  }
2807
3004
 
2808
- .pf-v6-c-menu-toggle__controls {
2809
- display: flex;
2810
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2811
- align-items: center;
2812
- justify-content: center;
2813
- margin-inline-start: auto;
3005
+ .pf-v6-c-label-group.pf-m-vertical {
3006
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
3007
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
3008
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
3009
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
3010
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
3011
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
3012
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2814
3013
  }
2815
3014
 
2816
- .pf-v6-c-menu-toggle__toggle-icon {
2817
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2818
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
3015
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
3016
+ align-items: flex-start;
2819
3017
  }
2820
3018
 
2821
- .pf-v6-c-menu-toggle__status-icon {
2822
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
3019
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
3020
+ flex-direction: column;
3021
+ align-items: flex-start;
3022
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2823
3023
  }
2824
3024
 
2825
- .pf-v6-c-text-input-group {
2826
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2827
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2828
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2829
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2830
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2831
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2832
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2833
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2834
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2835
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2836
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2837
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2838
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2839
- --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));
2840
- --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));
2841
- --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));
2842
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2843
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2844
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2845
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2846
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2847
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2848
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2849
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2850
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2851
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2852
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2853
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2854
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2855
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2856
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2857
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2858
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2859
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2860
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2861
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2862
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2863
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2864
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2865
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2866
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2867
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2868
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2869
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2870
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2871
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2872
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2873
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2874
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2875
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2876
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
3025
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
3026
+ flex-direction: column;
3027
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2877
3028
  }
2878
3029
 
2879
- .pf-v6-c-text-input-group {
2880
- position: relative;
3030
+ .pf-v6-c-label-group.pf-m-editable,
3031
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
3032
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2881
3033
  display: flex;
2882
- width: 100%;
2883
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2884
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2885
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2886
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2887
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2888
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2889
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2890
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2891
3034
  }
2892
3035
 
2893
- .pf-v6-c-text-input-group::before {
2894
- position: absolute;
2895
- inset: 0;
2896
- pointer-events: none;
2897
- content: "";
2898
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2899
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2900
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2901
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2902
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
3036
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
3037
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
3038
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
3039
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
3040
+ flex: 1;
2903
3041
  }
2904
3042
 
2905
- .pf-v6-c-text-input-group.pf-m-disabled {
2906
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2907
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2908
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2909
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2910
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2911
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2912
- pointer-events: none;
3043
+ .pf-v6-c-label-group__main {
3044
+ display: flex;
3045
+ flex: 1;
3046
+ flex-wrap: wrap;
3047
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
3048
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
3049
+ align-items: baseline;
3050
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2913
3051
  }
2914
3052
 
2915
- .pf-v6-c-text-input-group.pf-m-plain {
2916
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
3053
+ .pf-v6-c-label-group__list {
3054
+ display: inline-flex;
3055
+ flex-wrap: wrap;
3056
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
3057
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
3058
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2917
3059
  }
2918
3060
 
2919
- .pf-v6-c-text-input-group.pf-m-plain::before {
2920
- border: 0;
3061
+ .pf-v6-c-label-group__list-item {
3062
+ display: inline-flex;
3063
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2921
3064
  }
2922
3065
 
2923
- .pf-v6-c-text-input-group.pf-m-success {
2924
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2925
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2926
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
3066
+ .pf-v6-c-label-group__label {
3067
+ overflow: hidden;
3068
+ text-overflow: ellipsis;
3069
+ white-space: nowrap;
3070
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2927
3071
  }
2928
3072
 
2929
- .pf-v6-c-text-input-group.pf-m-warning {
2930
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2931
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2932
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
3073
+ .pf-v6-c-label-group__close {
3074
+ display: flex;
3075
+ align-self: flex-start;
2933
3076
  }
2934
3077
 
2935
- .pf-v6-c-text-input-group.pf-m-error {
2936
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2937
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2938
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
3078
+ .pf-v6-c-label-group__close .pf-v6-c-button {
3079
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
3080
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
3081
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
3082
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
3083
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2939
3084
  }
2940
3085
 
2941
- @media (prefers-reduced-motion: no-preference) {
2942
- .pf-v6-c-text-input-group.pf-m-error {
2943
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2944
- animation-name: pf-v6-global-danger-jiggle-motion;
2945
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2946
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2947
- animation-fill-mode: both;
2948
- }
2949
- }
2950
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2951
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2952
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2953
- animation-name: pf-v6-global-fade-in;
2954
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2955
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
3086
+ .pf-v6-c-label-group__textarea {
3087
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
3088
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
3089
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
3090
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
3091
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
3092
+ white-space: nowrap;
3093
+ resize: none;
3094
+ scrollbar-width: none;
3095
+ -ms-overflow-style: none;
3096
+ border: 0;
2956
3097
  }
2957
3098
 
2958
- .pf-v6-c-text-input-group:hover {
2959
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
3099
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
3100
+ display: none;
2960
3101
  }
2961
3102
 
2962
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2963
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
3103
+ .pf-v6-c-breadcrumb {
3104
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3105
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3106
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3107
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3108
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3109
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3110
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3111
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3112
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3113
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3114
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3115
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3116
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3117
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3118
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3119
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3120
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3121
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3122
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3123
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3124
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3125
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3126
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2964
3127
  }
2965
3128
 
2966
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2967
- --pf-v6-c-text-input-group__text--Position: relative;
3129
+ .pf-v6-c-breadcrumb {
3130
+ display: inline-flex;
2968
3131
  }
2969
3132
 
2970
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2971
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2972
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
3133
+ .pf-v6-c-breadcrumb__list {
3134
+ display: flex;
3135
+ flex-wrap: wrap;
3136
+ align-items: center;
2973
3137
  }
2974
3138
 
2975
- .pf-v6-c-text-input-group__main {
3139
+ .pf-v6-c-breadcrumb__item {
2976
3140
  display: flex;
2977
- flex: 1;
2978
- flex-wrap: wrap;
2979
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2980
- min-width: 0;
3141
+ align-items: baseline;
3142
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3143
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3144
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3145
+ white-space: nowrap;
3146
+ list-style: none;
2981
3147
  }
2982
3148
 
2983
- .pf-v6-c-text-input-group__main.pf-m-icon {
2984
- --pf-v6-c-text-input-group__text--Position: relative;
2985
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2986
- display: inline-flex;
2987
- align-items: center;
2988
- justify-content: center;
2989
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
3149
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3150
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2990
3151
  }
2991
3152
 
2992
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2993
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
3153
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3154
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2994
3155
  }
2995
3156
 
2996
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2997
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2998
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2999
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
3157
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3158
+ scale: -1 1;
3000
3159
  }
3001
3160
 
3002
- .pf-v6-c-text-input-group__text {
3003
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
3004
- display: inline-grid;
3005
- flex: 1;
3006
- grid-template-areas: "text-input";
3007
- grid-template-columns: 1fr;
3161
+ .pf-v6-c-breadcrumb__item-divider {
3162
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3163
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3164
+ line-height: 1;
3165
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3008
3166
  }
3009
3167
 
3010
- .pf-v6-c-text-input-group__icon {
3011
- position: absolute;
3012
- inset-block-start: 50%;
3013
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
3014
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
3015
- color: var(--pf-v6-c-text-input-group__icon--Color);
3016
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
3168
+ .pf-v6-c-breadcrumb__link {
3169
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3170
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3171
+ font-size: inherit;
3172
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3173
+ line-height: inherit;
3174
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3175
+ overflow-wrap: anywhere;
3176
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3177
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3178
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3179
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3017
3180
  }
3018
3181
 
3019
- .pf-v6-c-text-input-group__icon.pf-m-status {
3020
- inset-inline-start: auto;
3021
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
3022
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
3182
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3183
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3184
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3185
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3186
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3023
3187
  }
3024
3188
 
3025
- .pf-v6-c-text-input-group__text-input {
3026
- overflow: hidden;
3027
- text-overflow: ellipsis;
3028
- white-space: nowrap;
3029
- position: relative;
3030
- width: 100%;
3031
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
3032
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
3033
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
3034
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
3035
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
3036
- color: var(--pf-v6-c-text-input-group__text-input--Color);
3037
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
3038
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
3039
- border: 0;
3189
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3190
+ cursor: default;
3040
3191
  }
3041
3192
 
3042
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
3043
- grid-area: text-input;
3193
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3194
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3195
+ text-decoration-line: none;
3044
3196
  }
3045
3197
 
3046
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
3047
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
3198
+ button.pf-v6-c-breadcrumb__link {
3199
+ border: none;
3048
3200
  }
3049
3201
 
3050
- .pf-v6-c-text-input-group__text-input::placeholder {
3051
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
3202
+ .pf-v6-c-breadcrumb__dropdown {
3203
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3204
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3205
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3206
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3052
3207
  }
3053
3208
 
3054
- .pf-v6-c-text-input-group__utilities {
3055
- display: flex;
3056
- align-items: center;
3057
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
3058
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
3209
+ .pf-v6-c-breadcrumb__heading {
3210
+ display: inline;
3211
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3059
3212
  }
3060
3213
 
3061
- .pf-v6-c-text-input-group__utilities > * + * {
3062
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
3214
+ .pf-v6-c-breadcrumb__link,
3215
+ .pf-v6-c-breadcrumb__heading {
3216
+ white-space: normal;
3063
3217
  }
3064
3218
 
3065
- .pf-v6-c-text-input-group__group {
3066
- display: flex;
3219
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3220
+ display: none;
3067
3221
  }
3068
3222
 
3069
3223
  .pf-v6-c-menu {
@@ -3769,126 +3923,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3769
3923
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3770
3924
  }
3771
3925
 
3772
- .pf-v6-c-breadcrumb {
3773
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3774
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3775
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3776
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3777
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3778
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3779
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3780
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3781
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3782
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3783
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3784
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3785
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3786
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3787
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3788
- --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3789
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3790
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3791
- --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3792
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3793
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3794
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3795
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3796
- }
3797
-
3798
- .pf-v6-c-breadcrumb {
3799
- display: inline-flex;
3800
- }
3801
-
3802
- .pf-v6-c-breadcrumb__list {
3803
- display: flex;
3804
- flex-wrap: wrap;
3805
- align-items: center;
3806
- }
3807
-
3808
- .pf-v6-c-breadcrumb__item {
3809
- display: flex;
3810
- align-items: baseline;
3811
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3812
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3813
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3814
- white-space: nowrap;
3815
- list-style: none;
3816
- }
3817
-
3818
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3819
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3820
- }
3821
-
3822
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3823
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3824
- }
3825
-
3826
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3827
- scale: -1 1;
3828
- }
3829
-
3830
- .pf-v6-c-breadcrumb__item-divider {
3831
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3832
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3833
- line-height: 1;
3834
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3835
- }
3836
-
3837
- .pf-v6-c-breadcrumb__link {
3838
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3839
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3840
- font-size: inherit;
3841
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3842
- line-height: inherit;
3843
- color: var(--pf-v6-c-breadcrumb__link--Color);
3844
- overflow-wrap: anywhere;
3845
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3846
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3847
- text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3848
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3849
- }
3850
-
3851
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3852
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3853
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3854
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3855
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3856
- }
3857
-
3858
- .pf-v6-c-breadcrumb__link.pf-m-current {
3859
- cursor: default;
3860
- }
3861
-
3862
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3863
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3864
- text-decoration-line: none;
3865
- }
3866
-
3867
- button.pf-v6-c-breadcrumb__link {
3868
- border: none;
3869
- }
3870
-
3871
- .pf-v6-c-breadcrumb__dropdown {
3872
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3873
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3874
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3875
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3876
- }
3877
-
3878
- .pf-v6-c-breadcrumb__heading {
3879
- display: inline;
3880
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3881
- }
3882
-
3883
- .pf-v6-c-breadcrumb__link,
3884
- .pf-v6-c-breadcrumb__heading {
3885
- white-space: normal;
3886
- }
3887
-
3888
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3889
- display: none;
3890
- }
3891
-
3892
3926
  .pf-v6-c-tooltip {
3893
3927
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3894
3928
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);