@patternfly/react-templates 6.3.1-prerelease.5 → 6.3.1-prerelease.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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-W-5aODb_.css → output-_SycPmCl.css} +1684 -1683
  6. package/package.json +3 -3
package/dist/umd/assets/{output-W-5aODb_.css → output-_SycPmCl.css} RENAMED
@@ -3,1174 +3,1266 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-menu-toggle {
7
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
9
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
10
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
11
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
12
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
13
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
14
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
15
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
16
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
17
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
18
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
19
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
20
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
21
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
23
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
24
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
25
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
26
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
27
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
28
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
29
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
30
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
31
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
32
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
33
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
34
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
35
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
36
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
37
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
38
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
39
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
40
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
41
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
42
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
43
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
44
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
45
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
46
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
47
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
48
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
49
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
50
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
51
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
52
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
53
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
54
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
55
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
56
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
57
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
58
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
59
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
60
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
61
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
62
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
63
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
64
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
65
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
66
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
67
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
68
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
69
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
70
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
71
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
72
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
73
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
74
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
75
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
76
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
77
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
78
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
79
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
80
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
81
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
82
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
83
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
84
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
85
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
86
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
87
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
88
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
89
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
90
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
91
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
92
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
93
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
94
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
95
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
96
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
97
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
98
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
99
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
100
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
101
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
102
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
103
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
104
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
105
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
106
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
107
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
108
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
109
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
110
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
111
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
112
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
113
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
114
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
115
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
116
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
117
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
118
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
119
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
120
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
121
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
122
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
123
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
124
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
125
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
126
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
127
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
128
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
129
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
130
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
131
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
132
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
133
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
134
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
135
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
136
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
137
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
138
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
139
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
140
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
141
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
142
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
143
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
144
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
145
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
146
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
147
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
148
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
149
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
150
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
6
+ .pf-v6-c-text-input-group {
7
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
40
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
41
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
42
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
43
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
44
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
45
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
46
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
47
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
48
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
49
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
50
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
51
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
52
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
53
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
54
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
55
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
56
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
151
57
  }
152
58
 
153
- .pf-v6-c-menu-toggle {
59
+ .pf-v6-c-text-input-group {
154
60
  position: relative;
155
- display: inline-flex;
156
- gap: var(--pf-v6-c-menu-toggle--Gap);
157
- align-items: center;
158
- justify-content: center;
159
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
160
- max-width: 100%;
161
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
162
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
163
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
164
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
165
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
166
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
167
- color: var(--pf-v6-c-menu-toggle--Color);
168
- cursor: pointer;
169
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
170
- border: 0;
171
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
172
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
173
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
174
- }
175
-
176
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
177
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
61
+ display: flex;
62
+ width: 100%;
63
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
64
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
65
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
66
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
67
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
68
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
69
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
70
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
178
71
  }
179
72
 
180
- .pf-v6-c-menu-toggle::before {
73
+ .pf-v6-c-text-input-group::before {
181
74
  position: absolute;
182
- inset-block-start: 0;
183
- inset-block-end: 0;
184
- inset-inline-start: 0;
185
- inset-inline-end: 0;
186
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
75
+ inset: 0;
187
76
  pointer-events: none;
188
77
  content: "";
189
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
190
- transition: inherit;
78
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
79
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
80
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
81
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
82
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
191
83
  }
192
84
 
193
- .pf-v6-c-menu-toggle.pf-m-primary {
194
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
195
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
196
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
197
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
198
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
199
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
200
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
201
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
202
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
203
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
204
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
205
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
206
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
207
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
208
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
209
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
210
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
85
+ .pf-v6-c-text-input-group.pf-m-disabled {
86
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
87
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
88
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
89
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
90
+ pointer-events: none;
211
91
  }
212
92
 
213
- .pf-v6-c-menu-toggle.pf-m-secondary {
214
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
215
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
216
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
217
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
218
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
219
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
220
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
221
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
222
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
223
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
224
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
225
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
226
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
227
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
228
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
229
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
230
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
93
+ .pf-v6-c-text-input-group.pf-m-plain {
94
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
231
95
  }
232
96
 
233
- .pf-v6-c-menu-toggle.pf-m-full-height {
234
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
235
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
236
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
237
- align-items: center;
238
- height: 100%;
97
+ .pf-v6-c-text-input-group.pf-m-plain::before {
98
+ border: 0;
239
99
  }
240
100
 
241
- .pf-v6-c-menu-toggle.pf-m-full-width {
242
- width: 100%;
101
+ .pf-v6-c-text-input-group.pf-m-success {
102
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
103
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
104
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
243
105
  }
244
106
 
245
- .pf-v6-c-menu-toggle.pf-m-plain {
246
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
247
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
248
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
249
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
250
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
251
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
252
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
253
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
254
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
255
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
256
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
257
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
258
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
259
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
260
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
107
+ .pf-v6-c-text-input-group.pf-m-warning {
108
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
109
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
110
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
261
111
  }
262
112
 
263
- .pf-v6-c-menu-toggle.pf-m-plain::before {
264
- border: none;
113
+ .pf-v6-c-text-input-group.pf-m-error {
114
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
115
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
116
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
265
117
  }
266
118
 
267
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
268
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
269
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
270
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
271
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
272
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
273
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
274
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
275
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
276
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
119
+ @media (prefers-reduced-motion: no-preference) {
120
+ .pf-v6-c-text-input-group.pf-m-error {
121
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
122
+ animation-name: pf-v6-global-danger-jiggle-motion;
123
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
124
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
125
+ animation-fill-mode: both;
126
+ }
277
127
  }
278
-
279
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
280
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
281
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
282
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
283
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
284
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
128
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
129
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
130
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
131
+ animation-name: pf-v6-global-fade-in;
132
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
133
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
285
134
  }
286
135
 
287
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
288
- border: 0;
136
+ .pf-v6-c-text-input-group:hover {
137
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
289
138
  }
290
139
 
291
- .pf-v6-c-menu-toggle.pf-m-small {
292
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
293
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
294
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
295
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
296
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
297
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
298
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
299
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
140
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
141
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
300
142
  }
301
143
 
302
- .pf-v6-c-menu-toggle.pf-m-success {
303
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
304
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
144
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
145
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
146
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
305
147
  }
306
148
 
307
- .pf-v6-c-menu-toggle.pf-m-warning {
308
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
309
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
149
+ .pf-v6-c-text-input-group__main {
150
+ display: flex;
151
+ flex: 1;
152
+ flex-wrap: wrap;
153
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
154
+ min-width: 0;
310
155
  }
311
156
 
312
- .pf-v6-c-menu-toggle.pf-m-danger {
313
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
314
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
157
+ .pf-v6-c-text-input-group__main.pf-m-icon {
158
+ --pf-v6-c-text-input-group__text--Position: relative;
159
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
160
+ display: inline-flex;
161
+ align-items: center;
162
+ justify-content: center;
163
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
315
164
  }
316
165
 
317
- @media screen and (prefers-reduced-motion: no-preference) {
318
- .pf-v6-c-menu-toggle.pf-m-danger {
319
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
320
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
321
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
322
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
323
- animation-fill-mode: both;
324
- }
325
- }
326
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
327
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
328
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
329
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
166
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
167
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
330
168
  }
331
169
 
332
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
333
- from {
334
- opacity: 0;
335
- }
336
- to {
337
- opacity: 1;
338
- }
339
- }
340
- .pf-v6-c-menu-toggle.pf-m-settings {
341
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
342
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
343
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
344
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
345
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
346
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
347
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
170
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
171
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
172
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
173
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
348
174
  }
349
175
 
350
- .pf-v6-c-menu-toggle.pf-m-placeholder {
351
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
176
+ .pf-v6-c-text-input-group__text {
177
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
178
+ display: inline-grid;
179
+ flex: 1;
180
+ grid-template-areas: "text-input";
181
+ grid-template-columns: 1fr;
352
182
  }
353
183
 
354
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
355
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
356
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
357
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
358
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
359
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
184
+ .pf-v6-c-text-input-group__icon {
185
+ position: absolute;
186
+ inset-block-start: 50%;
187
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
188
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
189
+ color: var(--pf-v6-c-text-input-group__icon--Color);
190
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
360
191
  }
361
192
 
362
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
363
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
364
- pointer-events: none;
193
+ .pf-v6-c-text-input-group__icon.pf-m-status {
194
+ inset-inline-start: auto;
195
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
196
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
365
197
  }
366
198
 
367
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
368
- syntax: "<length>";
369
- inherits: false;
370
- initial-value: 0;
371
- }
372
- @media (prefers-reduced-motion: no-preference) {
373
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
374
- 33% {
375
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
376
- }
377
- 66% {
378
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
379
- }
380
- }
199
+ .pf-v6-c-text-input-group__text-input {
200
+ overflow: hidden;
201
+ text-overflow: ellipsis;
202
+ white-space: nowrap;
203
+ position: relative;
204
+ width: 100%;
205
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
206
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
207
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
208
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
209
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
210
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
211
+ border: 0;
212
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
381
213
  }
382
- .pf-v6-c-menu-toggle.pf-m-split-button {
383
- --pf-v6-c-menu-toggle--Gap: 0;
384
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
385
- padding: 0;
214
+
215
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
216
+ grid-area: text-input;
386
217
  }
387
218
 
388
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
389
- position: relative;
390
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
391
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
392
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
393
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
219
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
220
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
394
221
  }
395
222
 
396
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
397
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
398
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
223
+ .pf-v6-c-text-input-group__text-input::placeholder {
224
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
399
225
  }
400
226
 
401
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
402
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
403
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
404
- }
405
-
406
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
407
- --pf-v6-c-check__label--Color: currentcolor;
408
- --pf-v6-c-check__label--disabled--Color: currentcolor;
227
+ .pf-v6-c-text-input-group__utilities {
228
+ display: flex;
409
229
  align-items: center;
410
- align-self: stretch;
411
- }
412
-
413
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
414
- --pf-v6-c-check__input--TranslateY: 0;
415
- align-self: center;
230
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
231
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
416
232
  }
417
233
 
418
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
419
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
234
+ .pf-v6-c-text-input-group__utilities > * + * {
235
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
420
236
  }
421
237
 
422
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
423
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
238
+ .pf-v6-c-text-input-group__group {
239
+ display: flex;
424
240
  }
425
241
 
426
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
427
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
428
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
242
+ .pf-v6-c-divider {
243
+ --pf-v6-c-divider--Display: flex;
244
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
245
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
246
+ --pf-v6-c-divider--before--FlexBasis: 100%;
429
247
  }
430
248
 
431
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
432
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
433
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
249
+ .pf-v6-c-divider {
250
+ flex-direction: row;
251
+ width: 100%;
252
+ height: var(--pf-v6-c-divider--Size);
253
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
254
+ --pf-v6-hidden-visible--hidden--Display: none;
255
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
256
+ display: var(--pf-v6-hidden-visible--Display);
257
+ flex-shrink: 0;
258
+ align-items: stretch;
259
+ align-self: stretch;
260
+ justify-content: center;
261
+ border: 0;
434
262
  }
435
263
 
436
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
437
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
264
+ .pf-v6-c-divider.pf-m-hidden {
265
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
438
266
  }
439
267
 
440
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
441
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
268
+ @media screen and (min-width: 36rem) {
269
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
270
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
271
+ }
272
+ .pf-v6-c-divider.pf-m-visible-on-sm {
273
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
274
+ }
442
275
  }
443
-
444
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
445
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
446
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
447
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
276
+ @media screen and (min-width: 48rem) {
277
+ .pf-v6-c-divider.pf-m-hidden-on-md {
278
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
279
+ }
280
+ .pf-v6-c-divider.pf-m-visible-on-md {
281
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
282
+ }
448
283
  }
449
-
450
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
451
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
452
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
453
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
284
+ @media screen and (min-width: 62rem) {
285
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
286
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
287
+ }
288
+ .pf-v6-c-divider.pf-m-visible-on-lg {
289
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
290
+ }
454
291
  }
455
-
456
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
457
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
292
+ @media screen and (min-width: 75rem) {
293
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
294
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
295
+ }
296
+ .pf-v6-c-divider.pf-m-visible-on-xl {
297
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
298
+ }
458
299
  }
459
-
460
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
461
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
462
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
463
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
300
+ @media screen and (min-width: 90.625rem) {
301
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
302
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
303
+ }
304
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
305
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
306
+ }
464
307
  }
465
-
466
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
467
- content: none;
308
+ .pf-v6-c-divider::before {
309
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
310
+ content: "";
311
+ background-color: var(--pf-v6-c-divider--Color);
468
312
  }
469
313
 
470
- .pf-v6-c-menu-toggle.pf-m-typeahead {
471
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
472
- --pf-v6-c-menu-toggle--Gap: 0;
473
- align-items: stretch;
474
- padding: 0;
314
+ .pf-v6-c-divider.pf-m-horizontal {
315
+ flex-direction: row;
316
+ width: 100%;
317
+ height: var(--pf-v6-c-divider--Size);
475
318
  }
476
319
 
477
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
478
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
320
+ .pf-v6-c-divider.pf-m-vertical {
321
+ flex-direction: column;
322
+ width: var(--pf-v6-c-divider--Size);
323
+ height: inherit;
479
324
  }
480
325
 
481
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
482
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
483
- display: flex;
484
- align-items: stretch;
326
+ .pf-v6-c-divider.pf-m-inset-none {
327
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
485
328
  }
486
329
 
487
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
488
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
489
- flex: 1;
330
+ .pf-v6-c-divider.pf-m-inset-xs {
331
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
490
332
  }
491
333
 
492
- .pf-v6-c-menu-toggle__button {
493
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
494
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
495
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
496
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
497
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
498
- color: inherit;
499
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
500
- border: 0;
334
+ .pf-v6-c-divider.pf-m-inset-sm {
335
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
501
336
  }
502
337
 
503
- .pf-v6-c-menu-toggle__button.pf-m-text {
504
- display: inline-flex;
505
- align-items: baseline;
338
+ .pf-v6-c-divider.pf-m-inset-md {
339
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
506
340
  }
507
341
 
508
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
509
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
510
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
342
+ .pf-v6-c-divider.pf-m-inset-lg {
343
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
511
344
  }
512
345
 
513
- .pf-v6-c-menu-toggle__text {
514
- overflow: hidden;
515
- text-overflow: ellipsis;
516
- white-space: nowrap;
517
- min-width: 0;
346
+ .pf-v6-c-divider.pf-m-inset-xl {
347
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
518
348
  }
519
349
 
520
- .pf-v6-c-menu-toggle__count {
521
- display: flex;
522
- flex-wrap: nowrap;
350
+ .pf-v6-c-divider.pf-m-inset-2xl {
351
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
523
352
  }
524
353
 
525
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
526
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
527
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
528
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
529
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
354
+ .pf-v6-c-divider.pf-m-inset-3xl {
355
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
530
356
  }
531
357
 
532
- .pf-v6-c-menu-toggle__icon {
533
- flex-shrink: 0;
534
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
535
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
536
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
537
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
358
+ @media (min-width: 36rem) {
359
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
360
+ flex-direction: row;
361
+ width: 100%;
362
+ height: var(--pf-v6-c-divider--Size);
363
+ }
538
364
  }
539
-
540
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
541
- vertical-align: middle;
365
+ @media (min-width: 36rem) {
366
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
367
+ flex-direction: column;
368
+ width: var(--pf-v6-c-divider--Size);
369
+ height: inherit;
370
+ }
542
371
  }
543
-
544
- .pf-v6-c-menu-toggle__controls {
545
- display: flex;
546
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
547
- align-items: center;
548
- justify-content: center;
549
- margin-inline-start: auto;
372
+ @media (min-width: 36rem) {
373
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
374
+ --pf-v6-c-divider--before--FlexBasis: 100%;
375
+ }
376
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
377
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
378
+ }
379
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
380
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
381
+ }
382
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
383
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
384
+ }
385
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
386
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
387
+ }
388
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
389
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
390
+ }
391
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
392
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
393
+ }
394
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
395
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
396
+ }
550
397
  }
551
-
552
- .pf-v6-c-menu-toggle__toggle-icon {
553
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
554
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
398
+ @media (min-width: 48rem) {
399
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
400
+ flex-direction: row;
401
+ width: 100%;
402
+ height: var(--pf-v6-c-divider--Size);
403
+ }
555
404
  }
556
-
557
- .pf-v6-c-menu-toggle__status-icon {
558
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
405
+ @media (min-width: 48rem) {
406
+ .pf-v6-c-divider.pf-m-vertical-on-md {
407
+ flex-direction: column;
408
+ width: var(--pf-v6-c-divider--Size);
409
+ height: inherit;
410
+ }
559
411
  }
560
-
561
- .pf-v6-c-label {
562
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
563
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
564
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
565
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
566
- --pf-v6-c-label--MaxWidth: 100%;
567
- --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)));
568
- --pf-v6-c-label--BorderWidth: 0;
569
- --pf-v6-c-label--BorderColor: transparent;
570
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
571
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
572
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
573
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
574
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
575
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
576
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
577
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
578
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
579
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
580
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
581
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
582
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
583
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
584
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
585
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
586
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
587
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
588
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
589
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
590
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
591
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
592
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
593
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
594
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
595
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
596
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
597
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
598
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
599
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
600
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
601
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
602
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
603
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
604
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
605
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
606
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
607
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
608
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
609
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
610
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
611
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
612
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
613
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
614
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
615
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
616
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
617
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
618
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
619
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
620
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
621
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
622
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
623
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
624
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
625
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
626
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
627
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
628
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
629
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
630
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
631
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
632
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
633
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
634
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
635
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
636
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
637
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
638
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
639
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
640
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
641
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
642
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
643
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
644
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
645
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
646
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
647
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
648
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
649
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
650
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
651
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
652
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
653
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
654
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
655
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
656
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
657
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
658
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
659
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
660
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
661
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
662
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
663
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
664
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
665
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
666
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
667
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
668
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
669
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
670
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
671
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
672
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
673
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
674
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
675
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
676
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
677
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
678
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
679
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
680
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
681
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
682
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
683
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
684
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
685
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
686
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
687
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
688
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
689
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
690
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
691
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
692
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
693
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
694
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
695
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
696
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
697
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
698
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
699
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
700
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
701
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
702
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
703
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
704
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
705
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
706
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
707
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
708
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
709
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
710
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
711
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
712
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
713
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
714
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
715
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
716
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
717
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
718
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
719
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
720
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
721
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
722
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
723
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
724
- --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)));
725
- --pf-v6-c-label__content--MaxWidth: 100%;
726
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
727
- --pf-v6-c-label__content--Cursor: initial;
728
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
729
- --pf-v6-c-label__text--MaxWidth: 100%;
730
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
731
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
732
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
733
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
734
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
735
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
736
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
737
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
738
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
739
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
740
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
741
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
742
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
743
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
744
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
745
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
746
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
747
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
748
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
749
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
750
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
751
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
752
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
753
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
412
+ @media (min-width: 48rem) {
413
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
414
+ --pf-v6-c-divider--before--FlexBasis: 100%;
415
+ }
416
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
417
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
418
+ }
419
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
420
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
421
+ }
422
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
423
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
424
+ }
425
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
426
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
427
+ }
428
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
429
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
430
+ }
431
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
432
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
433
+ }
434
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
435
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
436
+ }
437
+ }
438
+ @media (min-width: 62rem) {
439
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
440
+ flex-direction: row;
441
+ width: 100%;
442
+ height: var(--pf-v6-c-divider--Size);
443
+ }
444
+ }
445
+ @media (min-width: 62rem) {
446
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
447
+ flex-direction: column;
448
+ width: var(--pf-v6-c-divider--Size);
449
+ height: inherit;
450
+ }
451
+ }
452
+ @media (min-width: 62rem) {
453
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
454
+ --pf-v6-c-divider--before--FlexBasis: 100%;
455
+ }
456
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
457
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
458
+ }
459
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
460
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
461
+ }
462
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
463
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
464
+ }
465
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
466
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
467
+ }
468
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
469
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
470
+ }
471
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
472
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
473
+ }
474
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
475
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
476
+ }
477
+ }
478
+ @media (min-width: 75rem) {
479
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
480
+ flex-direction: row;
481
+ width: 100%;
482
+ height: var(--pf-v6-c-divider--Size);
483
+ }
484
+ }
485
+ @media (min-width: 75rem) {
486
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
487
+ flex-direction: column;
488
+ width: var(--pf-v6-c-divider--Size);
489
+ height: inherit;
490
+ }
491
+ }
492
+ @media (min-width: 75rem) {
493
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
494
+ --pf-v6-c-divider--before--FlexBasis: 100%;
495
+ }
496
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
497
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
498
+ }
499
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
500
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
501
+ }
502
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
503
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
504
+ }
505
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
506
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
507
+ }
508
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
509
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
510
+ }
511
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
512
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
513
+ }
514
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
515
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
516
+ }
517
+ }
518
+ @media (min-width: 90.625rem) {
519
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
520
+ flex-direction: row;
521
+ width: 100%;
522
+ height: var(--pf-v6-c-divider--Size);
523
+ }
524
+ }
525
+ @media (min-width: 90.625rem) {
526
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
527
+ flex-direction: column;
528
+ width: var(--pf-v6-c-divider--Size);
529
+ height: inherit;
530
+ }
531
+ }
532
+ @media (min-width: 90.625rem) {
533
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
534
+ --pf-v6-c-divider--before--FlexBasis: 100%;
535
+ }
536
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
537
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
538
+ }
539
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
540
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
541
+ }
542
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
543
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
544
+ }
545
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
546
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
547
+ }
548
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
549
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
550
+ }
551
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
552
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
553
+ }
554
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
555
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
556
+ }
557
+ }
558
+ .pf-v6-c-badge {
559
+ --pf-v6-c-badge--BorderColor: transparent;
560
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
561
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
562
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
563
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
564
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
565
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
566
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
567
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
568
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
569
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
570
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
571
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
572
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
573
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
574
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
575
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
576
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
577
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
578
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
579
+ }
580
+
581
+ .pf-v6-c-badge {
582
+ position: relative;
583
+ display: inline-block;
584
+ min-width: var(--pf-v6-c-badge--MinWidth);
585
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
586
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
587
+ font-size: var(--pf-v6-c-badge--FontSize);
588
+ font-weight: var(--pf-v6-c-badge--FontWeight);
589
+ color: var(--pf-v6-c-badge--Color);
590
+ text-align: center;
591
+ white-space: nowrap;
592
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
593
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
594
+ }
595
+
596
+ .pf-v6-c-badge::after {
597
+ position: absolute;
598
+ inset: 0;
599
+ pointer-events: none;
600
+ content: "";
601
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
602
+ border-radius: inherit;
603
+ }
604
+
605
+ .pf-v6-c-badge.pf-m-read {
606
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
607
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
608
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
609
+ }
610
+
611
+ .pf-v6-c-badge.pf-m-unread {
612
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
613
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
614
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
615
+ }
616
+
617
+ .pf-v6-c-badge.pf-m-disabled {
618
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
619
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
620
+ }
621
+
622
+ .pf-v6-c-badge.pf-m-disabled::after {
623
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
624
+ }
625
+
626
+ .pf-v6-c-badge__toggle-icon {
627
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
628
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
629
+ }
630
+
631
+ .pf-v6-c-check {
632
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
633
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
634
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
635
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
636
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
637
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
638
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
639
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
640
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
641
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
642
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
643
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
644
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
645
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
646
+ }
647
+
648
+ .pf-v6-c-check {
649
+ display: grid;
650
+ grid-template-columns: auto 1fr;
651
+ grid-gap: var(--pf-v6-c-check--GridGap);
652
+ accent-color: var(--pf-v6-c-check--AccentColor);
653
+ }
654
+
655
+ .pf-v6-c-check.pf-m-standalone {
656
+ display: inline-grid;
657
+ grid-template-columns: auto;
658
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
659
+ }
660
+
661
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
662
+ align-self: center;
663
+ transform: none;
664
+ }
665
+
666
+ .pf-v6-c-check__input {
667
+ align-self: start;
668
+ font-size: var(--pf-v6-c-check__label--FontSize);
669
+ line-height: var(--pf-v6-c-check__label--LineHeight);
670
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
671
+ }
672
+
673
+ .pf-v6-c-check__label {
674
+ font-size: var(--pf-v6-c-check__label--FontSize);
675
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
676
+ line-height: var(--pf-v6-c-check__label--LineHeight);
677
+ color: var(--pf-v6-c-check__label--Color);
678
+ }
679
+
680
+ .pf-v6-c-check__description {
681
+ grid-column: 2;
682
+ font-size: var(--pf-v6-c-check__description--FontSize);
683
+ color: var(--pf-v6-c-check__description--Color);
684
+ }
685
+
686
+ .pf-v6-c-check__body {
687
+ grid-column: 2;
688
+ }
689
+
690
+ .pf-v6-c-check__label,
691
+ .pf-v6-c-check__input {
692
+ justify-self: start;
693
+ }
694
+
695
+ label.pf-v6-c-check, .pf-v6-c-check__label,
696
+ .pf-v6-c-check__input {
697
+ cursor: pointer;
698
+ }
699
+
700
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
701
+ .pf-v6-c-check__input:disabled,
702
+ .pf-v6-c-check__input.pf-m-disabled {
703
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
704
+ cursor: not-allowed;
705
+ }
706
+
707
+ .pf-v6-c-check__label-required {
708
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
709
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
710
+ color: var(--pf-v6-c-check__label-required--Color);
711
+ }
712
+
713
+ .pf-v6-c-menu-toggle {
714
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
715
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
716
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
717
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
718
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
719
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
720
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
721
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
722
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
723
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
724
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
725
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
726
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
727
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
728
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
729
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
730
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
731
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
732
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
733
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
734
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
735
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
736
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
737
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
738
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
739
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
740
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
741
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
742
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
743
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
744
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
745
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
746
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
747
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
748
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
749
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
750
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
751
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
752
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
753
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
754
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
755
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
756
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
757
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
758
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
759
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
760
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
761
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
762
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
763
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
764
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
765
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
766
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
767
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
768
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
769
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
770
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
771
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
772
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
773
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
774
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
775
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
776
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
777
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
778
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
779
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
780
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
781
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
782
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
783
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
784
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
785
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
786
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
787
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
788
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
789
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
790
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
791
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
792
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
793
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
794
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
795
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
796
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
797
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
798
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
799
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
800
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
801
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
802
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
803
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
804
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
805
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
806
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
807
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
808
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
809
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
810
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
811
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
812
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
813
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
814
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
815
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
816
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
817
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
818
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
819
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
820
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
821
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
822
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
823
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
824
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
825
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
826
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
827
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
828
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
829
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
830
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
831
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
832
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
833
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
834
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
835
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
836
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
837
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
838
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
839
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
840
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
841
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
842
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
843
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
844
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
845
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
846
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
847
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
848
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
849
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
850
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
851
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
852
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
853
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
854
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
855
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
856
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
857
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
754
858
  }
755
859
 
756
- .pf-v6-c-label {
860
+ .pf-v6-c-menu-toggle {
757
861
  position: relative;
758
- min-width: var(--pf-v6-c-label--MinWidth);
759
- max-width: var(--pf-v6-c-label--MaxWidth);
760
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
761
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
762
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
763
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
764
- font-size: var(--pf-v6-c-label--FontSize);
765
- white-space: nowrap;
766
- background: transparent;
767
- isolation: isolate;
862
+ display: inline-flex;
863
+ gap: var(--pf-v6-c-menu-toggle--Gap);
864
+ align-items: center;
865
+ justify-content: center;
866
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
867
+ max-width: 100%;
868
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
869
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
870
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
871
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
872
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
873
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
874
+ color: var(--pf-v6-c-menu-toggle--Color);
875
+ cursor: pointer;
876
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
768
877
  border: 0;
769
- border-radius: var(--pf-v6-c-label--BorderRadius);
878
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
879
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
880
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
770
881
  }
771
882
 
772
- .pf-v6-c-label.pf-m-blue {
773
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
774
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
775
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
776
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
777
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
778
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
779
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
780
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
883
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
884
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
781
885
  }
782
886
 
783
- .pf-v6-c-label.pf-m-red {
784
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
785
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
786
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
787
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
788
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
789
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
790
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
791
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
887
+ .pf-v6-c-menu-toggle::before {
888
+ position: absolute;
889
+ inset-block-start: 0;
890
+ inset-block-end: 0;
891
+ inset-inline-start: 0;
892
+ inset-inline-end: 0;
893
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
894
+ pointer-events: none;
895
+ content: "";
896
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
897
+ transition: inherit;
792
898
  }
793
899
 
794
- .pf-v6-c-label.pf-m-orange {
795
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
796
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
797
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
798
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
799
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
800
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
801
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
802
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
900
+ .pf-v6-c-menu-toggle.pf-m-primary {
901
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
902
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
903
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
904
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
905
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
906
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
907
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
908
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
909
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
910
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
911
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
912
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
913
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
914
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
915
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
916
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
917
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
803
918
  }
804
919
 
805
- .pf-v6-c-label.pf-m-orangered {
806
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
807
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
808
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
809
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
810
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
811
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
812
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
813
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
920
+ .pf-v6-c-menu-toggle.pf-m-secondary {
921
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
922
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
923
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
924
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
925
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
926
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
927
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
928
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
929
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
930
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
931
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
932
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
933
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
934
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
935
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
936
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
937
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
814
938
  }
815
939
 
816
- .pf-v6-c-label.pf-m-yellow {
817
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
818
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
819
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
820
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
821
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
822
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
823
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
824
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
940
+ .pf-v6-c-menu-toggle.pf-m-full-height {
941
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
942
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
943
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
944
+ align-items: center;
945
+ height: 100%;
825
946
  }
826
947
 
827
- .pf-v6-c-label.pf-m-green {
828
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
829
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
830
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
831
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
832
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
833
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
834
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
835
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
948
+ .pf-v6-c-menu-toggle.pf-m-full-width {
949
+ width: 100%;
950
+ }
951
+
952
+ .pf-v6-c-menu-toggle.pf-m-plain {
953
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
954
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
955
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
956
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
957
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
958
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
959
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
960
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
961
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
962
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
963
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
964
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
965
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
966
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
967
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
968
+ }
969
+
970
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
971
+ border: none;
972
+ }
973
+
974
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
975
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
976
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
977
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
978
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
979
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
980
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
981
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
982
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
983
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
836
984
  }
837
985
 
838
- .pf-v6-c-label.pf-m-teal {
839
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
840
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
841
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
842
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
843
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
844
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
845
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
846
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
986
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
987
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
988
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
989
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
990
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
991
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
847
992
  }
848
993
 
849
- .pf-v6-c-label.pf-m-purple {
850
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
851
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
852
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
853
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
854
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
855
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
856
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
857
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
994
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
995
+ border: 0;
858
996
  }
859
997
 
860
- .pf-v6-c-label.pf-m-success {
861
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
862
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
863
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
864
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
865
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
866
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
867
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
868
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
869
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
870
- --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);
998
+ .pf-v6-c-menu-toggle.pf-m-small {
999
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1000
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1001
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1002
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1003
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1004
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1005
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1006
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
871
1007
  }
872
1008
 
873
- .pf-v6-c-label.pf-m-warning {
874
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
875
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
876
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
877
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
878
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
879
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
880
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
881
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
882
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
883
- --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);
1009
+ .pf-v6-c-menu-toggle.pf-m-success {
1010
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1011
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
884
1012
  }
885
1013
 
886
- .pf-v6-c-label.pf-m-danger {
887
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
888
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
889
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
890
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
891
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
892
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
893
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
894
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
895
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
896
- --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);
1014
+ .pf-v6-c-menu-toggle.pf-m-warning {
1015
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1016
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
897
1017
  }
898
1018
 
899
- .pf-v6-c-label.pf-m-info {
900
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
901
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
902
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
903
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
904
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
905
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
906
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
907
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
908
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
909
- --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);
1019
+ .pf-v6-c-menu-toggle.pf-m-danger {
1020
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1021
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
910
1022
  }
911
1023
 
912
- .pf-v6-c-label.pf-m-custom {
913
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
914
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
915
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
916
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
917
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
918
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
919
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
920
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
921
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
922
- --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);
1024
+ @media screen and (prefers-reduced-motion: no-preference) {
1025
+ .pf-v6-c-menu-toggle.pf-m-danger {
1026
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1027
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1028
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1029
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1030
+ animation-fill-mode: both;
1031
+ }
923
1032
  }
924
-
925
- .pf-v6-c-label.pf-m-compact {
926
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
927
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
928
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
929
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
930
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
931
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
932
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1033
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1034
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1035
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1036
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
933
1037
  }
934
1038
 
935
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
936
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1039
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1040
+ from {
1041
+ opacity: 0;
1042
+ }
1043
+ to {
1044
+ opacity: 1;
1045
+ }
1046
+ }
1047
+ .pf-v6-c-menu-toggle.pf-m-settings {
1048
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1049
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1050
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1051
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1052
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1053
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1054
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
937
1055
  }
938
1056
 
939
- .pf-v6-c-label.pf-m-outline {
940
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
941
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
942
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
943
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
944
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
945
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
946
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
947
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
948
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
949
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1057
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
1058
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
950
1059
  }
951
1060
 
952
- .pf-v6-c-label.pf-m-editable {
953
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
954
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1061
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1062
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1063
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1064
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1065
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1066
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
955
1067
  }
956
1068
 
957
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
958
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
959
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1069
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1070
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1071
+ pointer-events: none;
960
1072
  }
961
1073
 
962
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
963
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
964
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
965
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1074
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1075
+ syntax: "<length>";
1076
+ inherits: false;
1077
+ initial-value: 0;
1078
+ }
1079
+ @media (prefers-reduced-motion: no-preference) {
1080
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1081
+ 33% {
1082
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1083
+ }
1084
+ 66% {
1085
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1086
+ }
1087
+ }
1088
+ }
1089
+ .pf-v6-c-menu-toggle.pf-m-split-button {
1090
+ --pf-v6-c-menu-toggle--Gap: 0;
1091
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1092
+ padding: 0;
966
1093
  }
967
1094
 
968
- .pf-v6-c-label.pf-m-editable-active {
969
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
970
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
971
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
972
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1095
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
1096
+ position: relative;
1097
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1098
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1099
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1100
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
973
1101
  }
974
1102
 
975
- .pf-v6-c-label.pf-m-overflow {
976
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
977
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1103
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1104
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1105
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
978
1106
  }
979
1107
 
980
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
981
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
982
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1108
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1109
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1110
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
983
1111
  }
984
1112
 
985
- .pf-v6-c-label.pf-m-add {
986
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
987
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
988
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
989
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1113
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1114
+ --pf-v6-c-check__label--Color: currentcolor;
1115
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
1116
+ align-items: center;
1117
+ align-self: stretch;
990
1118
  }
991
1119
 
992
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
993
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
994
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
995
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
996
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1120
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1121
+ --pf-v6-c-check__input--TranslateY: 0;
1122
+ align-self: center;
997
1123
  }
998
1124
 
999
- .pf-v6-c-label.pf-m-clickable {
1000
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1125
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1126
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
1001
1127
  }
1002
1128
 
1003
- .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) {
1004
- text-decoration-line: none;
1129
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1130
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
1005
1131
  }
1006
1132
 
1007
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1008
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1009
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1010
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1011
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1012
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1013
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1014
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1133
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1134
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1135
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
1015
1136
  }
1016
1137
 
1017
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1018
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1138
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1139
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1140
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
1019
1141
  }
1020
1142
 
1021
- .pf-v6-c-label.pf-m-disabled {
1022
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1023
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1024
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1025
- --pf-v6-c-label--BorderWidth: 0;
1026
- pointer-events: none;
1143
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1144
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
1027
1145
  }
1028
1146
 
1029
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1030
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1147
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1148
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
1031
1149
  }
1032
1150
 
1033
- .pf-v6-c-label,
1034
- .pf-v6-c-label__content {
1035
- display: inline-flex;
1036
- align-items: center;
1037
- justify-content: center;
1151
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1152
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1153
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1154
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
1038
1155
  }
1039
1156
 
1040
- .pf-v6-c-label__text {
1041
- overflow: hidden;
1042
- text-overflow: ellipsis;
1043
- white-space: nowrap;
1044
- max-width: var(--pf-v6-c-label__text--MaxWidth);
1157
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1158
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1159
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1160
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
1045
1161
  }
1046
1162
 
1047
- .pf-v6-c-label__content {
1048
- gap: var(--pf-v6-c-label__content--Gap);
1049
- max-width: var(--pf-v6-c-label__content--MaxWidth);
1050
- padding: 0;
1051
- overflow: hidden;
1052
- color: var(--pf-v6-c-label--Color);
1053
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
1054
- background: transparent;
1055
- border-width: 0;
1163
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1164
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
1056
1165
  }
1057
1166
 
1058
- .pf-v6-c-label__content::before {
1059
- position: absolute;
1060
- inset: 0;
1061
- z-index: -1;
1062
- pointer-events: none;
1063
- content: "";
1064
- background-color: var(--pf-v6-c-label--BackgroundColor);
1065
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1066
- border-radius: var(--pf-v6-c-label--BorderRadius);
1167
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1168
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1169
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1170
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
1067
1171
  }
1068
1172
 
1069
- input.pf-v6-c-label__content {
1070
- overflow: hidden;
1071
- text-overflow: ellipsis;
1072
- white-space: nowrap;
1173
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1174
+ content: none;
1073
1175
  }
1074
1176
 
1075
- .pf-v6-c-label__icon {
1076
- color: var(--pf-v6-c-label__icon--Color);
1177
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
1178
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1179
+ --pf-v6-c-menu-toggle--Gap: 0;
1180
+ align-items: stretch;
1181
+ padding: 0;
1077
1182
  }
1078
1183
 
1079
- .pf-v6-c-label__actions {
1080
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1184
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1185
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1081
1186
  }
1082
1187
 
1083
- .pf-v6-c-label__actions .pf-v6-c-button {
1084
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1085
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1086
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1087
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1088
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1089
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1090
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1091
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1188
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1189
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1190
+ display: flex;
1191
+ align-items: stretch;
1092
1192
  }
1093
1193
 
1094
- .pf-v6-c-check {
1095
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1096
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1097
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1098
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1099
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1100
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1101
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1102
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1103
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1104
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1105
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1106
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1107
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1108
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1194
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1195
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1196
+ flex: 1;
1109
1197
  }
1110
1198
 
1111
- .pf-v6-c-check {
1112
- display: grid;
1113
- grid-template-columns: auto 1fr;
1114
- grid-gap: var(--pf-v6-c-check--GridGap);
1115
- accent-color: var(--pf-v6-c-check--AccentColor);
1199
+ .pf-v6-c-menu-toggle__button {
1200
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
1201
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1202
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1203
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1204
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1205
+ color: inherit;
1206
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1207
+ border: 0;
1116
1208
  }
1117
1209
 
1118
- .pf-v6-c-check.pf-m-standalone {
1119
- display: inline-grid;
1120
- grid-template-columns: auto;
1121
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1210
+ .pf-v6-c-menu-toggle__button.pf-m-text {
1211
+ display: inline-flex;
1212
+ align-items: baseline;
1122
1213
  }
1123
1214
 
1124
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1125
- align-self: center;
1126
- transform: none;
1215
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1216
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1217
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1127
1218
  }
1128
1219
 
1129
- .pf-v6-c-check__input {
1130
- align-self: start;
1131
- font-size: var(--pf-v6-c-check__label--FontSize);
1132
- line-height: var(--pf-v6-c-check__label--LineHeight);
1133
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1220
+ .pf-v6-c-menu-toggle__text {
1221
+ overflow: hidden;
1222
+ text-overflow: ellipsis;
1223
+ white-space: nowrap;
1224
+ min-width: 0;
1134
1225
  }
1135
1226
 
1136
- .pf-v6-c-check__label {
1137
- font-size: var(--pf-v6-c-check__label--FontSize);
1138
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1139
- line-height: var(--pf-v6-c-check__label--LineHeight);
1140
- color: var(--pf-v6-c-check__label--Color);
1227
+ .pf-v6-c-menu-toggle__count {
1228
+ display: flex;
1229
+ flex-wrap: nowrap;
1141
1230
  }
1142
1231
 
1143
- .pf-v6-c-check__description {
1144
- grid-column: 2;
1145
- font-size: var(--pf-v6-c-check__description--FontSize);
1146
- color: var(--pf-v6-c-check__description--Color);
1232
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1233
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1234
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
1235
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1236
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1147
1237
  }
1148
1238
 
1149
- .pf-v6-c-check__body {
1150
- grid-column: 2;
1239
+ .pf-v6-c-menu-toggle__icon {
1240
+ flex-shrink: 0;
1241
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1242
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1243
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1244
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1151
1245
  }
1152
1246
 
1153
- .pf-v6-c-check__label,
1154
- .pf-v6-c-check__input {
1155
- justify-self: start;
1247
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
1248
+ vertical-align: middle;
1156
1249
  }
1157
1250
 
1158
- label.pf-v6-c-check, .pf-v6-c-check__label,
1159
- .pf-v6-c-check__input {
1160
- cursor: pointer;
1251
+ .pf-v6-c-menu-toggle__controls {
1252
+ display: flex;
1253
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1254
+ align-items: center;
1255
+ justify-content: center;
1256
+ margin-inline-start: auto;
1161
1257
  }
1162
1258
 
1163
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
1164
- .pf-v6-c-check__input:disabled,
1165
- .pf-v6-c-check__input.pf-m-disabled {
1166
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
1167
- cursor: not-allowed;
1259
+ .pf-v6-c-menu-toggle__toggle-icon {
1260
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1261
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1168
1262
  }
1169
1263
 
1170
- .pf-v6-c-check__label-required {
1171
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1172
- font-size: var(--pf-v6-c-check__label-required--FontSize);
1173
- color: var(--pf-v6-c-check__label-required--Color);
1264
+ .pf-v6-c-menu-toggle__status-icon {
1265
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1174
1266
  }
1175
1267
 
1176
1268
  .pf-v6-c-label-group {
@@ -1312,410 +1404,554 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1312
1404
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1313
1405
  }
1314
1406
 
1315
- .pf-v6-c-label-group__textarea {
1316
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1317
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1318
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1319
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1320
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1407
+ .pf-v6-c-label-group__textarea {
1408
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1409
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1410
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1411
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1412
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1413
+ white-space: nowrap;
1414
+ resize: none;
1415
+ border: 0;
1416
+ -ms-overflow-style: none;
1417
+ scrollbar-width: none;
1418
+ }
1419
+
1420
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1421
+ display: none;
1422
+ }
1423
+
1424
+ .pf-v6-c-label {
1425
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1426
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1427
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1428
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1429
+ --pf-v6-c-label--MaxWidth: 100%;
1430
+ --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)));
1431
+ --pf-v6-c-label--BorderWidth: 0;
1432
+ --pf-v6-c-label--BorderColor: transparent;
1433
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1434
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1435
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1436
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1437
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1438
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1439
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1440
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1441
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1442
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1443
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1444
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1445
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1446
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1447
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1448
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1449
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1450
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1451
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1452
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1453
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1454
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1455
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1456
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1457
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1458
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1459
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1460
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1461
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1462
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1463
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1464
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1465
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1466
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1467
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1468
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1469
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1470
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1471
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1472
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1473
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1474
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1475
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1476
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1477
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1478
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1479
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1480
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1481
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1482
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1483
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1484
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1485
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1486
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1487
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1488
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1489
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1490
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1491
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1492
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1493
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1494
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1495
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1496
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1497
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1498
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1499
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1500
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1501
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1502
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1503
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1504
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1505
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1506
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1507
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1508
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1509
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1510
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1511
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1512
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1513
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1514
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1515
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1516
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1517
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1518
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1519
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1520
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1521
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1522
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1523
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1524
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1525
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1526
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1527
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1528
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1529
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1530
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1531
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1532
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
1533
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
1534
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1535
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1536
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
1537
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
1538
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
1539
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
1540
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
1541
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
1542
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
1543
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
1544
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
1545
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
1546
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
1547
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
1548
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
1549
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
1550
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
1551
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
1552
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
1553
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
1554
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1555
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1556
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1557
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
1558
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
1559
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1560
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1561
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
1562
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
1563
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
1564
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
1565
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
1566
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1567
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
1568
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1569
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1570
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1571
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1572
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1573
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1574
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
1575
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
1576
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
1577
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
1578
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
1579
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
1580
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1581
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
1582
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1583
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
1584
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1585
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
1586
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
1587
+ --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)));
1588
+ --pf-v6-c-label__content--MaxWidth: 100%;
1589
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1590
+ --pf-v6-c-label__content--Cursor: initial;
1591
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1592
+ --pf-v6-c-label__text--MaxWidth: 100%;
1593
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
1594
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1595
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1596
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
1597
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
1598
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1599
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1600
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1601
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1602
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1603
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1604
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
1605
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
1606
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
1607
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
1608
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
1609
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
1610
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
1611
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
1612
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
1613
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1614
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1615
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1616
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1617
+ }
1618
+
1619
+ .pf-v6-c-label {
1620
+ position: relative;
1621
+ min-width: var(--pf-v6-c-label--MinWidth);
1622
+ max-width: var(--pf-v6-c-label--MaxWidth);
1623
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
1624
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
1625
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
1626
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
1627
+ font-size: var(--pf-v6-c-label--FontSize);
1321
1628
  white-space: nowrap;
1322
- resize: none;
1323
- border: 0;
1324
- -ms-overflow-style: none;
1325
- scrollbar-width: none;
1326
- }
1327
-
1328
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1329
- display: none;
1330
- }
1331
-
1332
- .pf-v6-c-divider {
1333
- --pf-v6-c-divider--Display: flex;
1334
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1335
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1336
- --pf-v6-c-divider--before--FlexBasis: 100%;
1337
- }
1338
-
1339
- .pf-v6-c-divider {
1340
- flex-direction: row;
1341
- width: 100%;
1342
- height: var(--pf-v6-c-divider--Size);
1343
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1344
- --pf-v6-hidden-visible--hidden--Display: none;
1345
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1346
- display: var(--pf-v6-hidden-visible--Display);
1347
- flex-shrink: 0;
1348
- align-items: stretch;
1349
- align-self: stretch;
1350
- justify-content: center;
1629
+ background: transparent;
1630
+ isolation: isolate;
1351
1631
  border: 0;
1632
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1352
1633
  }
1353
1634
 
1354
- .pf-v6-c-divider.pf-m-hidden {
1355
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1635
+ .pf-v6-c-label.pf-m-blue {
1636
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
1637
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
1638
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
1639
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
1640
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
1641
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
1642
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
1643
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
1356
1644
  }
1357
1645
 
1358
- @media screen and (min-width: 36rem) {
1359
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1360
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1361
- }
1362
- .pf-v6-c-divider.pf-m-visible-on-sm {
1363
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1364
- }
1365
- }
1366
- @media screen and (min-width: 48rem) {
1367
- .pf-v6-c-divider.pf-m-hidden-on-md {
1368
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1369
- }
1370
- .pf-v6-c-divider.pf-m-visible-on-md {
1371
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1372
- }
1373
- }
1374
- @media screen and (min-width: 62rem) {
1375
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1376
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1377
- }
1378
- .pf-v6-c-divider.pf-m-visible-on-lg {
1379
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1380
- }
1381
- }
1382
- @media screen and (min-width: 75rem) {
1383
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1384
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1385
- }
1386
- .pf-v6-c-divider.pf-m-visible-on-xl {
1387
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1388
- }
1389
- }
1390
- @media screen and (min-width: 90.625rem) {
1391
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1392
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1393
- }
1394
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1395
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1396
- }
1646
+ .pf-v6-c-label.pf-m-red {
1647
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
1648
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
1649
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
1650
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
1651
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
1652
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
1653
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
1654
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
1397
1655
  }
1398
- .pf-v6-c-divider::before {
1399
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1400
- content: "";
1401
- background-color: var(--pf-v6-c-divider--Color);
1656
+
1657
+ .pf-v6-c-label.pf-m-orange {
1658
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
1659
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
1660
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
1661
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
1662
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
1663
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
1664
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
1665
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
1402
1666
  }
1403
1667
 
1404
- .pf-v6-c-divider.pf-m-horizontal {
1405
- flex-direction: row;
1406
- width: 100%;
1407
- height: var(--pf-v6-c-divider--Size);
1668
+ .pf-v6-c-label.pf-m-orangered {
1669
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
1670
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
1671
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
1672
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
1673
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
1674
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
1675
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
1676
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
1408
1677
  }
1409
1678
 
1410
- .pf-v6-c-divider.pf-m-vertical {
1411
- flex-direction: column;
1412
- width: var(--pf-v6-c-divider--Size);
1413
- height: inherit;
1679
+ .pf-v6-c-label.pf-m-yellow {
1680
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
1681
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
1682
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
1683
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
1684
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
1685
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
1686
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
1687
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
1414
1688
  }
1415
1689
 
1416
- .pf-v6-c-divider.pf-m-inset-none {
1417
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1690
+ .pf-v6-c-label.pf-m-green {
1691
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
1692
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
1693
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
1694
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
1695
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
1696
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
1697
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
1698
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
1418
1699
  }
1419
1700
 
1420
- .pf-v6-c-divider.pf-m-inset-xs {
1421
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1701
+ .pf-v6-c-label.pf-m-teal {
1702
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
1703
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
1704
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
1705
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
1706
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
1707
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
1708
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
1709
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
1422
1710
  }
1423
1711
 
1424
- .pf-v6-c-divider.pf-m-inset-sm {
1425
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1712
+ .pf-v6-c-label.pf-m-purple {
1713
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
1714
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
1715
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
1716
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
1717
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
1718
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
1719
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
1720
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
1426
1721
  }
1427
1722
 
1428
- .pf-v6-c-divider.pf-m-inset-md {
1429
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1723
+ .pf-v6-c-label.pf-m-success {
1724
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
1725
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
1726
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
1727
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
1728
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
1729
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
1730
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
1731
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
1732
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
1733
+ --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);
1430
1734
  }
1431
1735
 
1432
- .pf-v6-c-divider.pf-m-inset-lg {
1433
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1736
+ .pf-v6-c-label.pf-m-warning {
1737
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
1738
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
1739
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
1740
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
1741
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
1742
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
1743
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
1744
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
1745
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
1746
+ --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);
1434
1747
  }
1435
1748
 
1436
- .pf-v6-c-divider.pf-m-inset-xl {
1437
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1749
+ .pf-v6-c-label.pf-m-danger {
1750
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
1751
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
1752
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
1753
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
1754
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
1755
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
1756
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
1757
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
1758
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
1759
+ --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);
1438
1760
  }
1439
1761
 
1440
- .pf-v6-c-divider.pf-m-inset-2xl {
1441
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1762
+ .pf-v6-c-label.pf-m-info {
1763
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
1764
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
1765
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
1766
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
1767
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
1768
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
1769
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
1770
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
1771
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
1772
+ --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);
1442
1773
  }
1443
1774
 
1444
- .pf-v6-c-divider.pf-m-inset-3xl {
1445
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1775
+ .pf-v6-c-label.pf-m-custom {
1776
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
1777
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
1778
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
1779
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
1780
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
1781
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
1782
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
1783
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
1784
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
1785
+ --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);
1446
1786
  }
1447
1787
 
1448
- @media (min-width: 36rem) {
1449
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1450
- flex-direction: row;
1451
- width: 100%;
1452
- height: var(--pf-v6-c-divider--Size);
1453
- }
1788
+ .pf-v6-c-label.pf-m-compact {
1789
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
1790
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
1791
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
1792
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
1793
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
1794
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
1795
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
1454
1796
  }
1455
- @media (min-width: 36rem) {
1456
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1457
- flex-direction: column;
1458
- width: var(--pf-v6-c-divider--Size);
1459
- height: inherit;
1460
- }
1797
+
1798
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
1799
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
1461
1800
  }
1462
- @media (min-width: 36rem) {
1463
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1464
- --pf-v6-c-divider--before--FlexBasis: 100%;
1465
- }
1466
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1467
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1468
- }
1469
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1470
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1471
- }
1472
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1473
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1474
- }
1475
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1476
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1477
- }
1478
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1479
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1480
- }
1481
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1482
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1483
- }
1484
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1485
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1486
- }
1801
+
1802
+ .pf-v6-c-label.pf-m-outline {
1803
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
1804
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
1805
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
1806
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
1807
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
1808
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
1809
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1810
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1811
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
1812
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
1487
1813
  }
1488
- @media (min-width: 48rem) {
1489
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1490
- flex-direction: row;
1491
- width: 100%;
1492
- height: var(--pf-v6-c-divider--Size);
1493
- }
1814
+
1815
+ .pf-v6-c-label.pf-m-editable {
1816
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
1817
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
1494
1818
  }
1495
- @media (min-width: 48rem) {
1496
- .pf-v6-c-divider.pf-m-vertical-on-md {
1497
- flex-direction: column;
1498
- width: var(--pf-v6-c-divider--Size);
1499
- height: inherit;
1500
- }
1819
+
1820
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
1821
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
1822
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
1501
1823
  }
1502
- @media (min-width: 48rem) {
1503
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1504
- --pf-v6-c-divider--before--FlexBasis: 100%;
1505
- }
1506
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1507
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1508
- }
1509
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1510
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1511
- }
1512
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1513
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1514
- }
1515
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1516
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1517
- }
1518
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1519
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1520
- }
1521
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1522
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1523
- }
1524
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1525
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1526
- }
1824
+
1825
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
1826
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
1827
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
1828
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
1829
+ }
1830
+
1831
+ .pf-v6-c-label.pf-m-editable-active {
1832
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
1833
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
1834
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
1835
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
1527
1836
  }
1528
- @media (min-width: 62rem) {
1529
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1530
- flex-direction: row;
1531
- width: 100%;
1532
- height: var(--pf-v6-c-divider--Size);
1533
- }
1837
+
1838
+ .pf-v6-c-label.pf-m-overflow {
1839
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1840
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1534
1841
  }
1535
- @media (min-width: 62rem) {
1536
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1537
- flex-direction: column;
1538
- width: var(--pf-v6-c-divider--Size);
1539
- height: inherit;
1540
- }
1842
+
1843
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1844
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1845
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1541
1846
  }
1542
- @media (min-width: 62rem) {
1543
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1544
- --pf-v6-c-divider--before--FlexBasis: 100%;
1545
- }
1546
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1547
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1548
- }
1549
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1550
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1551
- }
1552
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1553
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1554
- }
1555
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1556
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1557
- }
1558
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1559
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1560
- }
1561
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1562
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1563
- }
1564
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1565
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1566
- }
1847
+
1848
+ .pf-v6-c-label.pf-m-add {
1849
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
1850
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
1851
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
1852
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
1567
1853
  }
1568
- @media (min-width: 75rem) {
1569
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1570
- flex-direction: row;
1571
- width: 100%;
1572
- height: var(--pf-v6-c-divider--Size);
1573
- }
1854
+
1855
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
1856
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
1857
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
1858
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
1859
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
1574
1860
  }
1575
- @media (min-width: 75rem) {
1576
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1577
- flex-direction: column;
1578
- width: var(--pf-v6-c-divider--Size);
1579
- height: inherit;
1580
- }
1861
+
1862
+ .pf-v6-c-label.pf-m-clickable {
1863
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
1581
1864
  }
1582
- @media (min-width: 75rem) {
1583
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1584
- --pf-v6-c-divider--before--FlexBasis: 100%;
1585
- }
1586
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1587
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1588
- }
1589
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1590
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1591
- }
1592
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1593
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1594
- }
1595
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1596
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1597
- }
1598
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1599
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1600
- }
1601
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1602
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1603
- }
1604
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1605
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1606
- }
1865
+
1866
+ .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) {
1867
+ text-decoration-line: none;
1607
1868
  }
1608
- @media (min-width: 90.625rem) {
1609
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1610
- flex-direction: row;
1611
- width: 100%;
1612
- height: var(--pf-v6-c-divider--Size);
1613
- }
1869
+
1870
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
1871
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
1872
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1873
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
1874
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
1875
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
1876
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
1877
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
1614
1878
  }
1615
- @media (min-width: 90.625rem) {
1616
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1617
- flex-direction: column;
1618
- width: var(--pf-v6-c-divider--Size);
1619
- height: inherit;
1620
- }
1879
+
1880
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
1881
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
1621
1882
  }
1622
- @media (min-width: 90.625rem) {
1623
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1624
- --pf-v6-c-divider--before--FlexBasis: 100%;
1625
- }
1626
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1627
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1628
- }
1629
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1630
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1631
- }
1632
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1633
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1634
- }
1635
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1636
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1637
- }
1638
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1639
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1640
- }
1641
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1642
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1643
- }
1644
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1645
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1646
- }
1883
+
1884
+ .pf-v6-c-label.pf-m-disabled {
1885
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
1886
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
1887
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
1888
+ --pf-v6-c-label--BorderWidth: 0;
1889
+ pointer-events: none;
1647
1890
  }
1648
- .pf-v6-c-badge {
1649
- --pf-v6-c-badge--BorderColor: transparent;
1650
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1651
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1652
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1653
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1654
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1655
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1656
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1657
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1658
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1659
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1660
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1661
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1662
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1663
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1664
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1665
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1666
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1667
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1668
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1891
+
1892
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
1893
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
1669
1894
  }
1670
1895
 
1671
- .pf-v6-c-badge {
1672
- position: relative;
1673
- display: inline-block;
1674
- min-width: var(--pf-v6-c-badge--MinWidth);
1675
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1676
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1677
- font-size: var(--pf-v6-c-badge--FontSize);
1678
- font-weight: var(--pf-v6-c-badge--FontWeight);
1679
- color: var(--pf-v6-c-badge--Color);
1680
- text-align: center;
1896
+ .pf-v6-c-label,
1897
+ .pf-v6-c-label__content {
1898
+ display: inline-flex;
1899
+ align-items: center;
1900
+ justify-content: center;
1901
+ }
1902
+
1903
+ .pf-v6-c-label__text {
1904
+ overflow: hidden;
1905
+ text-overflow: ellipsis;
1681
1906
  white-space: nowrap;
1682
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1683
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1907
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
1684
1908
  }
1685
1909
 
1686
- .pf-v6-c-badge::after {
1910
+ .pf-v6-c-label__content {
1911
+ gap: var(--pf-v6-c-label__content--Gap);
1912
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
1913
+ padding: 0;
1914
+ overflow: hidden;
1915
+ color: var(--pf-v6-c-label--Color);
1916
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
1917
+ background: transparent;
1918
+ border-width: 0;
1919
+ }
1920
+
1921
+ .pf-v6-c-label__content::before {
1687
1922
  position: absolute;
1688
1923
  inset: 0;
1924
+ z-index: -1;
1689
1925
  pointer-events: none;
1690
1926
  content: "";
1691
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1692
- border-radius: inherit;
1693
- }
1694
-
1695
- .pf-v6-c-badge.pf-m-read {
1696
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1697
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1698
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1927
+ background-color: var(--pf-v6-c-label--BackgroundColor);
1928
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
1929
+ border-radius: var(--pf-v6-c-label--BorderRadius);
1699
1930
  }
1700
1931
 
1701
- .pf-v6-c-badge.pf-m-unread {
1702
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1703
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1704
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1932
+ input.pf-v6-c-label__content {
1933
+ overflow: hidden;
1934
+ text-overflow: ellipsis;
1935
+ white-space: nowrap;
1705
1936
  }
1706
1937
 
1707
- .pf-v6-c-badge.pf-m-disabled {
1708
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1709
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1938
+ .pf-v6-c-label__icon {
1939
+ color: var(--pf-v6-c-label__icon--Color);
1710
1940
  }
1711
1941
 
1712
- .pf-v6-c-badge.pf-m-disabled::after {
1713
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1942
+ .pf-v6-c-label__actions {
1943
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
1714
1944
  }
1715
1945
 
1716
- .pf-v6-c-badge__toggle-icon {
1717
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1718
- color: var(--pf-v6-c-badge__toggle-icon--Color);
1946
+ .pf-v6-c-label__actions .pf-v6-c-button {
1947
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
1948
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
1949
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
1950
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
1951
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
1952
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
1953
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
1954
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1719
1955
  }
1720
1956
 
1721
1957
  .pf-v6-c-button {
@@ -2558,267 +2794,31 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2558
2794
  d: var(--pf-v6-c-button--hamburger-icon--top--path);
2559
2795
  }
2560
2796
 
2561
- .pf-v6-c-button--hamburger-icon--middle {
2562
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2563
- }
2564
-
2565
- .pf-v6-c-button--hamburger-icon--arrow {
2566
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2567
- }
2568
-
2569
- .pf-v6-c-button--hamburger-icon--bottom {
2570
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2571
- }
2572
-
2573
- @keyframes pf-v6-c-button-icon-notify {
2574
- 33% {
2575
- transform: rotate(30deg);
2576
- }
2577
- 66% {
2578
- transform: rotate(-60deg);
2579
- }
2580
- }
2581
- @keyframes pf-v6-c-button-icon-favorited {
2582
- 50% {
2583
- scale: 1.5;
2584
- }
2585
- }
2586
- .pf-v6-c-text-input-group {
2587
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
2588
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
2589
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2590
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2591
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2592
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
2593
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
2594
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
2595
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
2596
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
2597
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
2598
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2599
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2600
- --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));
2601
- --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));
2602
- --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));
2603
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
2604
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
2605
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
2606
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2607
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2608
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2609
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
2610
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2611
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
2612
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
2613
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2614
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2615
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2616
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2617
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
2618
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
2619
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
2620
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
2621
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
2622
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
2623
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2624
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2625
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
2626
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
2627
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2628
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
2629
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
2630
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
2631
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
2632
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
2633
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
2634
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
2635
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2636
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2637
- }
2638
-
2639
- .pf-v6-c-text-input-group {
2640
- position: relative;
2641
- display: flex;
2642
- width: 100%;
2643
- font-size: var(--pf-v6-c-text-input-group__FontSize);
2644
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
2645
- color: var(--pf-v6-c-text-input-group--Color, inherit);
2646
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
2647
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2648
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2649
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2650
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2651
- }
2652
-
2653
- .pf-v6-c-text-input-group::before {
2654
- position: absolute;
2655
- inset: 0;
2656
- pointer-events: none;
2657
- content: "";
2658
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
2659
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
2660
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
2661
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
2662
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
2663
- }
2664
-
2665
- .pf-v6-c-text-input-group.pf-m-disabled {
2666
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
2667
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
2668
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
2669
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
2670
- pointer-events: none;
2671
- }
2672
-
2673
- .pf-v6-c-text-input-group.pf-m-plain {
2674
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
2675
- }
2676
-
2677
- .pf-v6-c-text-input-group.pf-m-plain::before {
2678
- border: 0;
2679
- }
2680
-
2681
- .pf-v6-c-text-input-group.pf-m-success {
2682
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
2683
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
2684
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
2685
- }
2686
-
2687
- .pf-v6-c-text-input-group.pf-m-warning {
2688
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
2689
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
2690
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
2691
- }
2692
-
2693
- .pf-v6-c-text-input-group.pf-m-error {
2694
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
2695
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
2696
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
2697
- }
2698
-
2699
- @media (prefers-reduced-motion: no-preference) {
2700
- .pf-v6-c-text-input-group.pf-m-error {
2701
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
2702
- animation-name: pf-v6-global-danger-jiggle-motion;
2703
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
2704
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
2705
- animation-fill-mode: both;
2706
- }
2707
- }
2708
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
2709
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
2710
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2711
- animation-name: pf-v6-global-fade-in;
2712
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
2713
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
2714
- }
2715
-
2716
- .pf-v6-c-text-input-group:hover {
2717
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
2718
- }
2719
-
2720
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
2721
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
2722
- }
2723
-
2724
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
2725
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
2726
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
2727
- }
2728
-
2729
- .pf-v6-c-text-input-group__main {
2730
- display: flex;
2731
- flex: 1;
2732
- flex-wrap: wrap;
2733
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
2734
- min-width: 0;
2735
- }
2736
-
2737
- .pf-v6-c-text-input-group__main.pf-m-icon {
2738
- --pf-v6-c-text-input-group__text--Position: relative;
2739
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
2740
- display: inline-flex;
2741
- align-items: center;
2742
- justify-content: center;
2743
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
2744
- }
2745
-
2746
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
2747
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
2748
- }
2749
-
2750
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
2751
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
2752
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
2753
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
2754
- }
2755
-
2756
- .pf-v6-c-text-input-group__text {
2757
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
2758
- display: inline-grid;
2759
- flex: 1;
2760
- grid-template-areas: "text-input";
2761
- grid-template-columns: 1fr;
2762
- }
2763
-
2764
- .pf-v6-c-text-input-group__icon {
2765
- position: absolute;
2766
- inset-block-start: 50%;
2767
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
2768
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
2769
- color: var(--pf-v6-c-text-input-group__icon--Color);
2770
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
2771
- }
2772
-
2773
- .pf-v6-c-text-input-group__icon.pf-m-status {
2774
- inset-inline-start: auto;
2775
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
2776
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
2777
- }
2778
-
2779
- .pf-v6-c-text-input-group__text-input {
2780
- overflow: hidden;
2781
- text-overflow: ellipsis;
2782
- white-space: nowrap;
2783
- position: relative;
2784
- width: 100%;
2785
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
2786
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
2787
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
2788
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
2789
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
2790
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
2791
- border: 0;
2792
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
2793
- }
2794
-
2795
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
2796
- grid-area: text-input;
2797
- }
2798
-
2799
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
2800
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
2801
- }
2802
-
2803
- .pf-v6-c-text-input-group__text-input::placeholder {
2804
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
2805
- }
2806
-
2807
- .pf-v6-c-text-input-group__utilities {
2808
- display: flex;
2809
- align-items: center;
2810
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
2811
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
2812
- }
2813
-
2814
- .pf-v6-c-text-input-group__utilities > * + * {
2815
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
2797
+ .pf-v6-c-button--hamburger-icon--middle {
2798
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2816
2799
  }
2817
2800
 
2818
- .pf-v6-c-text-input-group__group {
2819
- display: flex;
2801
+ .pf-v6-c-button--hamburger-icon--arrow {
2802
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2820
2803
  }
2821
2804
 
2805
+ .pf-v6-c-button--hamburger-icon--bottom {
2806
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2807
+ }
2808
+
2809
+ @keyframes pf-v6-c-button-icon-notify {
2810
+ 33% {
2811
+ transform: rotate(30deg);
2812
+ }
2813
+ 66% {
2814
+ transform: rotate(-60deg);
2815
+ }
2816
+ }
2817
+ @keyframes pf-v6-c-button-icon-favorited {
2818
+ 50% {
2819
+ scale: 1.5;
2820
+ }
2821
+ }
2822
2822
  .pf-v6-c-menu {
2823
2823
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2824
2824
  --pf-v6-c-menu--Width: auto;
@@ -3485,6 +3485,122 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3485
3485
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3486
3486
  }
3487
3487
 
3488
+ .pf-v6-c-breadcrumb {
3489
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3490
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3491
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3492
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3493
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3494
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3495
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3496
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3497
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3498
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3499
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3500
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3501
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3502
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3503
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3504
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3505
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3506
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3507
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3508
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3509
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3510
+ }
3511
+
3512
+ .pf-v6-c-breadcrumb {
3513
+ display: inline-flex;
3514
+ }
3515
+
3516
+ .pf-v6-c-breadcrumb__list {
3517
+ display: flex;
3518
+ flex-wrap: wrap;
3519
+ align-items: center;
3520
+ }
3521
+
3522
+ .pf-v6-c-breadcrumb__item {
3523
+ display: flex;
3524
+ align-items: baseline;
3525
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3526
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3527
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3528
+ white-space: nowrap;
3529
+ list-style: none;
3530
+ }
3531
+
3532
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3533
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3534
+ }
3535
+
3536
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3537
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3538
+ }
3539
+
3540
+ .pf-v6-c-breadcrumb__item-divider {
3541
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3542
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3543
+ line-height: 1;
3544
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3545
+ }
3546
+
3547
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3548
+ scale: -1 1;
3549
+ }
3550
+
3551
+ .pf-v6-c-breadcrumb__link {
3552
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3553
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3554
+ font-size: inherit;
3555
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3556
+ line-height: inherit;
3557
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3558
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3559
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3560
+ word-break: break-word;
3561
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3562
+ }
3563
+
3564
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3565
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3566
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3567
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3568
+ }
3569
+
3570
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3571
+ cursor: default;
3572
+ }
3573
+
3574
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3575
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3576
+ text-decoration-line: none;
3577
+ }
3578
+
3579
+ button.pf-v6-c-breadcrumb__link {
3580
+ border: none;
3581
+ }
3582
+
3583
+ .pf-v6-c-breadcrumb__dropdown {
3584
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3585
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3586
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3587
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3588
+ }
3589
+
3590
+ .pf-v6-c-breadcrumb__heading {
3591
+ display: inline;
3592
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3593
+ }
3594
+
3595
+ .pf-v6-c-breadcrumb__link,
3596
+ .pf-v6-c-breadcrumb__heading {
3597
+ white-space: normal;
3598
+ }
3599
+
3600
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3601
+ display: none;
3602
+ }
3603
+
3488
3604
  .pf-v6-c-tooltip {
3489
3605
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3490
3606
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3702,119 +3818,4 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3702
3818
  stroke-dashoffset: 280;
3703
3819
  transform: rotate(720deg);
3704
3820
  }
3705
- }
3706
- .pf-v6-c-breadcrumb {
3707
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3708
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3709
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3710
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3711
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3712
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3713
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3714
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3715
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3716
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3717
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3718
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3719
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3720
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3721
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3722
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3723
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3724
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3725
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3726
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3727
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3728
- }
3729
-
3730
- .pf-v6-c-breadcrumb {
3731
- display: inline-flex;
3732
- }
3733
-
3734
- .pf-v6-c-breadcrumb__list {
3735
- display: flex;
3736
- flex-wrap: wrap;
3737
- align-items: center;
3738
- }
3739
-
3740
- .pf-v6-c-breadcrumb__item {
3741
- display: flex;
3742
- align-items: baseline;
3743
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3744
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3745
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3746
- white-space: nowrap;
3747
- list-style: none;
3748
- }
3749
-
3750
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3751
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3752
- }
3753
-
3754
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3755
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3756
- }
3757
-
3758
- .pf-v6-c-breadcrumb__item-divider {
3759
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3760
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3761
- line-height: 1;
3762
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3763
- }
3764
-
3765
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3766
- scale: -1 1;
3767
- }
3768
-
3769
- .pf-v6-c-breadcrumb__link {
3770
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3771
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3772
- font-size: inherit;
3773
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3774
- line-height: inherit;
3775
- color: var(--pf-v6-c-breadcrumb__link--Color);
3776
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3777
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3778
- word-break: break-word;
3779
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3780
- }
3781
-
3782
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3783
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3784
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3785
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3786
- }
3787
-
3788
- .pf-v6-c-breadcrumb__link.pf-m-current {
3789
- cursor: default;
3790
- }
3791
-
3792
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3793
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3794
- text-decoration-line: none;
3795
- }
3796
-
3797
- button.pf-v6-c-breadcrumb__link {
3798
- border: none;
3799
- }
3800
-
3801
- .pf-v6-c-breadcrumb__dropdown {
3802
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3803
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3804
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3805
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3806
- }
3807
-
3808
- .pf-v6-c-breadcrumb__heading {
3809
- display: inline;
3810
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3811
- }
3812
-
3813
- .pf-v6-c-breadcrumb__link,
3814
- .pf-v6-c-breadcrumb__heading {
3815
- white-space: normal;
3816
- }
3817
-
3818
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3819
- display: none;
3820
3821
  }