@patternfly/react-templates 6.5.0-prerelease.52 → 6.5.0-prerelease.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-BR78kAsq.css → output-DrWIlVsB.css} +1384 -1383
  6. package/package.json +3 -3
package/dist/umd/assets/{output-BR78kAsq.css → output-DrWIlVsB.css} RENAMED
@@ -3,248 +3,235 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-text-input-group {
7
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
9
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
26
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
40
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
41
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
42
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
43
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
44
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
45
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
46
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
47
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
48
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
49
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
50
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
51
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
52
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
53
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
54
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
55
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
56
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
57
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6
+ .pf-v6-c-badge {
7
+ --pf-v6-c-badge--BorderColor: transparent;
8
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
9
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
10
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
11
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
12
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
15
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
16
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
17
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
18
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
19
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
20
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
21
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
22
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
23
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
24
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
25
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
26
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
27
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
28
  }
59
29
 
60
- .pf-v6-c-text-input-group {
30
+ .pf-v6-c-badge {
61
31
  position: relative;
62
- display: flex;
63
- width: 100%;
64
- font-size: var(--pf-v6-c-text-input-group__FontSize);
65
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
66
- color: var(--pf-v6-c-text-input-group--Color, inherit);
67
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
68
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
69
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
70
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
71
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
32
+ display: inline-block;
33
+ min-width: var(--pf-v6-c-badge--MinWidth);
34
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
35
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
36
+ font-size: var(--pf-v6-c-badge--FontSize);
37
+ font-weight: var(--pf-v6-c-badge--FontWeight);
38
+ color: var(--pf-v6-c-badge--Color);
39
+ text-align: center;
40
+ white-space: nowrap;
41
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
42
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
72
43
  }
73
44
 
74
- .pf-v6-c-text-input-group::before {
45
+ .pf-v6-c-badge::after {
75
46
  position: absolute;
76
47
  inset: 0;
77
48
  pointer-events: none;
78
49
  content: "";
79
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
80
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
81
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
82
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
83
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
50
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
51
+ border-radius: inherit;
84
52
  }
85
53
 
86
- .pf-v6-c-text-input-group.pf-m-disabled {
87
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
88
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
89
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
90
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
91
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
92
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
93
- pointer-events: none;
54
+ .pf-v6-c-badge.pf-m-read {
55
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
56
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
57
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
58
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
94
59
  }
95
60
 
96
- .pf-v6-c-text-input-group.pf-m-plain {
97
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
61
+ .pf-v6-c-badge.pf-m-unread {
62
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
63
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
64
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
98
65
  }
99
66
 
100
- .pf-v6-c-text-input-group.pf-m-plain::before {
101
- border: 0;
67
+ .pf-v6-c-badge.pf-m-disabled {
68
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
69
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
102
70
  }
103
71
 
104
- .pf-v6-c-text-input-group.pf-m-success {
105
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
106
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
107
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
72
+ .pf-v6-c-badge.pf-m-disabled::after {
73
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
108
74
  }
109
75
 
110
- .pf-v6-c-text-input-group.pf-m-warning {
111
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
112
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
113
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
76
+ .pf-v6-c-badge__toggle-icon {
77
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
78
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
114
79
  }
115
80
 
116
- .pf-v6-c-text-input-group.pf-m-error {
117
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
118
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
119
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
81
+ .pf-v6-c-label-group {
82
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
83
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
84
+ --pf-v6-c-label-group--MaxWidth: 100%;
85
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
86
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
87
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
88
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
89
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
90
+ --pf-v6-c-label-group__main--MinWidth: 0;
91
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
92
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
93
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
94
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
95
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
96
+ --pf-v6-c-label-group__list--MinWidth: 0;
97
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
98
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
99
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
100
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
101
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
102
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
103
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
104
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
105
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
106
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
107
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
108
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
109
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
110
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
111
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
112
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
113
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
114
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
115
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
116
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
117
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
118
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
120
119
  }
121
120
 
122
- @media (prefers-reduced-motion: no-preference) {
123
- .pf-v6-c-text-input-group.pf-m-error {
124
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
125
- animation-name: pf-v6-global-danger-jiggle-motion;
126
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
127
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
128
- animation-fill-mode: both;
129
- }
121
+ .pf-v6-c-label-group {
122
+ display: inline-flex;
123
+ row-gap: var(--pf-v6-c-label-group--RowGap);
124
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
125
+ align-items: center;
126
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
130
127
  }
131
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
132
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
133
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
134
- animation-name: pf-v6-global-fade-in;
135
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
136
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
128
+
129
+ .pf-v6-c-label-group.pf-m-category {
130
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
131
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
132
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
133
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
134
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
135
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
136
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
137
137
  }
138
138
 
139
- .pf-v6-c-text-input-group:hover {
140
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
139
+ .pf-v6-c-label-group.pf-m-vertical {
140
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
141
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
142
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
143
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
144
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
145
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
146
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
141
147
  }
142
148
 
143
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
144
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
149
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
150
+ align-items: flex-start;
145
151
  }
146
152
 
147
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
148
- --pf-v6-c-text-input-group__text--Position: relative;
153
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
154
+ flex-direction: column;
155
+ align-items: flex-start;
156
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
149
157
  }
150
158
 
151
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
152
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
153
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
159
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
160
+ flex-direction: column;
161
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
154
162
  }
155
163
 
156
- .pf-v6-c-text-input-group__main {
164
+ .pf-v6-c-label-group.pf-m-editable,
165
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
166
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
157
167
  display: flex;
168
+ }
169
+
170
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
171
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
172
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
173
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
158
174
  flex: 1;
159
- flex-wrap: wrap;
160
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
161
- min-width: 0;
162
175
  }
163
176
 
164
- .pf-v6-c-text-input-group__main.pf-m-icon {
165
- --pf-v6-c-text-input-group__text--Position: relative;
166
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
167
- display: inline-flex;
168
- align-items: center;
169
- justify-content: center;
170
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
171
- }
172
-
173
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
174
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
175
- }
176
-
177
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
178
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
179
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
180
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
181
- }
182
-
183
- .pf-v6-c-text-input-group__text {
184
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
185
- display: inline-grid;
177
+ .pf-v6-c-label-group__main {
178
+ display: flex;
186
179
  flex: 1;
187
- grid-template-areas: "text-input";
188
- grid-template-columns: 1fr;
180
+ flex-wrap: wrap;
181
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
182
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
183
+ align-items: baseline;
184
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
189
185
  }
190
186
 
191
- .pf-v6-c-text-input-group__icon {
192
- position: absolute;
193
- inset-block-start: 50%;
194
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
195
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
196
- color: var(--pf-v6-c-text-input-group__icon--Color);
197
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
187
+ .pf-v6-c-label-group__list {
188
+ display: inline-flex;
189
+ flex-wrap: wrap;
190
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
191
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
192
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
198
193
  }
199
194
 
200
- .pf-v6-c-text-input-group__icon.pf-m-status {
201
- inset-inline-start: auto;
202
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
203
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
195
+ .pf-v6-c-label-group__list-item {
196
+ display: inline-flex;
197
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
204
198
  }
205
199
 
206
- .pf-v6-c-text-input-group__text-input {
200
+ .pf-v6-c-label-group__label {
207
201
  overflow: hidden;
208
202
  text-overflow: ellipsis;
209
203
  white-space: nowrap;
210
- position: relative;
211
- width: 100%;
212
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
213
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
214
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
215
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
216
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
217
- color: var(--pf-v6-c-text-input-group__text-input--Color);
218
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
219
- border: 0;
220
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
221
- }
222
-
223
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
224
- grid-area: text-input;
225
- }
226
-
227
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
228
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
204
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
229
205
  }
230
206
 
231
- .pf-v6-c-text-input-group__text-input::placeholder {
232
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
207
+ .pf-v6-c-label-group__close {
208
+ display: flex;
209
+ align-self: flex-start;
233
210
  }
234
211
 
235
- .pf-v6-c-text-input-group__utilities {
236
- display: flex;
237
- align-items: center;
238
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
239
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
212
+ .pf-v6-c-label-group__close .pf-v6-c-button {
213
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
214
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
215
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
216
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
217
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
240
218
  }
241
219
 
242
- .pf-v6-c-text-input-group__utilities > * + * {
243
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
220
+ .pf-v6-c-label-group__textarea {
221
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
222
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
223
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
224
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
225
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
226
+ white-space: nowrap;
227
+ resize: none;
228
+ scrollbar-width: none;
229
+ -ms-overflow-style: none;
230
+ border: 0;
244
231
  }
245
232
 
246
- .pf-v6-c-text-input-group__group {
247
- display: flex;
233
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
234
+ display: none;
248
235
  }
249
236
 
250
237
  .pf-v6-c-menu-toggle {
@@ -845,159 +832,784 @@
845
832
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
846
833
  }
847
834
 
848
- .pf-v6-c-button {
849
- --pf-v6-c-button--Display: inline-flex;
850
- --pf-v6-c-button--AlignItems: baseline;
851
- --pf-v6-c-button--JustifyContent: center;
852
- --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
853
- --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
854
- --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
855
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
856
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
857
- --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
858
- --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
859
- --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
860
- --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
861
- --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
862
- --pf-v6-c-button--BackgroundColor: transparent;
863
- --pf-v6-c-button--BorderColor: transparent;
864
- --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
865
- --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
866
- --pf-v6-c-button--TextDecorationLine: none;
867
- --pf-v6-c-button--TextDecorationStyle: none;
868
- --pf-v6-c-button--TextDecorationColor: currentcolor;
869
- --pf-v6-c-button--TransitionDelay: 0s;
870
- --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
871
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
872
- --pf-v6-c-button--TransitionProperty: color, background, border-color;
873
- --pf-v6-c-button--ScaleX: 1;
874
- --pf-v6-c-button--ScaleY: 1;
875
- --pf-v6-c-button--border--offset: 0;
876
- --pf-v6-c-button--hover--BackgroundColor: transparent;
877
- --pf-v6-c-button--hover--BorderColor: transparent;
878
- --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
879
- --pf-v6-c-button--hover--TextDecorationLine: none;
880
- --pf-v6-c-button--hover--TextDecorationStyle: none;
881
- --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
882
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
883
- --pf-v6-c-button--hover--ScaleX: 1;
884
- --pf-v6-c-button--hover--ScaleY: 1;
885
- --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
886
- --pf-v6-c-button--m-clicked--BorderColor: transparent;
887
- --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
888
- --pf-v6-c-button--m-clicked--TextDecorationLine: none;
889
- --pf-v6-c-button--m-clicked--TextDecorationStyle: none;
890
- --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor;
891
- --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
892
- --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
893
- --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
894
- --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
895
- --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
896
- --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
897
- --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
898
- --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
899
- --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
900
- --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
901
- --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
902
- --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
903
- --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
904
- --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
905
- --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
906
- --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
907
- --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
908
- --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
909
- --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
910
- --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
911
- --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
912
- --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
913
- --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
914
- --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
915
- --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
916
- --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
917
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
918
- --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
919
- --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
920
- --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
921
- --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
922
- --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
923
- --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
924
- --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
925
- --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
926
- --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
927
- --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
928
- --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
929
- --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
930
- --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
931
- --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
932
- --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
933
- --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
934
- --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
935
- --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
936
- --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
937
- --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
938
- --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
939
- --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
940
- --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
941
- --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
942
- --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
943
- --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
944
- --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
945
- --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
946
- --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
947
- --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
948
- --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
949
- --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
950
- --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
951
- --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
952
- --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
953
- --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
954
- --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
955
- --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
956
- --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
957
- --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
958
- --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
959
- --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
960
- --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
961
- --pf-v6-c-button--m-link--m-inline--FontSize: initial;
962
- --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
963
- --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
964
- --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
965
- --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
966
- --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
967
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
968
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
969
- --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
970
- --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
971
- --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
972
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
973
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
974
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
975
- --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
976
- --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
977
- --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
978
- --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
979
- --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
980
- --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
981
- --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
982
- --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
983
- --pf-v6-c-button--span--m-link--m-inline--Display: inline;
984
- --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
985
- --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
986
- --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
987
- --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
988
- --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
989
- --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
990
- --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
991
- --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
992
- --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
993
- --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
994
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
995
- --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
996
- --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
997
- --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
998
- --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
999
- --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1000
- --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
835
+ .pf-v6-c-check {
836
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
837
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
838
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
839
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
840
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
841
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
842
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
843
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
844
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
845
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
846
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
847
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
848
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
849
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
850
+ }
851
+
852
+ .pf-v6-c-check {
853
+ display: grid;
854
+ grid-template-columns: auto 1fr;
855
+ grid-gap: var(--pf-v6-c-check--GridGap);
856
+ accent-color: var(--pf-v6-c-check--AccentColor);
857
+ }
858
+
859
+ .pf-v6-c-check.pf-m-standalone {
860
+ display: inline-grid;
861
+ grid-template-columns: auto;
862
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
863
+ }
864
+
865
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
866
+ align-self: center;
867
+ transform: none;
868
+ }
869
+
870
+ .pf-v6-c-check__input {
871
+ align-self: start;
872
+ font-size: var(--pf-v6-c-check__label--FontSize);
873
+ line-height: var(--pf-v6-c-check__label--LineHeight);
874
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
875
+ }
876
+
877
+ .pf-v6-c-check__label {
878
+ font-size: var(--pf-v6-c-check__label--FontSize);
879
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
880
+ line-height: var(--pf-v6-c-check__label--LineHeight);
881
+ color: var(--pf-v6-c-check__label--Color);
882
+ }
883
+
884
+ .pf-v6-c-check__description {
885
+ grid-column: 2;
886
+ font-size: var(--pf-v6-c-check__description--FontSize);
887
+ color: var(--pf-v6-c-check__description--Color);
888
+ }
889
+
890
+ .pf-v6-c-check__body {
891
+ grid-column: 2;
892
+ }
893
+
894
+ .pf-v6-c-check__label,
895
+ .pf-v6-c-check__input {
896
+ justify-self: start;
897
+ }
898
+
899
+ label.pf-v6-c-check, .pf-v6-c-check__label,
900
+ .pf-v6-c-check__input {
901
+ cursor: pointer;
902
+ }
903
+
904
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
905
+ .pf-v6-c-check__input:disabled,
906
+ .pf-v6-c-check__input.pf-m-disabled {
907
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
908
+ cursor: not-allowed;
909
+ }
910
+
911
+ .pf-v6-c-check__label-required {
912
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
913
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
914
+ color: var(--pf-v6-c-check__label-required--Color);
915
+ }
916
+
917
+ .pf-v6-c-label {
918
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
919
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
920
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
921
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
922
+ --pf-v6-c-label--MaxWidth: 100%;
923
+ --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)));
924
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
925
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
926
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
927
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
928
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
929
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
930
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
931
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
932
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
933
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
934
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
935
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
936
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
937
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
938
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
939
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
940
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
941
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
942
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
943
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
944
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
945
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
946
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
947
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
948
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
949
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
950
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
951
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
952
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
953
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
954
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
955
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
956
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
957
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
958
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
959
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
960
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
961
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
962
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
963
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
964
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
965
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
966
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
967
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
968
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
969
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
970
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
971
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
972
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
973
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
974
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
975
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
976
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
977
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
978
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
979
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
980
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
981
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
982
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
983
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
984
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
985
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
986
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
987
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
988
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
989
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
990
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
991
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
992
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
993
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
994
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
995
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
996
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
997
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
998
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
999
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1000
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1001
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1002
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1003
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1004
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1005
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1006
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1007
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1008
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1009
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1010
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1011
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1012
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1013
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1014
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1015
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1016
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1017
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1018
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1019
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1020
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1021
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1022
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1023
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1024
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1025
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1026
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1027
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1028
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1029
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1030
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1031
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1032
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1033
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1034
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1035
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1036
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1037
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1038
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1039
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1040
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1041
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1042
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1043
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1044
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1045
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1046
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1047
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1048
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1049
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1050
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1051
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1052
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1053
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1054
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1055
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1056
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1057
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1058
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1059
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1060
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1061
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1062
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1063
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1064
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1065
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1066
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1067
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1068
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1069
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1070
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
1071
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1072
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1073
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1074
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1075
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1076
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1077
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1078
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1079
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1080
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1081
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1082
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1083
+ --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)));
1084
+ --pf-v6-c-label__content--MaxWidth: 100%;
1085
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1086
+ --pf-v6-c-label__content--Cursor: initial;
1087
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1088
+ --pf-v6-c-label__text--MaxWidth: 100%;
1089
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
1090
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1091
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1092
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1093
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1094
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1095
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1096
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1097
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1098
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1099
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1100
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1101
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1102
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1103
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1104
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
1105
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1106
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1107
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1108
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1109
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1110
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1111
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1112
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1113
+ }
1114
+
1115
+ .pf-v6-c-label {
1116
+ position: relative;
1117
+ gap: var(--pf-v6-c-label--Gap);
1118
+ min-width: var(--pf-v6-c-label--MinWidth);
1119
+ max-width: var(--pf-v6-c-label--MaxWidth);
1120
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1121
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1122
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1123
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1124
+ font-size: var(--pf-v6-c-label--FontSize);
1125
+ white-space: nowrap;
1126
+ background: transparent;
1127
+ isolation: isolate;
1128
+ border: 0;
1129
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1130
+ }
1131
+
1132
+ .pf-v6-c-label.pf-m-blue {
1133
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1134
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1135
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1136
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1137
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1138
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1139
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1140
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1141
+ }
1142
+
1143
+ .pf-v6-c-label.pf-m-red {
1144
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1145
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1146
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1147
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1148
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1149
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1150
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1151
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1152
+ }
1153
+
1154
+ .pf-v6-c-label.pf-m-orange {
1155
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1156
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1157
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1158
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1159
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1160
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1161
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1162
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1163
+ }
1164
+
1165
+ .pf-v6-c-label.pf-m-orangered {
1166
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1167
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1168
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1169
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1170
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1171
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1172
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1173
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1174
+ }
1175
+
1176
+ .pf-v6-c-label.pf-m-yellow {
1177
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1178
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1179
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1180
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1181
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1182
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1183
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1184
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1185
+ }
1186
+
1187
+ .pf-v6-c-label.pf-m-green {
1188
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1189
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1190
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1191
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1192
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1193
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1194
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1195
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1196
+ }
1197
+
1198
+ .pf-v6-c-label.pf-m-teal {
1199
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1200
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1201
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1202
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1203
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1204
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1205
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1206
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1207
+ }
1208
+
1209
+ .pf-v6-c-label.pf-m-purple {
1210
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1211
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1212
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1213
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1214
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1215
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1216
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1217
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1218
+ }
1219
+
1220
+ .pf-v6-c-label.pf-m-success {
1221
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1222
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1223
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1224
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1225
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1226
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1227
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1228
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1229
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1230
+ --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);
1231
+ }
1232
+
1233
+ .pf-v6-c-label.pf-m-warning {
1234
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1235
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1236
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1237
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1238
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1239
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1240
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1241
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1242
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1243
+ --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);
1244
+ }
1245
+
1246
+ .pf-v6-c-label.pf-m-danger {
1247
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1248
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1249
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1250
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1251
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1252
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1253
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1254
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1255
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1256
+ --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);
1257
+ }
1258
+
1259
+ .pf-v6-c-label.pf-m-info {
1260
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1261
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1262
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1263
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1264
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1265
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1266
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1267
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1268
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1269
+ --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);
1270
+ }
1271
+
1272
+ .pf-v6-c-label.pf-m-custom {
1273
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1274
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1275
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1276
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1277
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1278
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1279
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1280
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1281
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1282
+ --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);
1283
+ }
1284
+
1285
+ .pf-v6-c-label.pf-m-compact {
1286
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1287
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1288
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1289
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1290
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1291
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1292
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1293
+ }
1294
+
1295
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1296
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1297
+ }
1298
+
1299
+ .pf-v6-c-label.pf-m-outline {
1300
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1301
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1302
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1303
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1304
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1305
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1306
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1307
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1308
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1309
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1310
+ }
1311
+
1312
+ .pf-v6-c-label.pf-m-editable {
1313
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1314
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1315
+ }
1316
+
1317
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1318
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1319
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1320
+ }
1321
+
1322
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1323
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1324
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1325
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1326
+ }
1327
+
1328
+ .pf-v6-c-label.pf-m-editable-active {
1329
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1330
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1331
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1332
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1333
+ }
1334
+
1335
+ .pf-v6-c-label.pf-m-overflow {
1336
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1337
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1338
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1339
+ }
1340
+
1341
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1342
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1343
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1344
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1345
+ }
1346
+
1347
+ .pf-v6-c-label.pf-m-add {
1348
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1349
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1350
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1351
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1352
+ }
1353
+
1354
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1355
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1356
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1357
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1358
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1359
+ }
1360
+
1361
+ .pf-v6-c-label.pf-m-clickable {
1362
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1363
+ }
1364
+
1365
+ .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) {
1366
+ text-decoration-line: none;
1367
+ }
1368
+
1369
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1370
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1371
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1372
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1373
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1374
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1375
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1376
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1377
+ }
1378
+
1379
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1380
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1381
+ }
1382
+
1383
+ .pf-v6-c-label.pf-m-disabled {
1384
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1385
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1386
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1387
+ --pf-v6-c-label--BorderWidth: 0;
1388
+ pointer-events: none;
1389
+ }
1390
+
1391
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1392
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1393
+ }
1394
+
1395
+ .pf-v6-c-label,
1396
+ .pf-v6-c-label__content {
1397
+ display: inline-flex;
1398
+ align-items: center;
1399
+ justify-content: center;
1400
+ }
1401
+
1402
+ .pf-v6-c-label__text {
1403
+ overflow: hidden;
1404
+ text-overflow: ellipsis;
1405
+ white-space: nowrap;
1406
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1407
+ }
1408
+
1409
+ .pf-v6-c-label__content {
1410
+ gap: var(--pf-v6-c-label__content--Gap);
1411
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1412
+ padding: 0;
1413
+ overflow: hidden;
1414
+ color: var(--pf-v6-c-label--Color);
1415
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1416
+ background: transparent;
1417
+ border-width: 0;
1418
+ }
1419
+
1420
+ .pf-v6-c-label__content::before {
1421
+ position: absolute;
1422
+ inset: 0;
1423
+ z-index: -1;
1424
+ pointer-events: none;
1425
+ content: "";
1426
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1427
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1428
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1429
+ }
1430
+
1431
+ input.pf-v6-c-label__content {
1432
+ overflow: hidden;
1433
+ text-overflow: ellipsis;
1434
+ white-space: nowrap;
1435
+ }
1436
+
1437
+ .pf-v6-c-label__icon {
1438
+ color: var(--pf-v6-c-label__icon--Color);
1439
+ }
1440
+
1441
+ .pf-v6-c-label__actions {
1442
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1443
+ }
1444
+
1445
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1446
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1447
+ }
1448
+
1449
+ .pf-v6-c-label__actions .pf-v6-c-button {
1450
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1451
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1452
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1453
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1454
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1455
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1456
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1457
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1458
+ }
1459
+
1460
+ .pf-v6-c-button {
1461
+ --pf-v6-c-button--Display: inline-flex;
1462
+ --pf-v6-c-button--AlignItems: baseline;
1463
+ --pf-v6-c-button--JustifyContent: center;
1464
+ --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1465
+ --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1466
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1467
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1468
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1469
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
1470
+ --pf-v6-c-button--Color: var(--pf-t--global--text--color--regular);
1471
+ --pf-v6-c-button--LineHeight: var(--pf-t--global--font--line-height--body);
1472
+ --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
1473
+ --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
1474
+ --pf-v6-c-button--BackgroundColor: transparent;
1475
+ --pf-v6-c-button--BorderColor: transparent;
1476
+ --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
1477
+ --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1478
+ --pf-v6-c-button--TextDecorationLine: none;
1479
+ --pf-v6-c-button--TextDecorationStyle: none;
1480
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
1481
+ --pf-v6-c-button--TransitionDelay: 0s;
1482
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1483
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1484
+ --pf-v6-c-button--TransitionProperty: color, background, border-color;
1485
+ --pf-v6-c-button--ScaleX: 1;
1486
+ --pf-v6-c-button--ScaleY: 1;
1487
+ --pf-v6-c-button--border--offset: 0;
1488
+ --pf-v6-c-button--hover--BackgroundColor: transparent;
1489
+ --pf-v6-c-button--hover--BorderColor: transparent;
1490
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1491
+ --pf-v6-c-button--hover--TextDecorationLine: none;
1492
+ --pf-v6-c-button--hover--TextDecorationStyle: none;
1493
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
1494
+ --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1495
+ --pf-v6-c-button--hover--ScaleX: 1;
1496
+ --pf-v6-c-button--hover--ScaleY: 1;
1497
+ --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1498
+ --pf-v6-c-button--m-clicked--BorderColor: transparent;
1499
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
1500
+ --pf-v6-c-button--m-clicked--TextDecorationLine: none;
1501
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: none;
1502
+ --pf-v6-c-button--m-clicked--TextDecorationColor: currentcolor;
1503
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1504
+ --pf-v6-c-button--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
1505
+ --pf-v6-c-button--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
1506
+ --pf-v6-c-button--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1507
+ --pf-v6-c-button--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
1508
+ --pf-v6-c-button--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
1509
+ --pf-v6-c-button--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
1510
+ --pf-v6-c-button--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
1511
+ --pf-v6-c-button--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
1512
+ --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
1513
+ --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
1514
+ --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
1515
+ --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1516
+ --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1517
+ --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1518
+ --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
1519
+ --pf-v6-c-button--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1520
+ --pf-v6-c-button--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1521
+ --pf-v6-c-button--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
1522
+ --pf-v6-c-button--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1523
+ --pf-v6-c-button--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1524
+ --pf-v6-c-button--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1525
+ --pf-v6-c-button--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1526
+ --pf-v6-c-button--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1527
+ --pf-v6-c-button--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1528
+ --pf-v6-c-button--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1529
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1530
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
1531
+ --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
1532
+ --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
1533
+ --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
1534
+ --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
1535
+ --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
1536
+ --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
1537
+ --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
1538
+ --pf-v6-c-button--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1539
+ --pf-v6-c-button--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1540
+ --pf-v6-c-button--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1541
+ --pf-v6-c-button--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
1542
+ --pf-v6-c-button--m-link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1543
+ --pf-v6-c-button--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1544
+ --pf-v6-c-button--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1545
+ --pf-v6-c-button--m-link--Color: var(--pf-t--global--text--color--brand--default);
1546
+ --pf-v6-c-button--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1547
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
1548
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
1549
+ --pf-v6-c-button--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1550
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
1551
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1552
+ --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1553
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
1554
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1555
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1556
+ --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
1557
+ --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
1558
+ --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
1559
+ --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
1560
+ --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
1561
+ --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1562
+ --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1563
+ --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1564
+ --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
1565
+ --pf-v6-c-button--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
1566
+ --pf-v6-c-button--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1567
+ --pf-v6-c-button--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
1568
+ --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
1569
+ --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1570
+ --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
1571
+ --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
1572
+ --pf-v6-c-button--m-link--m-inline--JustifyContent: flex-start;
1573
+ --pf-v6-c-button--m-link--m-inline--FontSize: initial;
1574
+ --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
1575
+ --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
1576
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockStart: 0;
1577
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1578
+ --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1579
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1580
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1581
+ --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1582
+ --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1583
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1584
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1585
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1586
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1587
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1588
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1589
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1590
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
1591
+ --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1592
+ --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
1593
+ --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
1594
+ --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1595
+ --pf-v6-c-button--span--m-link--m-inline--Display: inline;
1596
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
1597
+ --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1598
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1599
+ --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1600
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1601
+ --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1602
+ --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
1603
+ --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1604
+ --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
1605
+ --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
1606
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
1607
+ --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1608
+ --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
1609
+ --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1610
+ --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
1611
+ --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1612
+ --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
1001
1613
  --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
1002
1614
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
1003
1615
  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
@@ -1639,994 +2251,464 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1639
2251
  --pf-v6-c-button__icon--TransitionDelay: 0s;
1640
2252
  --pf-v6-c-button__icon--ScaleX: 1;
1641
2253
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1642
- --pf-v6-c-button--hover__icon--ScaleX: 1;
1643
- }
1644
-
1645
- .pf-v6-c-button.pf-m-circle {
1646
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
1647
- padding-inline: 0;
1648
- }
1649
-
1650
- .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1651
- --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1652
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
1653
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
1654
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1655
- --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
1656
- --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
1657
- --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1658
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1659
- --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
1660
- --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
1661
- --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
1662
- --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
1663
- --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
1664
- --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
1665
- text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
1666
- text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
1667
- text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1668
- text-underline-offset: var(--pf-v6-c-button--hover--TextUnderlineOffset);
1669
- outline-offset: var(--pf-t--global--focus-ring--position--offset);
1670
- }
1671
-
1672
- .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
1673
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
1674
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
1675
- --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
1676
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
1677
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
1678
- text-decoration-line: var(--pf-v6-c-button--m-clicked--TextDecorationLine);
1679
- text-decoration-style: var(--pf-v6-c-button--m-clicked--TextDecorationStyle);
1680
- text-decoration-color: var(--pf-v6-c-button--m-clicked--TextDecorationColor);
1681
- text-underline-offset: var(--pf-v6-c-button--m-clicked--TextUnderlineOffset);
1682
- }
1683
-
1684
- .pf-v6-c-button:active {
1685
- background-size: 100% 100%;
1686
- transition-duration: 0s;
1687
- }
1688
-
1689
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
1690
- pointer-events: none;
1691
- }
1692
-
1693
- .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1694
- color: var(--pf-v6-c-button--disabled--Color);
1695
- text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1696
- background: var(--pf-v6-c-button--disabled--BackgroundColor);
1697
- }
1698
-
1699
- .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
1700
- border-color: transparent;
1701
- }
1702
-
1703
- .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 {
1704
- color: var(--pf-v6-c-button--disabled__icon--Color);
1705
- }
1706
-
1707
- .pf-v6-c-button.pf-m-aria-disabled {
1708
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
1709
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
1710
- cursor: default;
1711
- }
1712
-
1713
- .pf-v6-c-button.pf-m-progress {
1714
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1715
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1716
- }
1717
-
1718
- .pf-v6-c-button.pf-m-in-progress {
1719
- --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
1720
- }
1721
-
1722
- .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
1723
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
1724
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
1725
- }
1726
-
1727
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
1728
- --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
1729
- --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
1730
- }
1731
-
1732
- .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1733
- opacity: 0;
1734
- }
1735
-
1736
- .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
1737
- animation-name: pf-v6-c-button-icon-notify;
1738
- animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
1739
- animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
1740
- }
1741
-
1742
- .pf-v6-c-button.pf-m-dock {
1743
- justify-content: flex-start;
1744
- width: 100%;
1745
- }
1746
-
1747
- @media (min-width: 62rem) {
1748
- .pf-v6-c-button.pf-m-dock {
1749
- justify-content: center;
1750
- }
1751
- .pf-v6-c-button.pf-m-dock .pf-v6-c-button__text {
1752
- display: none;
1753
- }
1754
- }
1755
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
1756
- justify-content: flex-start;
1757
- width: 100%;
1758
- }
1759
-
1760
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
1761
- display: revert;
1762
- }
1763
-
1764
- .pf-v6-c-button__icon {
1765
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1766
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1767
- color: var(--pf-v6-c-button__icon--Color);
1768
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1769
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1770
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1771
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1772
- rotate: var(--pf-v6-c-button__icon--Rotate);
1773
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1774
- }
1775
-
1776
- .pf-v6-c-button__icon.pf-m-start {
1777
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
1778
- }
1779
-
1780
- .pf-v6-c-button__icon.pf-m-end {
1781
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1782
- }
1783
-
1784
- .pf-v6-c-button__icon-favorite,
1785
- .pf-v6-c-button__icon-favorited {
1786
- grid-area: 1/1/1/1;
1787
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1788
- transition-property: opacity;
1789
- }
1790
-
1791
- .pf-v6-c-button__icon-favorite {
1792
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1793
- }
1794
-
1795
- .pf-v6-c-button__icon-favorited {
1796
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1797
- }
1798
-
1799
- .pf-v6-c-button__progress {
1800
- position: absolute;
1801
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
1802
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
1803
- line-height: 1;
1804
- color: var(--pf-v6-c-button__progress--Color);
1805
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
1806
- }
1807
-
1808
- .pf-v6-c-button__progress .pf-v6-c-spinner {
1809
- --pf-v6-c-spinner--Color: currentcolor;
1810
- }
1811
-
1812
- .pf-v6-c-button__text {
1813
- text-decoration: inherit;
1814
- }
1815
-
1816
- .pf-v6-c-button__count {
1817
- display: inline-flex;
1818
- align-items: center;
1819
- }
1820
-
1821
- .pf-v6-c-button--hamburger-icon path {
1822
- fill: none;
1823
- stroke: currentcolor;
1824
- stroke-linecap: round;
1825
- stroke-linejoin: round;
1826
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1827
- }
1828
-
1829
- .pf-v6-c-button--hamburger-icon--top {
1830
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
1831
- }
1832
-
1833
- .pf-v6-c-button--hamburger-icon--middle {
1834
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1835
- }
1836
-
1837
- .pf-v6-c-button--hamburger-icon--arrow {
1838
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2254
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
1839
2255
  }
1840
2256
 
1841
- .pf-v6-c-button--hamburger-icon--bottom {
1842
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2257
+ .pf-v6-c-button.pf-m-circle {
2258
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
2259
+ padding-inline: 0;
1843
2260
  }
1844
2261
 
1845
- @keyframes pf-v6-c-button-icon-notify {
1846
- 33% {
1847
- transform: rotate(30deg);
1848
- }
1849
- 66% {
1850
- transform: rotate(-60deg);
1851
- }
1852
- }
1853
- @keyframes pf-v6-c-button-icon-favorited {
1854
- 50% {
1855
- scale: 1.5;
1856
- }
1857
- }
1858
- .pf-v6-c-label {
1859
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1860
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1861
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1862
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1863
- --pf-v6-c-label--MaxWidth: 100%;
1864
- --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)));
1865
- --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1866
- --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1867
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1868
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1869
- --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1870
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1871
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1872
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1873
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1874
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1875
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1876
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1877
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1878
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1879
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1880
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1881
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1882
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1883
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1884
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1885
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1886
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1887
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1888
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1889
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1890
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1891
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1892
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1893
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1894
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1895
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1896
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1897
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1898
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1899
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1900
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1901
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1902
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1903
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1904
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1905
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1906
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1907
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1908
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1909
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1910
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1911
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1912
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1913
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1914
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1915
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1916
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1917
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1918
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1919
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1920
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1921
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1922
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1923
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1924
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1925
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1926
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1927
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1928
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1929
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1930
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1931
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1932
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1933
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1934
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1935
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1936
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1937
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1938
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1939
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1940
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1941
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1942
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1943
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1944
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1945
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1946
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1947
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1948
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1949
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1950
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1951
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1952
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1953
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1954
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1955
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1956
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1957
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1958
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1959
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1960
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1961
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1962
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1963
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1964
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1965
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1966
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1967
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1968
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1969
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1970
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1971
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1972
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1973
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1974
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1975
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1976
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1977
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1978
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1979
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1980
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1981
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1982
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1983
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1984
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1985
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1986
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1987
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1988
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1989
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1990
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1991
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1992
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1993
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1994
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1995
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1996
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1997
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1998
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1999
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2000
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2001
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2002
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2003
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2004
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2005
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2006
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2007
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2008
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2009
- --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2010
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2011
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
2012
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2013
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2014
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2015
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2016
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2017
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2018
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2019
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2020
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2021
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2022
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2023
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2024
- --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)));
2025
- --pf-v6-c-label__content--MaxWidth: 100%;
2026
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2027
- --pf-v6-c-label__content--Cursor: initial;
2028
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2029
- --pf-v6-c-label__text--MaxWidth: 100%;
2030
- --pf-v6-c-label__actions--MarginInlineEnd: 0;
2031
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2032
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2033
- --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
2034
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
2035
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
2036
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
2037
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
2038
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
2039
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2040
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2041
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2042
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2043
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2044
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2045
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
2046
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2047
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2048
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2049
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2050
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2051
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2052
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2053
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2262
+ .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2263
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2264
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
2265
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
2266
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
2267
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
2268
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
2269
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
2270
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2271
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
2272
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
2273
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
2274
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
2275
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
2276
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
2277
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2278
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2279
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2280
+ text-underline-offset: var(--pf-v6-c-button--hover--TextUnderlineOffset);
2281
+ outline-offset: var(--pf-t--global--focus-ring--position--offset);
2054
2282
  }
2055
2283
 
2056
- .pf-v6-c-label {
2057
- position: relative;
2058
- gap: var(--pf-v6-c-label--Gap);
2059
- min-width: var(--pf-v6-c-label--MinWidth);
2060
- max-width: var(--pf-v6-c-label--MaxWidth);
2061
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2062
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2063
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2064
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2065
- font-size: var(--pf-v6-c-label--FontSize);
2066
- white-space: nowrap;
2067
- background: transparent;
2068
- isolation: isolate;
2069
- border: 0;
2070
- border-radius: var(--pf-v6-c-label--BorderRadius);
2284
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2285
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2286
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2287
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2288
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2289
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2290
+ text-decoration-line: var(--pf-v6-c-button--m-clicked--TextDecorationLine);
2291
+ text-decoration-style: var(--pf-v6-c-button--m-clicked--TextDecorationStyle);
2292
+ text-decoration-color: var(--pf-v6-c-button--m-clicked--TextDecorationColor);
2293
+ text-underline-offset: var(--pf-v6-c-button--m-clicked--TextUnderlineOffset);
2071
2294
  }
2072
2295
 
2073
- .pf-v6-c-label.pf-m-blue {
2074
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2075
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2076
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2077
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2078
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2079
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2080
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2081
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2296
+ .pf-v6-c-button:active {
2297
+ background-size: 100% 100%;
2298
+ transition-duration: 0s;
2082
2299
  }
2083
2300
 
2084
- .pf-v6-c-label.pf-m-red {
2085
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2086
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2087
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2088
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2089
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2090
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2091
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2092
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2301
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2302
+ pointer-events: none;
2093
2303
  }
2094
2304
 
2095
- .pf-v6-c-label.pf-m-orange {
2096
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2097
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2098
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2099
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2100
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2101
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2102
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2103
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2305
+ .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2306
+ color: var(--pf-v6-c-button--disabled--Color);
2307
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2308
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
2104
2309
  }
2105
2310
 
2106
- .pf-v6-c-label.pf-m-orangered {
2107
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2108
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2109
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2110
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2111
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2112
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2113
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2114
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2311
+ .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2312
+ border-color: transparent;
2115
2313
  }
2116
2314
 
2117
- .pf-v6-c-label.pf-m-yellow {
2118
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2119
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2120
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2121
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2122
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2123
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2124
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2125
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2315
+ .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 {
2316
+ color: var(--pf-v6-c-button--disabled__icon--Color);
2126
2317
  }
2127
2318
 
2128
- .pf-v6-c-label.pf-m-green {
2129
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2130
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2131
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2132
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2133
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2134
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2135
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2136
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2319
+ .pf-v6-c-button.pf-m-aria-disabled {
2320
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-v6-c-button--TextDecorationLine);
2321
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-v6-c-button--TextDecorationStyle);
2322
+ cursor: default;
2137
2323
  }
2138
2324
 
2139
- .pf-v6-c-label.pf-m-teal {
2140
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2141
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2142
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2143
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2144
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2145
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2146
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2147
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2325
+ .pf-v6-c-button.pf-m-progress {
2326
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
2327
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
2148
2328
  }
2149
2329
 
2150
- .pf-v6-c-label.pf-m-purple {
2151
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2152
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2153
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2154
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2155
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2156
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2157
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2158
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2330
+ .pf-v6-c-button.pf-m-in-progress {
2331
+ --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
2159
2332
  }
2160
2333
 
2161
- .pf-v6-c-label.pf-m-success {
2162
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2163
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2164
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2165
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2166
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2167
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2168
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2169
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2170
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2171
- --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);
2334
+ .pf-v6-c-button.pf-m-in-progress:not(.pf-m-plain) {
2335
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-in-progress--PaddingInlineEnd);
2336
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-in-progress--PaddingInlineStart);
2172
2337
  }
2173
2338
 
2174
- .pf-v6-c-label.pf-m-warning {
2175
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2176
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2177
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2178
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2179
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2180
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2181
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2182
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2183
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2184
- --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);
2339
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain {
2340
+ --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart);
2341
+ --pf-v6-c-button__progress--TranslateX: var(--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX);
2185
2342
  }
2186
2343
 
2187
- .pf-v6-c-label.pf-m-danger {
2188
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2189
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2190
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2191
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2192
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2193
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2194
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2195
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2196
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2197
- --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);
2344
+ .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
2345
+ opacity: 0;
2198
2346
  }
2199
2347
 
2200
- .pf-v6-c-label.pf-m-info {
2201
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2202
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2203
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2204
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2205
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2206
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2207
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2208
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2209
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2210
- --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);
2348
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2349
+ animation-name: pf-v6-c-button-icon-notify;
2350
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2351
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2211
2352
  }
2212
2353
 
2213
- .pf-v6-c-label.pf-m-custom {
2214
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2215
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2216
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2217
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2218
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2219
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2220
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2221
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2222
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2223
- --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);
2354
+ .pf-v6-c-button.pf-m-dock {
2355
+ justify-content: flex-start;
2356
+ width: 100%;
2224
2357
  }
2225
2358
 
2226
- .pf-v6-c-label.pf-m-compact {
2227
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2228
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2229
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2230
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2231
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2232
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2233
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2359
+ @media (min-width: 62rem) {
2360
+ .pf-v6-c-button.pf-m-dock {
2361
+ justify-content: center;
2362
+ }
2363
+ .pf-v6-c-button.pf-m-dock .pf-v6-c-button__text {
2364
+ display: none;
2365
+ }
2234
2366
  }
2235
-
2236
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2237
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2367
+ .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
2368
+ justify-content: flex-start;
2369
+ width: 100%;
2238
2370
  }
2239
2371
 
2240
- .pf-v6-c-label.pf-m-outline {
2241
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2242
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2243
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2244
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2245
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2246
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2247
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2248
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2249
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2250
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2372
+ .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
2373
+ display: revert;
2251
2374
  }
2252
2375
 
2253
- .pf-v6-c-label.pf-m-editable {
2254
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2255
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2376
+ .pf-v6-c-button__icon {
2377
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2378
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2379
+ color: var(--pf-v6-c-button__icon--Color);
2380
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2381
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2382
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2383
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2384
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2385
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2256
2386
  }
2257
2387
 
2258
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2259
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2260
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2388
+ .pf-v6-c-button__icon.pf-m-start {
2389
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2261
2390
  }
2262
2391
 
2263
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2264
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2265
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2266
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2392
+ .pf-v6-c-button__icon.pf-m-end {
2393
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2267
2394
  }
2268
2395
 
2269
- .pf-v6-c-label.pf-m-editable-active {
2270
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2271
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2272
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2273
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2396
+ .pf-v6-c-button__icon-favorite,
2397
+ .pf-v6-c-button__icon-favorited {
2398
+ grid-area: 1/1/1/1;
2399
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2400
+ transition-property: opacity;
2274
2401
  }
2275
2402
 
2276
- .pf-v6-c-label.pf-m-overflow {
2277
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2278
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2279
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
2403
+ .pf-v6-c-button__icon-favorite {
2404
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2280
2405
  }
2281
2406
 
2282
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2283
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2284
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2285
- --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
2407
+ .pf-v6-c-button__icon-favorited {
2408
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2286
2409
  }
2287
2410
 
2288
- .pf-v6-c-label.pf-m-add {
2289
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2290
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2291
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2292
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2411
+ .pf-v6-c-button__progress {
2412
+ position: absolute;
2413
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2414
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2415
+ line-height: 1;
2416
+ color: var(--pf-v6-c-button__progress--Color);
2417
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2293
2418
  }
2294
2419
 
2295
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2296
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2297
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2298
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2299
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2420
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2421
+ --pf-v6-c-spinner--Color: currentcolor;
2300
2422
  }
2301
2423
 
2302
- .pf-v6-c-label.pf-m-clickable {
2303
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2424
+ .pf-v6-c-button__text {
2425
+ text-decoration: inherit;
2304
2426
  }
2305
2427
 
2306
- .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) {
2307
- text-decoration-line: none;
2428
+ .pf-v6-c-button__count {
2429
+ display: inline-flex;
2430
+ align-items: center;
2308
2431
  }
2309
2432
 
2310
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2311
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2312
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2313
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2314
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2315
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2316
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2317
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2433
+ .pf-v6-c-button--hamburger-icon path {
2434
+ fill: none;
2435
+ stroke: currentcolor;
2436
+ stroke-linecap: round;
2437
+ stroke-linejoin: round;
2438
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2318
2439
  }
2319
2440
 
2320
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2321
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2441
+ .pf-v6-c-button--hamburger-icon--top {
2442
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2322
2443
  }
2323
2444
 
2324
- .pf-v6-c-label.pf-m-disabled {
2325
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2326
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2327
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2328
- --pf-v6-c-label--BorderWidth: 0;
2329
- pointer-events: none;
2445
+ .pf-v6-c-button--hamburger-icon--middle {
2446
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2330
2447
  }
2331
2448
 
2332
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2333
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2449
+ .pf-v6-c-button--hamburger-icon--arrow {
2450
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2334
2451
  }
2335
2452
 
2336
- .pf-v6-c-label,
2337
- .pf-v6-c-label__content {
2338
- display: inline-flex;
2339
- align-items: center;
2340
- justify-content: center;
2453
+ .pf-v6-c-button--hamburger-icon--bottom {
2454
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2341
2455
  }
2342
2456
 
2343
- .pf-v6-c-label__text {
2344
- overflow: hidden;
2345
- text-overflow: ellipsis;
2346
- white-space: nowrap;
2347
- max-width: var(--pf-v6-c-label__text--MaxWidth);
2457
+ @keyframes pf-v6-c-button-icon-notify {
2458
+ 33% {
2459
+ transform: rotate(30deg);
2460
+ }
2461
+ 66% {
2462
+ transform: rotate(-60deg);
2463
+ }
2464
+ }
2465
+ @keyframes pf-v6-c-button-icon-favorited {
2466
+ 50% {
2467
+ scale: 1.5;
2468
+ }
2469
+ }
2470
+ .pf-v6-c-text-input-group {
2471
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2472
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
2473
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2474
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2475
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2476
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2477
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2478
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2479
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2480
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2481
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2482
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2483
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2484
+ --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));
2485
+ --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));
2486
+ --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));
2487
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2488
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2489
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
2490
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2491
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2492
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2493
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2494
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2495
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2496
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2497
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2498
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2499
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2500
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2501
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2502
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2503
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
2504
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2505
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2506
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2507
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2508
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2509
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2510
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2511
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2512
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2513
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2514
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2515
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2516
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2517
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2518
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2519
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2520
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2521
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2348
2522
  }
2349
2523
 
2350
- .pf-v6-c-label__content {
2351
- gap: var(--pf-v6-c-label__content--Gap);
2352
- max-width: var(--pf-v6-c-label__content--MaxWidth);
2353
- padding: 0;
2354
- overflow: hidden;
2355
- color: var(--pf-v6-c-label--Color);
2356
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
2357
- background: transparent;
2358
- border-width: 0;
2524
+ .pf-v6-c-text-input-group {
2525
+ position: relative;
2526
+ display: flex;
2527
+ width: 100%;
2528
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
2529
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
2530
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
2531
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2532
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2533
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2534
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2535
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2359
2536
  }
2360
2537
 
2361
- .pf-v6-c-label__content::before {
2538
+ .pf-v6-c-text-input-group::before {
2362
2539
  position: absolute;
2363
2540
  inset: 0;
2364
- z-index: -1;
2365
2541
  pointer-events: none;
2366
2542
  content: "";
2367
- background-color: var(--pf-v6-c-label--BackgroundColor);
2368
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2369
- border-radius: var(--pf-v6-c-label--BorderRadius);
2370
- }
2371
-
2372
- input.pf-v6-c-label__content {
2373
- overflow: hidden;
2374
- text-overflow: ellipsis;
2375
- white-space: nowrap;
2376
- }
2377
-
2378
- .pf-v6-c-label__icon {
2379
- color: var(--pf-v6-c-label__icon--Color);
2380
- }
2381
-
2382
- .pf-v6-c-label__actions {
2383
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2543
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2544
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2545
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2546
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2547
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2384
2548
  }
2385
2549
 
2386
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
2387
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
2550
+ .pf-v6-c-text-input-group.pf-m-disabled {
2551
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2552
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2553
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2554
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2555
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2556
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2557
+ pointer-events: none;
2388
2558
  }
2389
2559
 
2390
- .pf-v6-c-label__actions .pf-v6-c-button {
2391
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2392
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2393
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2394
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2395
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2396
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2397
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2398
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2560
+ .pf-v6-c-text-input-group.pf-m-plain {
2561
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
2399
2562
  }
2400
2563
 
2401
- .pf-v6-c-label-group {
2402
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2403
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2404
- --pf-v6-c-label-group--MaxWidth: 100%;
2405
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2406
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2407
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2408
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2409
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2410
- --pf-v6-c-label-group__main--MinWidth: 0;
2411
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2412
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2413
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2414
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2415
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2416
- --pf-v6-c-label-group__list--MinWidth: 0;
2417
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2418
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2419
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2420
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2421
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2422
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2423
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2424
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2425
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2426
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2427
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2428
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2429
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2430
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2431
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2432
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2433
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2434
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2435
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2436
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2437
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2438
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2564
+ .pf-v6-c-text-input-group.pf-m-plain::before {
2565
+ border: 0;
2439
2566
  }
2440
2567
 
2441
- .pf-v6-c-label-group {
2442
- display: inline-flex;
2443
- row-gap: var(--pf-v6-c-label-group--RowGap);
2444
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2445
- align-items: center;
2446
- max-width: var(--pf-v6-c-label-group--MaxWidth);
2568
+ .pf-v6-c-text-input-group.pf-m-success {
2569
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2570
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2571
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2447
2572
  }
2448
2573
 
2449
- .pf-v6-c-label-group.pf-m-category {
2450
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2451
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2452
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2453
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2454
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2455
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2456
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2574
+ .pf-v6-c-text-input-group.pf-m-warning {
2575
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2576
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2577
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2457
2578
  }
2458
2579
 
2459
- .pf-v6-c-label-group.pf-m-vertical {
2460
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2461
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2462
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2463
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2464
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2465
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2466
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2580
+ .pf-v6-c-text-input-group.pf-m-error {
2581
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2582
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2583
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2467
2584
  }
2468
2585
 
2469
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2470
- align-items: flex-start;
2586
+ @media (prefers-reduced-motion: no-preference) {
2587
+ .pf-v6-c-text-input-group.pf-m-error {
2588
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2589
+ animation-name: pf-v6-global-danger-jiggle-motion;
2590
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2591
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2592
+ animation-fill-mode: both;
2593
+ }
2594
+ }
2595
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2596
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2597
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2598
+ animation-name: pf-v6-global-fade-in;
2599
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2600
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2471
2601
  }
2472
2602
 
2473
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2474
- flex-direction: column;
2475
- align-items: flex-start;
2476
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2603
+ .pf-v6-c-text-input-group:hover {
2604
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2477
2605
  }
2478
2606
 
2479
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2480
- flex-direction: column;
2481
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2607
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2608
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2482
2609
  }
2483
2610
 
2484
- .pf-v6-c-label-group.pf-m-editable,
2485
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2486
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2487
- display: flex;
2611
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
2612
+ --pf-v6-c-text-input-group__text--Position: relative;
2488
2613
  }
2489
2614
 
2490
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2491
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2492
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2493
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2494
- flex: 1;
2615
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2616
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2617
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2495
2618
  }
2496
2619
 
2497
- .pf-v6-c-label-group__main {
2620
+ .pf-v6-c-text-input-group__main {
2498
2621
  display: flex;
2499
2622
  flex: 1;
2500
2623
  flex-wrap: wrap;
2501
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
2502
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2503
- align-items: baseline;
2504
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2505
- }
2506
-
2507
- .pf-v6-c-label-group__list {
2508
- display: inline-flex;
2509
- flex-wrap: wrap;
2510
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
2511
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2512
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
2624
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2625
+ min-width: 0;
2513
2626
  }
2514
2627
 
2515
- .pf-v6-c-label-group__list-item {
2628
+ .pf-v6-c-text-input-group__main.pf-m-icon {
2629
+ --pf-v6-c-text-input-group__text--Position: relative;
2630
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2516
2631
  display: inline-flex;
2517
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2518
- }
2519
-
2520
- .pf-v6-c-label-group__label {
2521
- overflow: hidden;
2522
- text-overflow: ellipsis;
2523
- white-space: nowrap;
2524
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2632
+ align-items: center;
2633
+ justify-content: center;
2634
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2525
2635
  }
2526
2636
 
2527
- .pf-v6-c-label-group__close {
2528
- display: flex;
2529
- align-self: flex-start;
2637
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2638
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2530
2639
  }
2531
2640
 
2532
- .pf-v6-c-label-group__close .pf-v6-c-button {
2533
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2534
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2535
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2536
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2537
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2641
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2642
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2643
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2644
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2538
2645
  }
2539
2646
 
2540
- .pf-v6-c-label-group__textarea {
2541
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2542
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2543
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2544
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2545
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2546
- white-space: nowrap;
2547
- resize: none;
2548
- scrollbar-width: none;
2549
- -ms-overflow-style: none;
2550
- border: 0;
2647
+ .pf-v6-c-text-input-group__text {
2648
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
2649
+ display: inline-grid;
2650
+ flex: 1;
2651
+ grid-template-areas: "text-input";
2652
+ grid-template-columns: 1fr;
2551
2653
  }
2552
2654
 
2553
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2554
- display: none;
2655
+ .pf-v6-c-text-input-group__icon {
2656
+ position: absolute;
2657
+ inset-block-start: 50%;
2658
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2659
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2660
+ color: var(--pf-v6-c-text-input-group__icon--Color);
2661
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2555
2662
  }
2556
2663
 
2557
- .pf-v6-c-badge {
2558
- --pf-v6-c-badge--BorderColor: transparent;
2559
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2560
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
2561
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
2562
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
2563
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2564
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2565
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2566
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
2567
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
2568
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2569
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
2570
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
2571
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
2572
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
2573
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
2574
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
2575
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2576
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2577
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
2578
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2664
+ .pf-v6-c-text-input-group__icon.pf-m-status {
2665
+ inset-inline-start: auto;
2666
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2667
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2579
2668
  }
2580
2669
 
2581
- .pf-v6-c-badge {
2582
- position: relative;
2583
- display: inline-block;
2584
- min-width: var(--pf-v6-c-badge--MinWidth);
2585
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
2586
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
2587
- font-size: var(--pf-v6-c-badge--FontSize);
2588
- font-weight: var(--pf-v6-c-badge--FontWeight);
2589
- color: var(--pf-v6-c-badge--Color);
2590
- text-align: center;
2670
+ .pf-v6-c-text-input-group__text-input {
2671
+ overflow: hidden;
2672
+ text-overflow: ellipsis;
2591
2673
  white-space: nowrap;
2592
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2593
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2674
+ position: relative;
2675
+ width: 100%;
2676
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2677
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2678
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2679
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2680
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2681
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
2682
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2683
+ border: 0;
2684
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2594
2685
  }
2595
2686
 
2596
- .pf-v6-c-badge::after {
2597
- position: absolute;
2598
- inset: 0;
2599
- pointer-events: none;
2600
- content: "";
2601
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2602
- border-radius: inherit;
2687
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2688
+ grid-area: text-input;
2603
2689
  }
2604
2690
 
2605
- .pf-v6-c-badge.pf-m-read {
2606
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2607
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2608
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2609
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2691
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
2692
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2610
2693
  }
2611
2694
 
2612
- .pf-v6-c-badge.pf-m-unread {
2613
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2614
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2615
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2695
+ .pf-v6-c-text-input-group__text-input::placeholder {
2696
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2616
2697
  }
2617
2698
 
2618
- .pf-v6-c-badge.pf-m-disabled {
2619
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2620
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2699
+ .pf-v6-c-text-input-group__utilities {
2700
+ display: flex;
2701
+ align-items: center;
2702
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2703
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2621
2704
  }
2622
2705
 
2623
- .pf-v6-c-badge.pf-m-disabled::after {
2624
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2706
+ .pf-v6-c-text-input-group__utilities > * + * {
2707
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2625
2708
  }
2626
2709
 
2627
- .pf-v6-c-badge__toggle-icon {
2628
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2629
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2710
+ .pf-v6-c-text-input-group__group {
2711
+ display: flex;
2630
2712
  }
2631
2713
 
2632
2714
  .pf-v6-c-divider {
@@ -2950,86 +3032,135 @@ input.pf-v6-c-label__content {
2950
3032
  --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2951
3033
  }
2952
3034
  }
2953
- .pf-v6-c-check {
2954
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2955
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2956
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2957
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2958
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2959
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2960
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2961
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2962
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2963
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2964
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2965
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2966
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2967
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
3035
+ .pf-v6-c-tooltip {
3036
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3037
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3038
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3039
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3040
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3041
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3042
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3043
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3044
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3045
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3046
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3047
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3048
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3049
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3050
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3051
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3052
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3053
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3054
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3055
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3056
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3057
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3058
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3059
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3060
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3061
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
2968
3062
  }
2969
3063
 
2970
- .pf-v6-c-check {
2971
- display: grid;
2972
- grid-template-columns: auto 1fr;
2973
- grid-gap: var(--pf-v6-c-check--GridGap);
2974
- accent-color: var(--pf-v6-c-check--AccentColor);
3064
+ .pf-v6-c-tooltip {
3065
+ position: relative;
3066
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
3067
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
2975
3068
  }
2976
3069
 
2977
- .pf-v6-c-check.pf-m-standalone {
2978
- display: inline-grid;
2979
- grid-template-columns: auto;
2980
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
3070
+ .pf-v6-c-tooltip:is(.pf-m-top,
3071
+ .pf-m-top-left,
3072
+ .pf-m-top-right) {
3073
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3074
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3075
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3076
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3077
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
2981
3078
  }
2982
3079
 
2983
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2984
- align-self: center;
2985
- transform: none;
3080
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
3081
+ .pf-m-bottom-left,
3082
+ .pf-m-bottom-right) {
3083
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3084
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3085
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3086
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3087
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
2986
3088
  }
2987
3089
 
2988
- .pf-v6-c-check__input {
2989
- align-self: start;
2990
- font-size: var(--pf-v6-c-check__label--FontSize);
2991
- line-height: var(--pf-v6-c-check__label--LineHeight);
2992
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
3090
+ .pf-v6-c-tooltip:is(.pf-m-left,
3091
+ .pf-m-left-top,
3092
+ .pf-m-left-bottom) {
3093
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3094
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3095
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3096
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3097
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
2993
3098
  }
2994
3099
 
2995
- .pf-v6-c-check__label {
2996
- font-size: var(--pf-v6-c-check__label--FontSize);
2997
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2998
- line-height: var(--pf-v6-c-check__label--LineHeight);
2999
- color: var(--pf-v6-c-check__label--Color);
3100
+ .pf-v6-c-tooltip:is(.pf-m-right,
3101
+ .pf-m-right-top,
3102
+ .pf-m-right-bottom) {
3103
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3104
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3105
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3106
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3107
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3000
3108
  }
3001
3109
 
3002
- .pf-v6-c-check__description {
3003
- grid-column: 2;
3004
- font-size: var(--pf-v6-c-check__description--FontSize);
3005
- color: var(--pf-v6-c-check__description--Color);
3110
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
3111
+ .pf-m-right-top) {
3112
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3113
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3006
3114
  }
3007
3115
 
3008
- .pf-v6-c-check__body {
3009
- grid-column: 2;
3116
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3117
+ .pf-m-right-bottom) {
3118
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3119
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3010
3120
  }
3011
3121
 
3012
- .pf-v6-c-check__label,
3013
- .pf-v6-c-check__input {
3014
- justify-self: start;
3122
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
3123
+ .pf-m-bottom-left) {
3124
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3125
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3015
3126
  }
3016
3127
 
3017
- label.pf-v6-c-check, .pf-v6-c-check__label,
3018
- .pf-v6-c-check__input {
3019
- cursor: pointer;
3128
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
3129
+ .pf-m-bottom-right) {
3130
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3131
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3020
3132
  }
3021
3133
 
3022
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
3023
- .pf-v6-c-check__input:disabled,
3024
- .pf-v6-c-check__input.pf-m-disabled {
3025
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
3026
- cursor: not-allowed;
3134
+ .pf-v6-c-tooltip__content {
3135
+ position: relative;
3136
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3137
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3138
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3139
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3140
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
3141
+ color: var(--pf-v6-c-tooltip__content--Color);
3142
+ text-align: center;
3143
+ word-break: break-word;
3144
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3145
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3027
3146
  }
3028
3147
 
3029
- .pf-v6-c-check__label-required {
3030
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
3031
- font-size: var(--pf-v6-c-check__label-required--FontSize);
3032
- color: var(--pf-v6-c-check__label-required--Color);
3148
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
3149
+ text-align: start;
3150
+ }
3151
+
3152
+ .pf-v6-c-tooltip__arrow {
3153
+ position: absolute;
3154
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3155
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3156
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3157
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3158
+ width: var(--pf-v6-c-tooltip__arrow--Width);
3159
+ height: var(--pf-v6-c-tooltip__arrow--Height);
3160
+ pointer-events: none;
3161
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3162
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3163
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3033
3164
  }
3034
3165
 
3035
3166
  .pf-v6-c-menu {
@@ -3945,134 +4076,4 @@ button.pf-v6-c-breadcrumb__link {
3945
4076
  stroke-dashoffset: 280;
3946
4077
  transform: rotate(720deg);
3947
4078
  }
3948
- }
3949
- .pf-v6-c-tooltip {
3950
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3951
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3952
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3953
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3954
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3955
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3956
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3957
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3958
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3959
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3960
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3961
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3962
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3963
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3964
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3965
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3966
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3967
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3968
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3969
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3970
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3971
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3972
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3973
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3974
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3975
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3976
- }
3977
-
3978
- .pf-v6-c-tooltip {
3979
- position: relative;
3980
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
3981
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3982
- }
3983
-
3984
- .pf-v6-c-tooltip:is(.pf-m-top,
3985
- .pf-m-top-left,
3986
- .pf-m-top-right) {
3987
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3988
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3989
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3990
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3991
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3992
- }
3993
-
3994
- .pf-v6-c-tooltip:is(.pf-m-bottom,
3995
- .pf-m-bottom-left,
3996
- .pf-m-bottom-right) {
3997
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3998
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3999
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
4000
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
4001
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
4002
- }
4003
-
4004
- .pf-v6-c-tooltip:is(.pf-m-left,
4005
- .pf-m-left-top,
4006
- .pf-m-left-bottom) {
4007
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
4008
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
4009
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4010
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
4011
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
4012
- }
4013
-
4014
- .pf-v6-c-tooltip:is(.pf-m-right,
4015
- .pf-m-right-top,
4016
- .pf-m-right-bottom) {
4017
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
4018
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
4019
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
4020
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
4021
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
4022
- }
4023
-
4024
- .pf-v6-c-tooltip:is(.pf-m-left-top,
4025
- .pf-m-right-top) {
4026
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
4027
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
4028
- }
4029
-
4030
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
4031
- .pf-m-right-bottom) {
4032
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
4033
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
4034
- }
4035
-
4036
- .pf-v6-c-tooltip:is(.pf-m-top-left,
4037
- .pf-m-bottom-left) {
4038
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
4039
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
4040
- }
4041
-
4042
- .pf-v6-c-tooltip:is(.pf-m-top-right,
4043
- .pf-m-bottom-right) {
4044
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
4045
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
4046
- }
4047
-
4048
- .pf-v6-c-tooltip__content {
4049
- position: relative;
4050
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
4051
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
4052
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
4053
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
4054
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
4055
- color: var(--pf-v6-c-tooltip__content--Color);
4056
- text-align: center;
4057
- word-break: break-word;
4058
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
4059
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
4060
- }
4061
-
4062
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
4063
- text-align: start;
4064
- }
4065
-
4066
- .pf-v6-c-tooltip__arrow {
4067
- position: absolute;
4068
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
4069
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
4070
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
4071
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
4072
- width: var(--pf-v6-c-tooltip__arrow--Width);
4073
- height: var(--pf-v6-c-tooltip__arrow--Height);
4074
- pointer-events: none;
4075
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
4076
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
4077
- transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
4078
4079
  }