@patternfly/react-templates 6.6.0 → 6.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,929 +3,1086 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-divider {
7
- --pf-v6-c-divider--Display: flex;
8
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
9
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
10
- --pf-v6-c-divider--before--FlexBasis: 100%;
11
- }
12
-
13
- .pf-v6-c-divider {
14
- flex-direction: row;
15
- width: 100%;
16
- height: var(--pf-v6-c-divider--Size);
17
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
18
- --pf-v6-hidden-visible--hidden--Display: none;
19
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
20
- display: var(--pf-v6-hidden-visible--Display);
21
- }
22
-
23
- .pf-v6-c-divider.pf-m-hidden {
24
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
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(1lh + 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--control--default);
18
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
19
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--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--control--hover);
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--control--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--action--default);
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--action--default);
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-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
89
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
90
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
91
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
92
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
93
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
94
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
95
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
96
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
97
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
98
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
99
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
100
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
101
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
102
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
103
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
104
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
105
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
106
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
107
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
108
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
109
+ --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));
110
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
111
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
112
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
113
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
114
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
115
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
116
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
117
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
118
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
119
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
120
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
121
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
122
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
123
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
124
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
125
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
126
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
127
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
128
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
129
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
130
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
131
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
132
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
133
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
134
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
135
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
136
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
137
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
138
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
139
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
140
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
141
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
142
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
143
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
144
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
145
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
146
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
147
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
148
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
149
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
150
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
151
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
152
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
153
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
154
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
155
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
25
156
  }
26
157
 
27
- @media screen and (min-width: 36rem) {
28
- .pf-v6-c-divider.pf-m-hidden-on-sm {
29
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
30
- }
31
- .pf-v6-c-divider.pf-m-visible-on-sm {
32
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
33
- }
34
- }
35
- @media screen and (min-width: 48rem) {
36
- .pf-v6-c-divider.pf-m-hidden-on-md {
37
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
38
- }
39
- .pf-v6-c-divider.pf-m-visible-on-md {
40
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
41
- }
42
- }
43
- @media screen and (min-width: 62rem) {
44
- .pf-v6-c-divider.pf-m-hidden-on-lg {
45
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
46
- }
47
- .pf-v6-c-divider.pf-m-visible-on-lg {
48
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
49
- }
50
- }
51
- @media screen and (min-width: 75rem) {
52
- .pf-v6-c-divider.pf-m-hidden-on-xl {
53
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
54
- }
55
- .pf-v6-c-divider.pf-m-visible-on-xl {
56
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
57
- }
58
- }
59
- @media screen and (min-width: 90.625rem) {
60
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
61
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
62
- }
63
- .pf-v6-c-divider.pf-m-visible-on-2xl {
64
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
65
- }
66
- }
67
- .pf-v6-c-divider {
68
- flex-shrink: 0;
69
- align-items: stretch;
70
- align-self: stretch;
158
+ .pf-v6-c-menu-toggle {
159
+ position: relative;
160
+ display: inline-flex;
161
+ gap: var(--pf-v6-c-menu-toggle--Gap);
162
+ align-items: center;
71
163
  justify-content: center;
164
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert);
165
+ max-width: 100%;
166
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
167
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
168
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
169
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
170
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
171
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
172
+ color: var(--pf-v6-c-menu-toggle--Color);
173
+ cursor: pointer;
174
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
72
175
  border: 0;
176
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
177
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
178
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
73
179
  }
74
180
 
75
- .pf-v6-c-divider::before {
76
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
77
- content: "";
78
- background-color: var(--pf-v6-c-divider--Color);
79
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
80
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
181
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
182
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
81
183
  }
82
184
 
83
- .pf-v6-c-divider.pf-m-horizontal {
84
- flex-direction: row;
85
- width: 100%;
86
- height: var(--pf-v6-c-divider--Size);
185
+ .pf-v6-c-menu-toggle::before {
186
+ position: absolute;
187
+ inset-block-start: 0;
188
+ inset-block-end: 0;
189
+ inset-inline-start: 0;
190
+ inset-inline-end: 0;
191
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
192
+ pointer-events: none;
193
+ content: "";
194
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
195
+ transition: inherit;
87
196
  }
88
197
 
89
- .pf-v6-c-divider.pf-m-vertical {
90
- flex-direction: column;
91
- width: var(--pf-v6-c-divider--Size);
92
- height: inherit;
198
+ .pf-v6-c-menu-toggle.pf-m-primary {
199
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
200
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
201
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
202
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
203
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
204
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
205
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
206
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
207
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
208
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
209
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
210
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
211
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
212
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
213
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
214
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
215
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
93
216
  }
94
217
 
95
- .pf-v6-c-divider.pf-m-inset-none {
96
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
218
+ .pf-v6-c-menu-toggle.pf-m-secondary {
219
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
220
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
221
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
222
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
223
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
224
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
225
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
226
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
227
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
228
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
229
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
230
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
231
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
232
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
233
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
234
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
235
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
97
236
  }
98
237
 
99
- .pf-v6-c-divider.pf-m-inset-xs {
100
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
238
+ .pf-v6-c-menu-toggle.pf-m-full-height {
239
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
240
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
241
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
242
+ align-items: center;
243
+ height: 100%;
101
244
  }
102
245
 
103
- .pf-v6-c-divider.pf-m-inset-sm {
104
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
246
+ .pf-v6-c-menu-toggle.pf-m-full-width {
247
+ width: 100%;
105
248
  }
106
249
 
107
- .pf-v6-c-divider.pf-m-inset-md {
108
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
250
+ .pf-v6-c-menu-toggle.pf-m-form {
251
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
109
252
  }
110
253
 
111
- .pf-v6-c-divider.pf-m-inset-lg {
112
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
254
+ .pf-v6-c-menu-toggle.pf-m-plain {
255
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
256
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
257
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
258
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
259
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
260
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
261
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
262
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
263
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
264
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
265
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
266
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
267
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
268
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
269
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
270
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
113
271
  }
114
272
 
115
- .pf-v6-c-divider.pf-m-inset-xl {
116
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
273
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
274
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
117
275
  }
118
276
 
119
- .pf-v6-c-divider.pf-m-inset-2xl {
120
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
277
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
278
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
279
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
121
280
  }
122
281
 
123
- .pf-v6-c-divider.pf-m-inset-3xl {
124
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
282
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
283
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
284
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
285
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
286
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
287
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
288
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
289
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
290
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
291
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
292
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
125
293
  }
126
294
 
127
- @media (min-width: 36rem) {
128
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
129
- flex-direction: row;
130
- width: 100%;
131
- height: var(--pf-v6-c-divider--Size);
132
- }
295
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
296
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
297
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
298
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
299
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
300
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
301
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
133
302
  }
134
- @media (min-width: 36rem) {
135
- .pf-v6-c-divider.pf-m-vertical-on-sm {
136
- flex-direction: column;
137
- width: var(--pf-v6-c-divider--Size);
138
- height: inherit;
139
- }
303
+
304
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
305
+ border: 0;
140
306
  }
141
- @media (min-width: 36rem) {
142
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
143
- --pf-v6-c-divider--before--FlexBasis: 100%;
144
- }
145
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
146
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
147
- }
148
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
149
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
150
- }
151
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
152
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
153
- }
154
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
155
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
156
- }
157
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
158
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
159
- }
160
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
161
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
162
- }
163
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
164
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
165
- }
307
+
308
+ .pf-v6-c-menu-toggle.pf-m-small {
309
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
310
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
311
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
312
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
313
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
314
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
315
+ --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);
316
+ --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);
166
317
  }
167
- @media (min-width: 48rem) {
168
- .pf-v6-c-divider.pf-m-horizontal-on-md {
169
- flex-direction: row;
170
- width: 100%;
171
- height: var(--pf-v6-c-divider--Size);
172
- }
318
+
319
+ .pf-v6-c-menu-toggle.pf-m-success {
320
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
321
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
173
322
  }
174
- @media (min-width: 48rem) {
175
- .pf-v6-c-divider.pf-m-vertical-on-md {
176
- flex-direction: column;
177
- width: var(--pf-v6-c-divider--Size);
178
- height: inherit;
179
- }
323
+
324
+ .pf-v6-c-menu-toggle.pf-m-warning {
325
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
326
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
180
327
  }
181
- @media (min-width: 48rem) {
182
- .pf-v6-c-divider.pf-m-inset-none-on-md {
183
- --pf-v6-c-divider--before--FlexBasis: 100%;
184
- }
185
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
186
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
187
- }
188
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
189
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
190
- }
191
- .pf-v6-c-divider.pf-m-inset-md-on-md {
192
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
193
- }
194
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
195
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
196
- }
197
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
198
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
199
- }
200
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
201
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
202
- }
203
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
204
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
205
- }
328
+
329
+ .pf-v6-c-menu-toggle.pf-m-danger {
330
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
331
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
206
332
  }
207
- @media (min-width: 62rem) {
208
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
209
- flex-direction: row;
210
- width: 100%;
211
- height: var(--pf-v6-c-divider--Size);
333
+
334
+ @media screen and (prefers-reduced-motion: no-preference) {
335
+ .pf-v6-c-menu-toggle.pf-m-danger {
336
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
337
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
338
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
339
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
340
+ animation-fill-mode: both;
212
341
  }
213
342
  }
214
- @media (min-width: 62rem) {
215
- .pf-v6-c-divider.pf-m-vertical-on-lg {
216
- flex-direction: column;
217
- width: var(--pf-v6-c-divider--Size);
218
- height: inherit;
219
- }
343
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
344
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
345
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
346
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
220
347
  }
221
- @media (min-width: 62rem) {
222
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
223
- --pf-v6-c-divider--before--FlexBasis: 100%;
224
- }
225
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
226
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
227
- }
228
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
229
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
230
- }
231
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
232
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
233
- }
234
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
235
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
236
- }
237
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
238
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
239
- }
240
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
241
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
348
+
349
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
350
+ from {
351
+ opacity: 0;
242
352
  }
243
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
244
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
353
+ to {
354
+ opacity: 1;
245
355
  }
246
356
  }
247
- @media (min-width: 75rem) {
248
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
249
- flex-direction: row;
250
- width: 100%;
251
- height: var(--pf-v6-c-divider--Size);
252
- }
357
+ .pf-v6-c-menu-toggle.pf-m-settings {
358
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
359
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
360
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
361
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
362
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
363
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
364
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
253
365
  }
254
- @media (min-width: 75rem) {
255
- .pf-v6-c-divider.pf-m-vertical-on-xl {
256
- flex-direction: column;
257
- width: var(--pf-v6-c-divider--Size);
258
- height: inherit;
259
- }
366
+
367
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
368
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
260
369
  }
261
- @media (min-width: 75rem) {
262
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
263
- --pf-v6-c-divider--before--FlexBasis: 100%;
264
- }
265
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
266
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
267
- }
268
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
269
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
270
- }
271
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
272
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
273
- }
274
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
275
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
276
- }
277
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
278
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
279
- }
280
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
281
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
282
- }
283
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
284
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
285
- }
370
+
371
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
372
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
373
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
374
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
375
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
376
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
286
377
  }
287
- @media (min-width: 90.625rem) {
288
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
289
- flex-direction: row;
290
- width: 100%;
291
- height: var(--pf-v6-c-divider--Size);
292
- }
378
+
379
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
380
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
381
+ pointer-events: none;
293
382
  }
294
- @media (min-width: 90.625rem) {
295
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
296
- flex-direction: column;
297
- width: var(--pf-v6-c-divider--Size);
298
- height: inherit;
299
- }
383
+
384
+ .pf-v6-c-menu-toggle.pf-m-docked {
385
+ justify-content: flex-start;
386
+ width: 100%;
300
387
  }
301
- @media (min-width: 90.625rem) {
302
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
303
- --pf-v6-c-divider--before--FlexBasis: 100%;
304
- }
305
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
306
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
307
- }
308
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
309
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
310
- }
311
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
312
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
313
- }
314
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
315
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
316
- }
317
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
318
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
388
+
389
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
390
+ min-width: 1lh;
391
+ }
392
+
393
+ @media (min-width: 62rem) {
394
+ .pf-v6-c-menu-toggle.pf-m-docked {
395
+ justify-content: center;
396
+ width: auto;
319
397
  }
320
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
321
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
398
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
399
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
400
+ display: none;
322
401
  }
323
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
324
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
402
+ }
403
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
404
+ justify-content: flex-start;
405
+ width: 100%;
406
+ }
407
+
408
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
409
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
410
+ .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
411
+ display: revert;
412
+ }
413
+
414
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
415
+ syntax: "<length>";
416
+ inherits: false;
417
+ initial-value: 0;
418
+ }
419
+ @media (prefers-reduced-motion: no-preference) {
420
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
421
+ 33% {
422
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
423
+ }
424
+ 66% {
425
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
426
+ }
325
427
  }
326
428
  }
327
- .pf-v6-c-menu-toggle {
328
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
329
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
330
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
331
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
332
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
333
- --pf-v6-c-menu-toggle--MinWidth: calc(1lh + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
334
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
335
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
336
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
337
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
338
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
339
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
340
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
341
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
342
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
343
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
344
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
345
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
346
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
347
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
348
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
349
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
350
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
351
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
352
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
353
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
354
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
355
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
356
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
357
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
358
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
359
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
360
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
361
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
362
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
363
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
364
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
365
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
366
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
367
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
368
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
369
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
370
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
371
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
372
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
373
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
374
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
375
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
376
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
377
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
378
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
379
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
380
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
381
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
382
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
383
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
384
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
385
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
386
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
387
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
388
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
389
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
390
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
391
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
392
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
393
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
394
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
395
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
396
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
397
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
398
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
399
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
400
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
401
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
402
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
403
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
404
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
405
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
406
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
407
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
408
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
409
- --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
410
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
411
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
412
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
413
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
414
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
415
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
416
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
417
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
418
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
419
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
420
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
421
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
422
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
423
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
424
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
425
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
426
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
427
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
428
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
429
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
430
- --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));
431
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
432
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
433
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
434
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
435
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
436
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
437
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
438
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
439
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
440
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
441
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
442
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
443
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
444
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
445
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
446
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
447
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
448
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
449
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
450
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
451
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
452
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
453
- --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
454
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
455
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
456
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
457
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
458
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
459
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
460
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
461
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
462
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
463
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
464
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
465
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
466
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
467
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
468
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
469
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
470
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
471
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
472
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
473
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
474
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
475
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
476
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
429
+ .pf-v6-c-menu-toggle.pf-m-split-button {
430
+ --pf-v6-c-menu-toggle--Gap: 0;
431
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
432
+ padding: 0;
433
+ }
434
+
435
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
436
+ position: relative;
437
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
438
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
439
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
440
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
441
+ }
442
+
443
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
444
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
445
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
446
+ }
447
+
448
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
449
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
450
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
451
+ }
452
+
453
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
454
+ --pf-v6-c-check__label--Color: currentcolor;
455
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
456
+ align-items: center;
457
+ align-self: stretch;
458
+ }
459
+
460
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
461
+ --pf-v6-c-check__input--TranslateY: 0;
462
+ align-self: center;
463
+ }
464
+
465
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
466
+ 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);
467
+ }
468
+
469
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
470
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
471
+ }
472
+
473
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
474
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
475
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
476
+ }
477
+
478
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
479
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
480
+ --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);
477
481
  }
478
482
 
479
- .pf-v6-c-menu-toggle {
480
- position: relative;
481
- display: inline-flex;
482
- gap: var(--pf-v6-c-menu-toggle--Gap);
483
- align-items: center;
484
- justify-content: center;
485
- min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert);
486
- max-width: 100%;
487
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
488
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
489
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
490
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
491
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
492
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
493
- color: var(--pf-v6-c-menu-toggle--Color);
494
- cursor: pointer;
495
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
483
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
484
+ --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);
485
+ }
486
+
487
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
488
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
489
+ }
490
+
491
+ .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,
492
+ .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,
493
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
494
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
495
+ }
496
+
497
+ .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,
498
+ .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,
499
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
500
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
501
+ }
502
+
503
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
504
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
505
+ }
506
+
507
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
508
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
509
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
510
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
511
+ }
512
+
513
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
514
+ content: none;
515
+ }
516
+
517
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
518
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
519
+ --pf-v6-c-menu-toggle--Gap: 0;
520
+ align-items: stretch;
521
+ padding: 0;
522
+ }
523
+
524
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
525
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
526
+ }
527
+
528
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
529
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
530
+ display: flex;
531
+ align-items: stretch;
532
+ }
533
+
534
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
535
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
536
+ flex: 1;
537
+ }
538
+
539
+ .pf-v6-c-menu-toggle__button {
540
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
541
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
542
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
543
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
544
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
545
+ color: inherit;
546
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
496
547
  border: 0;
497
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
498
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
499
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
500
548
  }
501
549
 
502
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
503
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
550
+ .pf-v6-c-menu-toggle__button.pf-m-text {
551
+ display: inline-flex;
552
+ align-items: baseline;
504
553
  }
505
554
 
506
- .pf-v6-c-menu-toggle::before {
507
- position: absolute;
508
- inset-block-start: 0;
509
- inset-block-end: 0;
510
- inset-inline-start: 0;
511
- inset-inline-end: 0;
512
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
513
- pointer-events: none;
514
- content: "";
515
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
516
- transition: inherit;
555
+ .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) {
556
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
557
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
517
558
  }
518
559
 
519
- .pf-v6-c-menu-toggle.pf-m-primary {
520
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
521
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
522
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
523
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
524
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
525
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
526
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
527
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
528
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
529
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
530
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
531
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
532
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
533
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
534
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
535
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
536
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
560
+ .pf-v6-c-menu-toggle__text {
561
+ overflow: hidden;
562
+ text-overflow: ellipsis;
563
+ white-space: nowrap;
564
+ min-width: 0;
537
565
  }
538
566
 
539
- .pf-v6-c-menu-toggle.pf-m-secondary {
540
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
541
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
542
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
543
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
544
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
545
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
546
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
547
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
548
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
549
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
550
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
551
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
552
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
553
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
554
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
555
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
556
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
567
+ .pf-v6-c-menu-toggle__count {
568
+ display: flex;
569
+ flex-wrap: nowrap;
557
570
  }
558
571
 
559
- .pf-v6-c-menu-toggle.pf-m-full-height {
560
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
561
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
562
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
572
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
573
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
574
+ .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 {
575
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
576
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
577
+ }
578
+
579
+ .pf-v6-c-menu-toggle__icon {
580
+ flex-shrink: 0;
581
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
582
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
583
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
584
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
585
+ }
586
+
587
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
588
+ vertical-align: middle;
589
+ }
590
+
591
+ .pf-v6-c-menu-toggle__controls {
592
+ display: flex;
593
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
563
594
  align-items: center;
564
- height: 100%;
595
+ justify-content: center;
596
+ margin-inline-start: auto;
565
597
  }
566
598
 
567
- .pf-v6-c-menu-toggle.pf-m-full-width {
568
- width: 100%;
599
+ .pf-v6-c-menu-toggle__toggle-icon {
600
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
601
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
569
602
  }
570
603
 
571
- .pf-v6-c-menu-toggle.pf-m-form {
572
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
604
+ .pf-v6-c-menu-toggle__status-icon {
605
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
573
606
  }
574
607
 
575
- .pf-v6-c-menu-toggle.pf-m-plain {
576
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
577
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
578
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
579
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
580
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
581
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
582
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
583
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
584
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
585
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
586
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
587
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
588
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
589
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
590
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
591
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
608
+ .pf-v6-c-badge {
609
+ --pf-v6-c-badge--BorderColor: transparent;
610
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
611
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
612
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
613
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
614
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
615
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
616
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
617
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
618
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
619
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
620
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
621
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
622
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
623
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
624
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
625
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
626
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
627
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
628
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
629
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
592
630
  }
593
631
 
594
- .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
595
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
632
+ .pf-v6-c-badge {
633
+ position: relative;
634
+ display: inline-block;
635
+ min-width: var(--pf-v6-c-badge--MinWidth);
636
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
637
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
638
+ font-size: var(--pf-v6-c-badge--FontSize);
639
+ font-weight: var(--pf-v6-c-badge--FontWeight);
640
+ color: var(--pf-v6-c-badge--Color);
641
+ text-align: center;
642
+ white-space: nowrap;
643
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
644
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
596
645
  }
597
646
 
598
- .pf-v6-c-menu-toggle.pf-m-plain::before {
599
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
600
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
647
+ .pf-v6-c-badge::after {
648
+ position: absolute;
649
+ inset: 0;
650
+ pointer-events: none;
651
+ content: "";
652
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
653
+ border-radius: inherit;
654
+ }
655
+
656
+ .pf-v6-c-badge.pf-m-read {
657
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
658
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
659
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
660
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
601
661
  }
602
662
 
603
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
604
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
605
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
606
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
607
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
608
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
609
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
610
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
611
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
612
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
613
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
663
+ .pf-v6-c-badge.pf-m-unread {
664
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
665
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
666
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
614
667
  }
615
668
 
616
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
617
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
618
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
619
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
620
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
621
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
622
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
669
+ .pf-v6-c-badge.pf-m-disabled {
670
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
671
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
623
672
  }
624
673
 
625
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
626
- border: 0;
674
+ .pf-v6-c-badge.pf-m-disabled::after {
675
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
627
676
  }
628
677
 
629
- .pf-v6-c-menu-toggle.pf-m-small {
630
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
631
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
632
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
633
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
634
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
635
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
636
- --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);
637
- --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);
678
+ .pf-v6-c-badge__toggle-icon {
679
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
680
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
638
681
  }
639
682
 
640
- .pf-v6-c-menu-toggle.pf-m-success {
641
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
642
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
683
+ .pf-v6-c-check {
684
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
685
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
686
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
687
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
688
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
689
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
690
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
691
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
692
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
693
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
694
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
695
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
696
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
697
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
643
698
  }
644
699
 
645
- .pf-v6-c-menu-toggle.pf-m-warning {
646
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
647
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
700
+ .pf-v6-c-check {
701
+ display: grid;
702
+ grid-template-columns: auto 1fr;
703
+ gap: var(--pf-v6-c-check--GridGap);
704
+ accent-color: var(--pf-v6-c-check--AccentColor);
648
705
  }
649
706
 
650
- .pf-v6-c-menu-toggle.pf-m-danger {
651
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
652
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
707
+ .pf-v6-c-check.pf-m-standalone {
708
+ display: inline-grid;
709
+ grid-template-columns: auto;
710
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
653
711
  }
654
712
 
655
- @media screen and (prefers-reduced-motion: no-preference) {
656
- .pf-v6-c-menu-toggle.pf-m-danger {
657
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
658
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
659
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
660
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
661
- animation-fill-mode: both;
662
- }
713
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
714
+ align-self: center;
715
+ transform: none;
663
716
  }
664
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
665
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
666
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
667
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
717
+
718
+ .pf-v6-c-check__input {
719
+ align-self: start;
720
+ font-size: var(--pf-v6-c-check__label--FontSize);
721
+ line-height: var(--pf-v6-c-check__label--LineHeight);
722
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
668
723
  }
669
724
 
670
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
671
- from {
672
- opacity: 0;
673
- }
674
- to {
675
- opacity: 1;
676
- }
725
+ .pf-v6-c-check__label {
726
+ font-size: var(--pf-v6-c-check__label--FontSize);
727
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
728
+ line-height: var(--pf-v6-c-check__label--LineHeight);
729
+ color: var(--pf-v6-c-check__label--Color);
677
730
  }
678
- .pf-v6-c-menu-toggle.pf-m-settings {
679
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
680
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
681
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
682
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
683
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
684
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
685
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
731
+
732
+ .pf-v6-c-check__description {
733
+ grid-column: 2;
734
+ font-size: var(--pf-v6-c-check__description--FontSize);
735
+ color: var(--pf-v6-c-check__description--Color);
686
736
  }
687
737
 
688
- .pf-v6-c-menu-toggle.pf-m-placeholder {
689
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
738
+ .pf-v6-c-check__body {
739
+ grid-column: 2;
690
740
  }
691
741
 
692
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
693
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
694
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
695
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
696
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
697
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
742
+ .pf-v6-c-check__label,
743
+ .pf-v6-c-check__input {
744
+ justify-self: start;
698
745
  }
699
746
 
700
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
701
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
702
- pointer-events: none;
747
+ label.pf-v6-c-check, .pf-v6-c-check__label,
748
+ .pf-v6-c-check__input {
749
+ cursor: pointer;
703
750
  }
704
751
 
705
- .pf-v6-c-menu-toggle.pf-m-docked {
706
- justify-content: flex-start;
707
- width: 100%;
752
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
753
+ .pf-v6-c-check__input:disabled,
754
+ .pf-v6-c-check__input.pf-m-disabled {
755
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
756
+ cursor: not-allowed;
708
757
  }
709
758
 
710
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__icon {
711
- min-width: 1lh;
759
+ .pf-v6-c-check__label-required {
760
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
761
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
762
+ color: var(--pf-v6-c-check__label-required--Color);
712
763
  }
713
764
 
714
- @media (min-width: 62rem) {
715
- .pf-v6-c-menu-toggle.pf-m-docked {
716
- justify-content: center;
717
- width: auto;
718
- }
719
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
720
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
721
- display: none;
722
- }
765
+ .pf-v6-c-divider {
766
+ --pf-v6-c-divider--Display: flex;
767
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
768
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
769
+ --pf-v6-c-divider--before--FlexBasis: 100%;
723
770
  }
724
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
725
- justify-content: flex-start;
771
+
772
+ .pf-v6-c-divider {
773
+ flex-direction: row;
726
774
  width: 100%;
775
+ height: var(--pf-v6-c-divider--Size);
776
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
777
+ --pf-v6-hidden-visible--hidden--Display: none;
778
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
779
+ display: var(--pf-v6-hidden-visible--Display);
727
780
  }
728
781
 
729
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
730
- :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
731
- .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
732
- display: revert;
782
+ .pf-v6-c-divider.pf-m-hidden {
783
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
733
784
  }
734
785
 
735
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
736
- syntax: "<length>";
737
- inherits: false;
738
- initial-value: 0;
739
- }
740
- @media (prefers-reduced-motion: no-preference) {
741
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
742
- 33% {
743
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
744
- }
745
- 66% {
746
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
747
- }
786
+ @media screen and (min-width: 36rem) {
787
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
788
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
789
+ }
790
+ .pf-v6-c-divider.pf-m-visible-on-sm {
791
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
748
792
  }
749
793
  }
750
- .pf-v6-c-menu-toggle.pf-m-split-button {
751
- --pf-v6-c-menu-toggle--Gap: 0;
752
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
753
- padding: 0;
754
- }
755
-
756
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
757
- position: relative;
758
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
759
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
760
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
761
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
794
+ @media screen and (min-width: 48rem) {
795
+ .pf-v6-c-divider.pf-m-hidden-on-md {
796
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
797
+ }
798
+ .pf-v6-c-divider.pf-m-visible-on-md {
799
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
800
+ }
762
801
  }
763
-
764
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
765
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
766
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
802
+ @media screen and (min-width: 62rem) {
803
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
804
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
805
+ }
806
+ .pf-v6-c-divider.pf-m-visible-on-lg {
807
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
808
+ }
767
809
  }
768
-
769
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
770
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
771
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
810
+ @media screen and (min-width: 75rem) {
811
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
812
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
813
+ }
814
+ .pf-v6-c-divider.pf-m-visible-on-xl {
815
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
816
+ }
772
817
  }
773
-
774
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
775
- --pf-v6-c-check__label--Color: currentcolor;
776
- --pf-v6-c-check__label--disabled--Color: currentcolor;
777
- align-items: center;
778
- align-self: stretch;
818
+ @media screen and (min-width: 90.625rem) {
819
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
820
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
821
+ }
822
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
823
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
824
+ }
779
825
  }
780
-
781
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
782
- --pf-v6-c-check__input--TranslateY: 0;
783
- align-self: center;
826
+ .pf-v6-c-divider {
827
+ flex-shrink: 0;
828
+ align-items: stretch;
829
+ align-self: stretch;
830
+ justify-content: center;
831
+ border: 0;
784
832
  }
785
833
 
786
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
787
- 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);
834
+ .pf-v6-c-divider::before {
835
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
836
+ content: "";
837
+ background-color: var(--pf-v6-c-divider--Color);
838
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
839
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
788
840
  }
789
841
 
790
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
791
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
842
+ .pf-v6-c-divider.pf-m-horizontal {
843
+ flex-direction: row;
844
+ width: 100%;
845
+ height: var(--pf-v6-c-divider--Size);
792
846
  }
793
847
 
794
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
795
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
796
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
848
+ .pf-v6-c-divider.pf-m-vertical {
849
+ flex-direction: column;
850
+ width: var(--pf-v6-c-divider--Size);
851
+ height: inherit;
797
852
  }
798
853
 
799
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
800
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
801
- --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);
854
+ .pf-v6-c-divider.pf-m-inset-none {
855
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
802
856
  }
803
857
 
804
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
805
- --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);
858
+ .pf-v6-c-divider.pf-m-inset-xs {
859
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
806
860
  }
807
861
 
808
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
809
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
862
+ .pf-v6-c-divider.pf-m-inset-sm {
863
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
810
864
  }
811
865
 
812
- .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,
813
- .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,
814
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
815
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
866
+ .pf-v6-c-divider.pf-m-inset-md {
867
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
816
868
  }
817
869
 
818
- .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,
819
- .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,
820
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
821
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
870
+ .pf-v6-c-divider.pf-m-inset-lg {
871
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
822
872
  }
823
873
 
824
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
825
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
874
+ .pf-v6-c-divider.pf-m-inset-xl {
875
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
826
876
  }
827
877
 
828
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
829
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
830
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
831
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
878
+ .pf-v6-c-divider.pf-m-inset-2xl {
879
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
832
880
  }
833
881
 
834
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
835
- content: none;
882
+ .pf-v6-c-divider.pf-m-inset-3xl {
883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
836
884
  }
837
885
 
838
- .pf-v6-c-menu-toggle.pf-m-typeahead {
839
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
840
- --pf-v6-c-menu-toggle--Gap: 0;
841
- align-items: stretch;
842
- padding: 0;
886
+ @media (min-width: 36rem) {
887
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
888
+ flex-direction: row;
889
+ width: 100%;
890
+ height: var(--pf-v6-c-divider--Size);
891
+ }
843
892
  }
844
-
845
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
846
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
893
+ @media (min-width: 36rem) {
894
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
895
+ flex-direction: column;
896
+ width: var(--pf-v6-c-divider--Size);
897
+ height: inherit;
898
+ }
847
899
  }
848
-
849
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
850
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
851
- display: flex;
852
- align-items: stretch;
900
+ @media (min-width: 36rem) {
901
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
902
+ --pf-v6-c-divider--before--FlexBasis: 100%;
903
+ }
904
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
905
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
906
+ }
907
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
908
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
909
+ }
910
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
911
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
912
+ }
913
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
914
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
915
+ }
916
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
917
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
918
+ }
919
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
920
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
921
+ }
922
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
923
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
924
+ }
853
925
  }
854
-
855
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
856
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
857
- flex: 1;
926
+ @media (min-width: 48rem) {
927
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
928
+ flex-direction: row;
929
+ width: 100%;
930
+ height: var(--pf-v6-c-divider--Size);
931
+ }
858
932
  }
859
-
860
- .pf-v6-c-menu-toggle__button {
861
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
862
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
863
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
864
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
865
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
866
- color: inherit;
867
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
868
- border: 0;
933
+ @media (min-width: 48rem) {
934
+ .pf-v6-c-divider.pf-m-vertical-on-md {
935
+ flex-direction: column;
936
+ width: var(--pf-v6-c-divider--Size);
937
+ height: inherit;
938
+ }
869
939
  }
870
-
871
- .pf-v6-c-menu-toggle__button.pf-m-text {
872
- display: inline-flex;
873
- align-items: baseline;
940
+ @media (min-width: 48rem) {
941
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
942
+ --pf-v6-c-divider--before--FlexBasis: 100%;
943
+ }
944
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
945
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
946
+ }
947
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
948
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
949
+ }
950
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
951
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
952
+ }
953
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
954
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
955
+ }
956
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
957
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
958
+ }
959
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
960
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
961
+ }
962
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
963
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
964
+ }
874
965
  }
875
-
876
- .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) {
877
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
878
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
966
+ @media (min-width: 62rem) {
967
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
968
+ flex-direction: row;
969
+ width: 100%;
970
+ height: var(--pf-v6-c-divider--Size);
971
+ }
879
972
  }
880
-
881
- .pf-v6-c-menu-toggle__text {
882
- overflow: hidden;
883
- text-overflow: ellipsis;
884
- white-space: nowrap;
885
- min-width: 0;
973
+ @media (min-width: 62rem) {
974
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
975
+ flex-direction: column;
976
+ width: var(--pf-v6-c-divider--Size);
977
+ height: inherit;
978
+ }
886
979
  }
887
-
888
- .pf-v6-c-menu-toggle__count {
889
- display: flex;
890
- flex-wrap: nowrap;
980
+ @media (min-width: 62rem) {
981
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
982
+ --pf-v6-c-divider--before--FlexBasis: 100%;
983
+ }
984
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
985
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
986
+ }
987
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
988
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
989
+ }
990
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
991
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
992
+ }
993
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
994
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
995
+ }
996
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
997
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
998
+ }
999
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1000
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1001
+ }
1002
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1003
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1004
+ }
891
1005
  }
892
-
893
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
894
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
895
- .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 {
896
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
897
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1006
+ @media (min-width: 75rem) {
1007
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
1008
+ flex-direction: row;
1009
+ width: 100%;
1010
+ height: var(--pf-v6-c-divider--Size);
1011
+ }
898
1012
  }
899
-
900
- .pf-v6-c-menu-toggle__icon {
901
- flex-shrink: 0;
902
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
903
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
904
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
905
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1013
+ @media (min-width: 75rem) {
1014
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
1015
+ flex-direction: column;
1016
+ width: var(--pf-v6-c-divider--Size);
1017
+ height: inherit;
1018
+ }
906
1019
  }
907
-
908
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
909
- vertical-align: middle;
1020
+ @media (min-width: 75rem) {
1021
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
1022
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1023
+ }
1024
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1025
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1026
+ }
1027
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1028
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1029
+ }
1030
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
1031
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1032
+ }
1033
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1034
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1035
+ }
1036
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1037
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1038
+ }
1039
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1040
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1041
+ }
1042
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1043
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1044
+ }
910
1045
  }
911
-
912
- .pf-v6-c-menu-toggle__controls {
913
- display: flex;
914
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
915
- align-items: center;
916
- justify-content: center;
917
- margin-inline-start: auto;
1046
+ @media (min-width: 90.625rem) {
1047
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1048
+ flex-direction: row;
1049
+ width: 100%;
1050
+ height: var(--pf-v6-c-divider--Size);
1051
+ }
918
1052
  }
919
-
920
- .pf-v6-c-menu-toggle__toggle-icon {
921
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
922
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1053
+ @media (min-width: 90.625rem) {
1054
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1055
+ flex-direction: column;
1056
+ width: var(--pf-v6-c-divider--Size);
1057
+ height: inherit;
1058
+ }
923
1059
  }
924
-
925
- .pf-v6-c-menu-toggle__status-icon {
926
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1060
+ @media (min-width: 90.625rem) {
1061
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1062
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1063
+ }
1064
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1065
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1066
+ }
1067
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1068
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1069
+ }
1070
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1071
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1072
+ }
1073
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1074
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1075
+ }
1076
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1077
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1078
+ }
1079
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1080
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1081
+ }
1082
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1083
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1084
+ }
927
1085
  }
928
-
929
1086
  .pf-v6-c-button {
930
1087
  --pf-v6-c-button--Display: inline-flex;
931
1088
  --pf-v6-c-button--AlignItems: baseline;
@@ -1966,79 +2123,160 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1966
2123
  scale: 1.5;
1967
2124
  }
1968
2125
  }
1969
- .pf-v6-c-badge {
1970
- --pf-v6-c-badge--BorderColor: transparent;
1971
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1972
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1973
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1974
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1975
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1976
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1977
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1978
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1979
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1980
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1981
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1982
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1983
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
1984
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1985
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1986
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1987
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1988
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1989
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1990
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2126
+ .pf-v6-c-label-group {
2127
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2128
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2129
+ --pf-v6-c-label-group--MaxWidth: 100%;
2130
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2131
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2132
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2133
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2134
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
2135
+ --pf-v6-c-label-group__main--MinWidth: 0;
2136
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2137
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2138
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2139
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2140
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
2141
+ --pf-v6-c-label-group__list--MinWidth: 0;
2142
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2143
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2144
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2145
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2146
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2147
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2148
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2149
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2150
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2151
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2152
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2153
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
2154
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2155
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2156
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2157
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2158
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2159
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2160
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2161
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2162
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2163
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1991
2164
  }
1992
2165
 
1993
- .pf-v6-c-badge {
1994
- position: relative;
1995
- display: inline-block;
1996
- min-width: var(--pf-v6-c-badge--MinWidth);
1997
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1998
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1999
- font-size: var(--pf-v6-c-badge--FontSize);
2000
- font-weight: var(--pf-v6-c-badge--FontWeight);
2001
- color: var(--pf-v6-c-badge--Color);
2002
- text-align: center;
2003
- white-space: nowrap;
2004
- background-color: var(--pf-v6-c-badge--BackgroundColor);
2005
- border-radius: var(--pf-v6-c-badge--BorderRadius);
2166
+ .pf-v6-c-label-group {
2167
+ display: inline-flex;
2168
+ row-gap: var(--pf-v6-c-label-group--RowGap);
2169
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
2170
+ align-items: center;
2171
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
2006
2172
  }
2007
2173
 
2008
- .pf-v6-c-badge::after {
2009
- position: absolute;
2010
- inset: 0;
2011
- pointer-events: none;
2012
- content: "";
2013
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
2014
- border-radius: inherit;
2174
+ .pf-v6-c-label-group.pf-m-category {
2175
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2176
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2177
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2178
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2179
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2180
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2181
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2015
2182
  }
2016
2183
 
2017
- .pf-v6-c-badge.pf-m-read {
2018
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
2019
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
2020
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
2021
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
2184
+ .pf-v6-c-label-group.pf-m-vertical {
2185
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2186
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2187
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2188
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2189
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2190
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2191
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2022
2192
  }
2023
2193
 
2024
- .pf-v6-c-badge.pf-m-unread {
2025
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
2026
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
2027
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
2194
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2195
+ align-items: flex-start;
2028
2196
  }
2029
2197
 
2030
- .pf-v6-c-badge.pf-m-disabled {
2031
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
2032
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
2198
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2199
+ flex-direction: column;
2200
+ align-items: flex-start;
2201
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2202
+ }
2203
+
2204
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2205
+ flex-direction: column;
2206
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2207
+ }
2208
+
2209
+ .pf-v6-c-label-group.pf-m-editable,
2210
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2211
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2212
+ display: flex;
2213
+ }
2214
+
2215
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2216
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
2217
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
2218
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
2219
+ flex: 1;
2220
+ }
2221
+
2222
+ .pf-v6-c-label-group__main {
2223
+ display: flex;
2224
+ flex: 1;
2225
+ flex-wrap: wrap;
2226
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
2227
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
2228
+ align-items: baseline;
2229
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
2230
+ }
2231
+
2232
+ .pf-v6-c-label-group__list {
2233
+ display: inline-flex;
2234
+ flex-wrap: wrap;
2235
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
2236
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
2237
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
2238
+ }
2239
+
2240
+ .pf-v6-c-label-group__list-item {
2241
+ display: inline-flex;
2242
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
2243
+ }
2244
+
2245
+ .pf-v6-c-label-group__label {
2246
+ overflow: hidden;
2247
+ text-overflow: ellipsis;
2248
+ white-space: nowrap;
2249
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
2250
+ }
2251
+
2252
+ .pf-v6-c-label-group__close {
2253
+ display: flex;
2254
+ align-self: flex-start;
2255
+ }
2256
+
2257
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2258
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2259
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2260
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2261
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2262
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2033
2263
  }
2034
2264
 
2035
- .pf-v6-c-badge.pf-m-disabled::after {
2036
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
2265
+ .pf-v6-c-label-group__textarea {
2266
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2267
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2268
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2269
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2270
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2271
+ white-space: nowrap;
2272
+ resize: none;
2273
+ scrollbar-width: none;
2274
+ -ms-overflow-style: none;
2275
+ border: 0;
2037
2276
  }
2038
2277
 
2039
- .pf-v6-c-badge__toggle-icon {
2040
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
2041
- color: var(--pf-v6-c-badge__toggle-icon--Color);
2278
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2279
+ display: none;
2042
2280
  }
2043
2281
 
2044
2282
  .pf-v6-c-text-input-group {
@@ -2285,88 +2523,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2285
2523
  display: flex;
2286
2524
  }
2287
2525
 
2288
- .pf-v6-c-check {
2289
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2290
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2291
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2292
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2293
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2294
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2295
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2296
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2297
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2298
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2299
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2300
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2301
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2302
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2303
- }
2304
-
2305
- .pf-v6-c-check {
2306
- display: grid;
2307
- grid-template-columns: auto 1fr;
2308
- gap: var(--pf-v6-c-check--GridGap);
2309
- accent-color: var(--pf-v6-c-check--AccentColor);
2310
- }
2311
-
2312
- .pf-v6-c-check.pf-m-standalone {
2313
- display: inline-grid;
2314
- grid-template-columns: auto;
2315
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2316
- }
2317
-
2318
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2319
- align-self: center;
2320
- transform: none;
2321
- }
2322
-
2323
- .pf-v6-c-check__input {
2324
- align-self: start;
2325
- font-size: var(--pf-v6-c-check__label--FontSize);
2326
- line-height: var(--pf-v6-c-check__label--LineHeight);
2327
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2328
- }
2329
-
2330
- .pf-v6-c-check__label {
2331
- font-size: var(--pf-v6-c-check__label--FontSize);
2332
- font-weight: var(--pf-v6-c-check__label--FontWeight);
2333
- line-height: var(--pf-v6-c-check__label--LineHeight);
2334
- color: var(--pf-v6-c-check__label--Color);
2335
- }
2336
-
2337
- .pf-v6-c-check__description {
2338
- grid-column: 2;
2339
- font-size: var(--pf-v6-c-check__description--FontSize);
2340
- color: var(--pf-v6-c-check__description--Color);
2341
- }
2342
-
2343
- .pf-v6-c-check__body {
2344
- grid-column: 2;
2345
- }
2346
-
2347
- .pf-v6-c-check__label,
2348
- .pf-v6-c-check__input {
2349
- justify-self: start;
2350
- }
2351
-
2352
- label.pf-v6-c-check, .pf-v6-c-check__label,
2353
- .pf-v6-c-check__input {
2354
- cursor: pointer;
2355
- }
2356
-
2357
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2358
- .pf-v6-c-check__input:disabled,
2359
- .pf-v6-c-check__input.pf-m-disabled {
2360
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2361
- cursor: not-allowed;
2362
- }
2363
-
2364
- .pf-v6-c-check__label-required {
2365
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2366
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2367
- color: var(--pf-v6-c-check__label-required--Color);
2368
- }
2369
-
2370
2526
  .pf-v6-c-label {
2371
2527
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2372
2528
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -2910,162 +3066,6 @@ input.pf-v6-c-label__content {
2910
3066
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2911
3067
  }
2912
3068
 
2913
- .pf-v6-c-label-group {
2914
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
2915
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
2916
- --pf-v6-c-label-group--MaxWidth: 100%;
2917
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
2918
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
2919
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
2920
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
2921
- --pf-v6-c-label-group__main--MaxWidth: 100%;
2922
- --pf-v6-c-label-group__main--MinWidth: 0;
2923
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
2924
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
2925
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
2926
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
2927
- --pf-v6-c-label-group__list--MaxWidth: 100%;
2928
- --pf-v6-c-label-group__list--MinWidth: 0;
2929
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
2930
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
2931
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
2932
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2933
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2934
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2935
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2936
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
2937
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
2938
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
2939
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2940
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
2941
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2942
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2943
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2944
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2945
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2946
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
2947
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
2948
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2949
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
2950
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2951
- }
2952
-
2953
- .pf-v6-c-label-group {
2954
- display: inline-flex;
2955
- row-gap: var(--pf-v6-c-label-group--RowGap);
2956
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
2957
- align-items: center;
2958
- max-width: var(--pf-v6-c-label-group--MaxWidth);
2959
- }
2960
-
2961
- .pf-v6-c-label-group.pf-m-category {
2962
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
2963
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
2964
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
2965
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
2966
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
2967
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
2968
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
2969
- }
2970
-
2971
- .pf-v6-c-label-group.pf-m-vertical {
2972
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
2973
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
2974
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
2975
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
2976
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
2977
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
2978
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
2979
- }
2980
-
2981
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
2982
- align-items: flex-start;
2983
- }
2984
-
2985
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
2986
- flex-direction: column;
2987
- align-items: flex-start;
2988
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
2989
- }
2990
-
2991
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
2992
- flex-direction: column;
2993
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
2994
- }
2995
-
2996
- .pf-v6-c-label-group.pf-m-editable,
2997
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
2998
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
2999
- display: flex;
3000
- }
3001
-
3002
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
3003
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
3004
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
3005
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
3006
- flex: 1;
3007
- }
3008
-
3009
- .pf-v6-c-label-group__main {
3010
- display: flex;
3011
- flex: 1;
3012
- flex-wrap: wrap;
3013
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
3014
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
3015
- align-items: baseline;
3016
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
3017
- }
3018
-
3019
- .pf-v6-c-label-group__list {
3020
- display: inline-flex;
3021
- flex-wrap: wrap;
3022
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
3023
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
3024
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
3025
- }
3026
-
3027
- .pf-v6-c-label-group__list-item {
3028
- display: inline-flex;
3029
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
3030
- }
3031
-
3032
- .pf-v6-c-label-group__label {
3033
- overflow: hidden;
3034
- text-overflow: ellipsis;
3035
- white-space: nowrap;
3036
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
3037
- }
3038
-
3039
- .pf-v6-c-label-group__close {
3040
- display: flex;
3041
- align-self: flex-start;
3042
- }
3043
-
3044
- .pf-v6-c-label-group__close .pf-v6-c-button {
3045
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
3046
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
3047
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
3048
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
3049
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
3050
- }
3051
-
3052
- .pf-v6-c-label-group__textarea {
3053
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
3054
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
3055
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
3056
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
3057
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
3058
- white-space: nowrap;
3059
- resize: none;
3060
- scrollbar-width: none;
3061
- -ms-overflow-style: none;
3062
- border: 0;
3063
- }
3064
-
3065
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
3066
- display: none;
3067
- }
3068
-
3069
3069
  .pf-v6-c-menu {
3070
3070
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
3071
3071
  --pf-v6-c-menu--Width: auto;
@@ -3293,7 +3293,7 @@ input.pf-v6-c-label__content {
3293
3293
  --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
3294
3294
  --pf-v6-c-menu__item-external--Color: transparent;
3295
3295
  --pf-v6-c-menu__item-select-icon--Color: transparent;
3296
- --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
3296
+ --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
3297
3297
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
3298
3298
  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
3299
3299
  --pf-v6-c-menu__list-item--hover--BorderColor: transparent;
@@ -3707,7 +3707,7 @@ input.pf-v6-c-label__content {
3707
3707
  .pf-v6-c-menu__item-description {
3708
3708
  font-size: var(--pf-v6-c-menu__item-description--FontSize);
3709
3709
  color: var(--pf-v6-c-menu__item-description--Color);
3710
- overflow-wrap: break-word;
3710
+ overflow-wrap: anywhere;
3711
3711
  }
3712
3712
 
3713
3713
  .pf-v6-c-menu__item-check .pf-v6-c-check {
@@ -3789,9 +3789,9 @@ input.pf-v6-c-label__content {
3789
3789
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3790
3790
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3791
3791
  --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3792
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3792
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3793
3793
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3794
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3794
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
3795
3795
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3796
3796
  }
3797
3797
 
@@ -3841,7 +3841,7 @@ input.pf-v6-c-label__content {
3841
3841
  font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3842
3842
  line-height: inherit;
3843
3843
  color: var(--pf-v6-c-breadcrumb__link--Color);
3844
- overflow-wrap: break-word;
3844
+ overflow-wrap: anywhere;
3845
3845
  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3846
3846
  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3847
3847
  text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
@@ -4088,7 +4088,7 @@ button.pf-v6-c-breadcrumb__link {
4088
4088
  font-size: var(--pf-v6-c-tooltip__content--FontSize);
4089
4089
  color: var(--pf-v6-c-tooltip__content--Color);
4090
4090
  text-align: center;
4091
- overflow-wrap: break-word;
4091
+ overflow-wrap: anywhere;
4092
4092
  background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
4093
4093
  border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
4094
4094
  }