@patternfly/react-templates 6.6.0-prerelease.1 → 6.6.0-prerelease.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-DzGwW6jL.css → output-ccVq_Rpf.css} +942 -942
  6. package/package.json +3 -3
package/dist/umd/assets/{output-DzGwW6jL.css → output-ccVq_Rpf.css} RENAMED
@@ -3,1159 +3,1003 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-check {
7
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
8
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
9
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
10
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
11
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
12
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
13
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
14
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
15
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
16
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
17
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
19
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
20
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
21
- }
22
-
23
- .pf-v6-c-check {
24
- display: grid;
25
- grid-template-columns: auto 1fr;
26
- grid-gap: var(--pf-v6-c-check--GridGap);
27
- accent-color: var(--pf-v6-c-check--AccentColor);
28
- }
29
-
30
- .pf-v6-c-check.pf-m-standalone {
31
- display: inline-grid;
32
- grid-template-columns: auto;
33
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
34
- }
35
-
36
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
37
- align-self: center;
38
- transform: none;
39
- }
40
-
41
- .pf-v6-c-check__input {
42
- align-self: start;
43
- font-size: var(--pf-v6-c-check__label--FontSize);
44
- line-height: var(--pf-v6-c-check__label--LineHeight);
45
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
46
- }
47
-
48
- .pf-v6-c-check__label {
49
- font-size: var(--pf-v6-c-check__label--FontSize);
50
- font-weight: var(--pf-v6-c-check__label--FontWeight);
51
- line-height: var(--pf-v6-c-check__label--LineHeight);
52
- color: var(--pf-v6-c-check__label--Color);
53
- }
54
-
55
- .pf-v6-c-check__description {
56
- grid-column: 2;
57
- font-size: var(--pf-v6-c-check__description--FontSize);
58
- color: var(--pf-v6-c-check__description--Color);
59
- }
60
-
61
- .pf-v6-c-check__body {
62
- grid-column: 2;
63
- }
64
-
65
- .pf-v6-c-check__label,
66
- .pf-v6-c-check__input {
67
- justify-self: start;
68
- }
69
-
70
- label.pf-v6-c-check, .pf-v6-c-check__label,
71
- .pf-v6-c-check__input {
72
- cursor: pointer;
73
- }
74
-
75
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
76
- .pf-v6-c-check__input:disabled,
77
- .pf-v6-c-check__input.pf-m-disabled {
78
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
79
- cursor: not-allowed;
80
- }
81
-
82
- .pf-v6-c-check__label-required {
83
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
84
- font-size: var(--pf-v6-c-check__label-required--FontSize);
85
- color: var(--pf-v6-c-check__label-required--Color);
86
- }
87
-
88
- .pf-v6-c-label-group {
89
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
90
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
91
- --pf-v6-c-label-group--MaxWidth: 100%;
92
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
93
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
94
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
95
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
96
- --pf-v6-c-label-group__main--MaxWidth: 100%;
97
- --pf-v6-c-label-group__main--MinWidth: 0;
98
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
99
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
100
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
101
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
102
- --pf-v6-c-label-group__list--MaxWidth: 100%;
103
- --pf-v6-c-label-group__list--MinWidth: 0;
104
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
105
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
106
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
107
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
108
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
109
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
110
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
111
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
112
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
113
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
114
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
115
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
116
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
117
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
118
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
119
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
120
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
121
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
122
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
123
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
124
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
125
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
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;
126
156
  }
127
157
 
128
- .pf-v6-c-label-group {
158
+ .pf-v6-c-menu-toggle {
159
+ position: relative;
129
160
  display: inline-flex;
130
- row-gap: var(--pf-v6-c-label-group--RowGap);
131
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
161
+ gap: var(--pf-v6-c-menu-toggle--Gap);
132
162
  align-items: center;
133
- max-width: var(--pf-v6-c-label-group--MaxWidth);
134
- }
135
-
136
- .pf-v6-c-label-group.pf-m-category {
137
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
138
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
139
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
140
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
141
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
142
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
143
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
144
- }
145
-
146
- .pf-v6-c-label-group.pf-m-vertical {
147
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
148
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
149
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
150
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
151
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
152
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
153
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
154
- }
155
-
156
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
157
- align-items: flex-start;
158
- }
159
-
160
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
161
- flex-direction: column;
162
- align-items: flex-start;
163
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
164
- }
165
-
166
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
167
- flex-direction: column;
168
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
169
- }
170
-
171
- .pf-v6-c-label-group.pf-m-editable,
172
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
173
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
174
- display: flex;
175
- }
176
-
177
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
178
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
179
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
180
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
181
- flex: 1;
182
- }
183
-
184
- .pf-v6-c-label-group__main {
185
- display: flex;
186
- flex: 1;
187
- flex-wrap: wrap;
188
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
189
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
190
- align-items: baseline;
191
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
192
- }
193
-
194
- .pf-v6-c-label-group__list {
195
- display: inline-flex;
196
- flex-wrap: wrap;
197
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
198
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
199
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
200
- }
201
-
202
- .pf-v6-c-label-group__list-item {
203
- display: inline-flex;
204
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
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);
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);
205
179
  }
206
180
 
207
- .pf-v6-c-label-group__label {
208
- overflow: hidden;
209
- text-overflow: ellipsis;
210
- white-space: nowrap;
211
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
181
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
182
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
212
183
  }
213
184
 
214
- .pf-v6-c-label-group__close {
215
- display: flex;
216
- align-self: flex-start;
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;
217
196
  }
218
197
 
219
- .pf-v6-c-label-group__close .pf-v6-c-button {
220
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
221
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
222
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
223
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
224
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
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);
225
216
  }
226
217
 
227
- .pf-v6-c-label-group__textarea {
228
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
229
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
230
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
231
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
232
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
233
- white-space: nowrap;
234
- resize: none;
235
- scrollbar-width: none;
236
- -ms-overflow-style: none;
237
- border: 0;
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);
238
236
  }
239
237
 
240
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
241
- display: none;
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%;
242
244
  }
243
245
 
244
- .pf-v6-c-badge {
245
- --pf-v6-c-badge--BorderColor: transparent;
246
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
247
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
248
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
249
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
250
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
251
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
252
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
253
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
254
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
255
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
256
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
257
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
258
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
259
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
260
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
261
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
262
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
263
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
264
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
265
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
246
+ .pf-v6-c-menu-toggle.pf-m-full-width {
247
+ width: 100%;
266
248
  }
267
249
 
268
- .pf-v6-c-badge {
269
- position: relative;
270
- display: inline-block;
271
- min-width: var(--pf-v6-c-badge--MinWidth);
272
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
273
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
274
- font-size: var(--pf-v6-c-badge--FontSize);
275
- font-weight: var(--pf-v6-c-badge--FontWeight);
276
- color: var(--pf-v6-c-badge--Color);
277
- text-align: center;
278
- white-space: nowrap;
279
- background-color: var(--pf-v6-c-badge--BackgroundColor);
280
- border-radius: var(--pf-v6-c-badge--BorderRadius);
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);
281
252
  }
282
253
 
283
- .pf-v6-c-badge::after {
284
- position: absolute;
285
- inset: 0;
286
- pointer-events: none;
287
- content: "";
288
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
289
- border-radius: inherit;
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);
290
271
  }
291
272
 
292
- .pf-v6-c-badge.pf-m-read {
293
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
294
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
295
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
296
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
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);
297
275
  }
298
276
 
299
- .pf-v6-c-badge.pf-m-unread {
300
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
301
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
302
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
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);
303
280
  }
304
281
 
305
- .pf-v6-c-badge.pf-m-disabled {
306
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
307
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
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);
308
293
  }
309
294
 
310
- .pf-v6-c-badge.pf-m-disabled::after {
311
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
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);
312
302
  }
313
303
 
314
- .pf-v6-c-badge__toggle-icon {
315
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
316
- color: var(--pf-v6-c-badge__toggle-icon--Color);
304
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
305
+ border: 0;
317
306
  }
318
307
 
319
- .pf-v6-c-text-input-group {
320
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
321
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
322
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
323
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
324
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
325
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
326
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
327
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
328
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
329
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
330
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
331
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
332
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
333
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
334
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
335
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
336
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
337
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
338
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
339
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
340
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
341
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
342
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
343
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
344
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
345
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
346
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
347
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
348
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
349
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
350
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
351
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
352
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
353
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
354
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
355
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
356
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
357
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
358
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
359
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
360
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
361
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
362
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
363
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
364
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
365
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
366
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
367
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
368
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
369
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
370
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
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);
371
317
  }
372
318
 
373
- .pf-v6-c-text-input-group {
374
- position: relative;
375
- display: flex;
376
- width: 100%;
377
- font-size: var(--pf-v6-c-text-input-group__FontSize);
378
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
379
- color: var(--pf-v6-c-text-input-group--Color, inherit);
380
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
381
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
382
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
383
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
384
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
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);
385
322
  }
386
323
 
387
- .pf-v6-c-text-input-group::before {
388
- position: absolute;
389
- inset: 0;
390
- pointer-events: none;
391
- content: "";
392
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
393
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
394
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
395
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
396
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
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);
397
327
  }
398
328
 
399
- .pf-v6-c-text-input-group.pf-m-disabled {
400
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
401
- --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
402
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
403
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
404
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
405
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
406
- pointer-events: none;
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);
407
332
  }
408
333
 
409
- .pf-v6-c-text-input-group.pf-m-plain {
410
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
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;
341
+ }
342
+ }
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);
411
347
  }
412
348
 
413
- .pf-v6-c-text-input-group.pf-m-plain::before {
414
- border: 0;
349
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
350
+ from {
351
+ opacity: 0;
352
+ }
353
+ to {
354
+ opacity: 1;
355
+ }
356
+ }
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);
415
365
  }
416
366
 
417
- .pf-v6-c-text-input-group.pf-m-success {
418
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
419
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
420
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
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);
421
369
  }
422
370
 
423
- .pf-v6-c-text-input-group.pf-m-warning {
424
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
425
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
426
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
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);
427
377
  }
428
378
 
429
- .pf-v6-c-text-input-group.pf-m-error {
430
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
431
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
432
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
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;
433
382
  }
434
383
 
435
- @media (prefers-reduced-motion: no-preference) {
436
- .pf-v6-c-text-input-group.pf-m-error {
437
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
438
- animation-name: pf-v6-global-danger-jiggle-motion;
439
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
440
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
441
- animation-fill-mode: both;
384
+ .pf-v6-c-menu-toggle.pf-m-docked {
385
+ justify-content: flex-start;
386
+ width: 100%;
387
+ }
388
+
389
+ @media (min-width: 62rem) {
390
+ .pf-v6-c-menu-toggle.pf-m-docked {
391
+ justify-content: center;
392
+ width: auto;
393
+ }
394
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
395
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
396
+ display: none;
442
397
  }
443
398
  }
444
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
445
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
446
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
447
- animation-name: pf-v6-global-fade-in;
448
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
449
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
399
+ :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 {
400
+ justify-content: flex-start;
401
+ width: 100%;
450
402
  }
451
403
 
452
- .pf-v6-c-text-input-group:hover {
453
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
404
+ :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,
405
+ :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,
406
+ .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
407
+ display: revert;
454
408
  }
455
409
 
456
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
457
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
410
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
411
+ syntax: "<length>";
412
+ inherits: false;
413
+ initial-value: 0;
414
+ }
415
+ @media (prefers-reduced-motion: no-preference) {
416
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
417
+ 33% {
418
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
419
+ }
420
+ 66% {
421
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
422
+ }
423
+ }
424
+ }
425
+ .pf-v6-c-menu-toggle.pf-m-split-button {
426
+ --pf-v6-c-menu-toggle--Gap: 0;
427
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
428
+ padding: 0;
458
429
  }
459
430
 
460
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
461
- --pf-v6-c-text-input-group__text--Position: relative;
431
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
432
+ position: relative;
433
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
434
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
435
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
436
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
462
437
  }
463
438
 
464
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
465
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
466
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
439
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
440
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
441
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
467
442
  }
468
443
 
469
- .pf-v6-c-text-input-group__main {
470
- display: flex;
471
- flex: 1;
472
- flex-wrap: wrap;
473
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
474
- min-width: 0;
444
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
445
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
446
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
475
447
  }
476
448
 
477
- .pf-v6-c-text-input-group__main.pf-m-icon {
478
- --pf-v6-c-text-input-group__text--Position: relative;
479
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
480
- display: inline-flex;
449
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
450
+ --pf-v6-c-check__label--Color: currentcolor;
451
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
481
452
  align-items: center;
482
- justify-content: center;
483
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
453
+ align-self: stretch;
484
454
  }
485
455
 
486
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
487
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
456
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
457
+ --pf-v6-c-check__input--TranslateY: 0;
458
+ align-self: center;
488
459
  }
489
460
 
490
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
491
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
492
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
493
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
461
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
462
+ 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);
494
463
  }
495
464
 
496
- .pf-v6-c-text-input-group__text {
497
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
498
- display: inline-grid;
499
- flex: 1;
500
- grid-template-areas: "text-input";
501
- grid-template-columns: 1fr;
465
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
466
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
502
467
  }
503
468
 
504
- .pf-v6-c-text-input-group__icon {
505
- position: absolute;
506
- inset-block-start: 50%;
507
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
508
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
509
- color: var(--pf-v6-c-text-input-group__icon--Color);
510
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
469
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
470
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
471
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
511
472
  }
512
473
 
513
- .pf-v6-c-text-input-group__icon.pf-m-status {
514
- inset-inline-start: auto;
515
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
516
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
474
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
475
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
476
+ --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);
517
477
  }
518
478
 
519
- .pf-v6-c-text-input-group__text-input {
520
- overflow: hidden;
521
- text-overflow: ellipsis;
522
- white-space: nowrap;
523
- position: relative;
524
- width: 100%;
525
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
526
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
527
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
528
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
529
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
530
- color: var(--pf-v6-c-text-input-group__text-input--Color);
531
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
532
- border: 0;
533
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
479
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
480
+ --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);
481
+ }
482
+
483
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
484
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
485
+ }
486
+
487
+ .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,
488
+ .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,
489
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
490
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
491
+ }
492
+
493
+ .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,
494
+ .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,
495
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
496
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
534
497
  }
535
498
 
536
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
537
- grid-area: text-input;
499
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
500
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
538
501
  }
539
502
 
540
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
541
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
503
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
504
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
505
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
506
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
542
507
  }
543
508
 
544
- .pf-v6-c-text-input-group__text-input::placeholder {
545
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
509
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
510
+ content: none;
546
511
  }
547
512
 
548
- .pf-v6-c-text-input-group__utilities {
549
- display: flex;
550
- align-items: center;
551
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
552
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
513
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
514
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
515
+ --pf-v6-c-menu-toggle--Gap: 0;
516
+ align-items: stretch;
517
+ padding: 0;
553
518
  }
554
519
 
555
- .pf-v6-c-text-input-group__utilities > * + * {
556
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
520
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
521
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
557
522
  }
558
523
 
559
- .pf-v6-c-text-input-group__group {
524
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
525
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
560
526
  display: flex;
527
+ align-items: stretch;
561
528
  }
562
529
 
563
- .pf-v6-c-menu-toggle {
564
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
565
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
566
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
567
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
568
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
569
- --pf-v6-c-menu-toggle--MinWidth: calc(1lh + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
570
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
571
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
572
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
573
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
574
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
575
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
576
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
577
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
578
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
579
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
580
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
581
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
582
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
583
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
584
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
585
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
586
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
587
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
588
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
589
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
590
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
591
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
592
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
593
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
594
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
595
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
596
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
597
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
598
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
599
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
600
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
601
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
602
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
603
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
604
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
605
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
606
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
607
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
608
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
609
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
610
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
611
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
612
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
613
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
614
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
615
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
616
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
617
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
618
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
619
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
620
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
621
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
622
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
623
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
624
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
625
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
626
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
627
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
628
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
629
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
630
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
631
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
632
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
633
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
634
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
635
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
636
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
637
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
638
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
639
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
640
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
641
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
642
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
643
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
644
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
645
- --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
646
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
647
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
648
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
649
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
650
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
651
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
652
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
653
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
654
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
655
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
656
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
657
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
658
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
659
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
660
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
661
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
662
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
663
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
664
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
665
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
666
- --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));
667
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
668
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
669
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
670
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
671
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
672
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
673
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
674
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
675
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
676
- --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
677
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
678
- --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
679
- --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
680
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
681
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
682
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
683
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
684
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
685
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
686
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
687
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
688
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
689
- --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
690
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
691
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
692
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
693
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
694
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
695
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
696
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
697
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
698
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
699
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
700
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
701
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
702
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
703
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
704
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
705
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
706
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
707
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
708
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
709
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
710
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
711
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
712
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
530
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
531
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
532
+ flex: 1;
713
533
  }
714
534
 
715
- .pf-v6-c-menu-toggle {
716
- position: relative;
717
- display: inline-flex;
718
- gap: var(--pf-v6-c-menu-toggle--Gap);
719
- align-items: center;
720
- justify-content: center;
721
- min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert);
722
- max-width: 100%;
723
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
724
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
725
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
726
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
727
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
728
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
729
- color: var(--pf-v6-c-menu-toggle--Color);
730
- cursor: pointer;
731
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
535
+ .pf-v6-c-menu-toggle__button {
536
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
537
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
538
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
539
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
540
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
541
+ color: inherit;
542
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
732
543
  border: 0;
733
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
734
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
735
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
736
544
  }
737
545
 
738
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
739
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
546
+ .pf-v6-c-menu-toggle__button.pf-m-text {
547
+ display: inline-flex;
548
+ align-items: baseline;
740
549
  }
741
550
 
742
- .pf-v6-c-menu-toggle::before {
743
- position: absolute;
744
- inset-block-start: 0;
745
- inset-block-end: 0;
746
- inset-inline-start: 0;
747
- inset-inline-end: 0;
748
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
749
- pointer-events: none;
750
- content: "";
751
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
752
- transition: inherit;
551
+ .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) {
552
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
553
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
753
554
  }
754
-
755
- .pf-v6-c-menu-toggle.pf-m-primary {
756
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
757
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
758
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
759
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
760
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
761
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
762
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
763
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
764
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
765
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
766
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
767
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
768
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
769
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
770
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
771
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
772
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
555
+
556
+ .pf-v6-c-menu-toggle__text {
557
+ overflow: hidden;
558
+ text-overflow: ellipsis;
559
+ white-space: nowrap;
560
+ min-width: 0;
773
561
  }
774
562
 
775
- .pf-v6-c-menu-toggle.pf-m-secondary {
776
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
777
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
778
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
779
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
780
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
781
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
782
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
783
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
784
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
785
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
786
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
787
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
788
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
789
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
790
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
791
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
792
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
563
+ .pf-v6-c-menu-toggle__count {
564
+ display: flex;
565
+ flex-wrap: nowrap;
793
566
  }
794
567
 
795
- .pf-v6-c-menu-toggle.pf-m-full-height {
796
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
797
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
798
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
799
- align-items: center;
800
- height: 100%;
568
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
569
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
570
+ .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 {
571
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
572
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
801
573
  }
802
574
 
803
- .pf-v6-c-menu-toggle.pf-m-full-width {
804
- width: 100%;
575
+ .pf-v6-c-menu-toggle__icon {
576
+ flex-shrink: 0;
577
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
578
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
579
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
580
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
805
581
  }
806
582
 
807
- .pf-v6-c-menu-toggle.pf-m-form {
808
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
583
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
584
+ vertical-align: middle;
809
585
  }
810
586
 
811
- .pf-v6-c-menu-toggle.pf-m-plain {
812
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
813
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
814
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
815
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
816
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
817
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
818
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
819
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
820
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
821
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
822
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
823
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
824
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
825
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
826
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
827
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
587
+ .pf-v6-c-menu-toggle__controls {
588
+ display: flex;
589
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
590
+ align-items: center;
591
+ justify-content: center;
592
+ margin-inline-start: auto;
828
593
  }
829
594
 
830
- .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
831
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
595
+ .pf-v6-c-menu-toggle__toggle-icon {
596
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
597
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
832
598
  }
833
599
 
834
- .pf-v6-c-menu-toggle.pf-m-plain::before {
835
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
836
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
600
+ .pf-v6-c-menu-toggle__status-icon {
601
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
837
602
  }
838
603
 
839
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
840
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
841
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
842
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
843
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
844
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
845
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
846
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
847
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
848
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
849
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
604
+ .pf-v6-c-text-input-group {
605
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
606
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--control--default);
607
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
608
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
609
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
610
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
611
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
612
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
613
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
614
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
615
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
616
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
617
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
618
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
619
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
620
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
621
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
622
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
623
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--control--form-element);
624
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
625
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
626
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
627
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
628
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
629
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
630
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
631
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
632
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
633
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
634
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
635
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
636
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
637
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
638
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
639
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
640
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
641
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
642
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
643
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
644
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
645
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
646
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
647
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
648
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
649
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
650
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
651
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
652
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
653
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
654
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
655
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
850
656
  }
851
657
 
852
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
853
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
854
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
855
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
856
- --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
857
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
858
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
658
+ .pf-v6-c-text-input-group {
659
+ position: relative;
660
+ display: flex;
661
+ width: 100%;
662
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
663
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
664
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
665
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
666
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
667
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
668
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
669
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
859
670
  }
860
671
 
861
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
862
- border: 0;
672
+ .pf-v6-c-text-input-group::before {
673
+ position: absolute;
674
+ inset: 0;
675
+ pointer-events: none;
676
+ content: "";
677
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
678
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
679
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
680
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
681
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
863
682
  }
864
683
 
865
- .pf-v6-c-menu-toggle.pf-m-small {
866
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
867
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
868
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
869
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
870
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
871
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
872
- --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);
873
- --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);
684
+ .pf-v6-c-text-input-group.pf-m-disabled {
685
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
686
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
687
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
688
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
689
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
690
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
691
+ pointer-events: none;
874
692
  }
875
693
 
876
- .pf-v6-c-menu-toggle.pf-m-success {
877
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
878
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
694
+ .pf-v6-c-text-input-group.pf-m-plain {
695
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
879
696
  }
880
697
 
881
- .pf-v6-c-menu-toggle.pf-m-warning {
882
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
883
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
698
+ .pf-v6-c-text-input-group.pf-m-plain::before {
699
+ border: 0;
884
700
  }
885
701
 
886
- .pf-v6-c-menu-toggle.pf-m-danger {
887
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
888
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
702
+ .pf-v6-c-text-input-group.pf-m-success {
703
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
704
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
705
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
889
706
  }
890
707
 
891
- @media screen and (prefers-reduced-motion: no-preference) {
892
- .pf-v6-c-menu-toggle.pf-m-danger {
893
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
894
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
895
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
896
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
897
- animation-fill-mode: both;
898
- }
708
+ .pf-v6-c-text-input-group.pf-m-warning {
709
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
710
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
711
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
899
712
  }
900
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
901
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
902
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
903
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
713
+
714
+ .pf-v6-c-text-input-group.pf-m-error {
715
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
716
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
717
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
904
718
  }
905
719
 
906
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
907
- from {
908
- opacity: 0;
909
- }
910
- to {
911
- opacity: 1;
720
+ @media (prefers-reduced-motion: no-preference) {
721
+ .pf-v6-c-text-input-group.pf-m-error {
722
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
723
+ animation-name: pf-v6-global-danger-jiggle-motion;
724
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
725
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
726
+ animation-fill-mode: both;
912
727
  }
913
728
  }
914
- .pf-v6-c-menu-toggle.pf-m-settings {
915
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
916
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
917
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
918
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
919
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
920
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
921
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
729
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
730
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
731
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
732
+ animation-name: pf-v6-global-fade-in;
733
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
734
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
922
735
  }
923
736
 
924
- .pf-v6-c-menu-toggle.pf-m-placeholder {
925
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
737
+ .pf-v6-c-text-input-group:hover {
738
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
926
739
  }
927
740
 
928
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
929
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
930
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
931
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
932
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
933
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
741
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
742
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
934
743
  }
935
744
 
936
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
937
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
938
- pointer-events: none;
745
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
746
+ --pf-v6-c-text-input-group__text--Position: relative;
939
747
  }
940
748
 
941
- .pf-v6-c-menu-toggle.pf-m-docked {
942
- justify-content: flex-start;
943
- width: 100%;
749
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
750
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
751
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
944
752
  }
945
753
 
946
- @media (min-width: 62rem) {
947
- .pf-v6-c-menu-toggle.pf-m-docked {
948
- justify-content: center;
949
- width: auto;
950
- }
951
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
952
- .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
953
- display: none;
954
- }
955
- }
956
- :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 {
957
- justify-content: flex-start;
958
- width: 100%;
754
+ .pf-v6-c-text-input-group__main {
755
+ display: flex;
756
+ flex: 1;
757
+ flex-wrap: wrap;
758
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
759
+ min-width: 0;
959
760
  }
960
761
 
961
- :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,
962
- :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,
963
- .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
964
- display: revert;
762
+ .pf-v6-c-text-input-group__main.pf-m-icon {
763
+ --pf-v6-c-text-input-group__text--Position: relative;
764
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
765
+ display: inline-flex;
766
+ align-items: center;
767
+ justify-content: center;
768
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
965
769
  }
966
770
 
967
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
968
- syntax: "<length>";
969
- inherits: false;
970
- initial-value: 0;
971
- }
972
- @media (prefers-reduced-motion: no-preference) {
973
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
974
- 33% {
975
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
976
- }
977
- 66% {
978
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
979
- }
980
- }
981
- }
982
- .pf-v6-c-menu-toggle.pf-m-split-button {
983
- --pf-v6-c-menu-toggle--Gap: 0;
984
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
985
- padding: 0;
771
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
772
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
986
773
  }
987
774
 
988
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
989
- position: relative;
990
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
991
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
992
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
993
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
775
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
776
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
777
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
778
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
994
779
  }
995
780
 
996
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
997
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
998
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
781
+ .pf-v6-c-text-input-group__text {
782
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
783
+ display: inline-grid;
784
+ flex: 1;
785
+ grid-template-areas: "text-input";
786
+ grid-template-columns: 1fr;
999
787
  }
1000
788
 
1001
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1002
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1003
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
789
+ .pf-v6-c-text-input-group__icon {
790
+ position: absolute;
791
+ inset-block-start: 50%;
792
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
793
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
794
+ color: var(--pf-v6-c-text-input-group__icon--Color);
795
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1004
796
  }
1005
797
 
1006
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1007
- --pf-v6-c-check__label--Color: currentcolor;
1008
- --pf-v6-c-check__label--disabled--Color: currentcolor;
1009
- align-items: center;
1010
- align-self: stretch;
798
+ .pf-v6-c-text-input-group__icon.pf-m-status {
799
+ inset-inline-start: auto;
800
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
801
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1011
802
  }
1012
803
 
1013
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1014
- --pf-v6-c-check__input--TranslateY: 0;
1015
- align-self: center;
804
+ .pf-v6-c-text-input-group__text-input {
805
+ overflow: hidden;
806
+ text-overflow: ellipsis;
807
+ white-space: nowrap;
808
+ position: relative;
809
+ width: 100%;
810
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
811
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
812
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
813
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
814
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
815
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
816
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
817
+ border: 0;
818
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1016
819
  }
1017
820
 
1018
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1019
- 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);
821
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
822
+ grid-area: text-input;
1020
823
  }
1021
824
 
1022
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1023
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
825
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
826
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1024
827
  }
1025
828
 
1026
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1027
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1028
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
829
+ .pf-v6-c-text-input-group__text-input::placeholder {
830
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1029
831
  }
1030
832
 
1031
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1032
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1033
- --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);
833
+ .pf-v6-c-text-input-group__utilities {
834
+ display: flex;
835
+ align-items: center;
836
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
837
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1034
838
  }
1035
839
 
1036
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1037
- --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);
840
+ .pf-v6-c-text-input-group__utilities > * + * {
841
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1038
842
  }
1039
843
 
1040
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1041
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
844
+ .pf-v6-c-text-input-group__group {
845
+ display: flex;
1042
846
  }
1043
847
 
1044
- .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,
1045
- .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,
1046
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1047
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
848
+ .pf-v6-c-badge {
849
+ --pf-v6-c-badge--BorderColor: transparent;
850
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
851
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
852
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
853
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
854
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
855
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
856
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
857
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
858
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
859
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
860
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
861
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
862
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
863
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
864
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
865
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
866
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
867
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
868
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
869
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1048
870
  }
1049
871
 
1050
- .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,
1051
- .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,
1052
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1053
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
872
+ .pf-v6-c-badge {
873
+ position: relative;
874
+ display: inline-block;
875
+ min-width: var(--pf-v6-c-badge--MinWidth);
876
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
877
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
878
+ font-size: var(--pf-v6-c-badge--FontSize);
879
+ font-weight: var(--pf-v6-c-badge--FontWeight);
880
+ color: var(--pf-v6-c-badge--Color);
881
+ text-align: center;
882
+ white-space: nowrap;
883
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
884
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1054
885
  }
1055
886
 
1056
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1057
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
887
+ .pf-v6-c-badge::after {
888
+ position: absolute;
889
+ inset: 0;
890
+ pointer-events: none;
891
+ content: "";
892
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
893
+ border-radius: inherit;
1058
894
  }
1059
895
 
1060
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1061
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1062
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1063
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
896
+ .pf-v6-c-badge.pf-m-read {
897
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
898
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
899
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
900
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1064
901
  }
1065
902
 
1066
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1067
- content: none;
903
+ .pf-v6-c-badge.pf-m-unread {
904
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
905
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
906
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1068
907
  }
1069
908
 
1070
- .pf-v6-c-menu-toggle.pf-m-typeahead {
1071
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1072
- --pf-v6-c-menu-toggle--Gap: 0;
1073
- align-items: stretch;
1074
- padding: 0;
909
+ .pf-v6-c-badge.pf-m-disabled {
910
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
911
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1075
912
  }
1076
913
 
1077
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1078
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
914
+ .pf-v6-c-badge.pf-m-disabled::after {
915
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1079
916
  }
1080
917
 
1081
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1082
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1083
- display: flex;
1084
- align-items: stretch;
918
+ .pf-v6-c-badge__toggle-icon {
919
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
920
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1085
921
  }
1086
922
 
1087
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1088
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1089
- flex: 1;
923
+ .pf-v6-c-check {
924
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
925
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
926
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
927
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
928
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
929
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
930
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
931
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
932
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
933
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
934
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
935
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
936
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
937
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1090
938
  }
1091
939
 
1092
- .pf-v6-c-menu-toggle__button {
1093
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
1094
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1095
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1096
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1097
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1098
- color: inherit;
1099
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1100
- border: 0;
940
+ .pf-v6-c-check {
941
+ display: grid;
942
+ grid-template-columns: auto 1fr;
943
+ grid-gap: var(--pf-v6-c-check--GridGap);
944
+ accent-color: var(--pf-v6-c-check--AccentColor);
1101
945
  }
1102
946
 
1103
- .pf-v6-c-menu-toggle__button.pf-m-text {
1104
- display: inline-flex;
1105
- align-items: baseline;
947
+ .pf-v6-c-check.pf-m-standalone {
948
+ display: inline-grid;
949
+ grid-template-columns: auto;
950
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1106
951
  }
1107
952
 
1108
- .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) {
1109
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1110
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
953
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
954
+ align-self: center;
955
+ transform: none;
1111
956
  }
1112
957
 
1113
- .pf-v6-c-menu-toggle__text {
1114
- overflow: hidden;
1115
- text-overflow: ellipsis;
1116
- white-space: nowrap;
1117
- min-width: 0;
958
+ .pf-v6-c-check__input {
959
+ align-self: start;
960
+ font-size: var(--pf-v6-c-check__label--FontSize);
961
+ line-height: var(--pf-v6-c-check__label--LineHeight);
962
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1118
963
  }
1119
964
 
1120
- .pf-v6-c-menu-toggle__count {
1121
- display: flex;
1122
- flex-wrap: nowrap;
965
+ .pf-v6-c-check__label {
966
+ font-size: var(--pf-v6-c-check__label--FontSize);
967
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
968
+ line-height: var(--pf-v6-c-check__label--LineHeight);
969
+ color: var(--pf-v6-c-check__label--Color);
1123
970
  }
1124
971
 
1125
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1126
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1127
- .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 {
1128
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1129
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
972
+ .pf-v6-c-check__description {
973
+ grid-column: 2;
974
+ font-size: var(--pf-v6-c-check__description--FontSize);
975
+ color: var(--pf-v6-c-check__description--Color);
1130
976
  }
1131
977
 
1132
- .pf-v6-c-menu-toggle__icon {
1133
- flex-shrink: 0;
1134
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1135
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1136
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1137
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
978
+ .pf-v6-c-check__body {
979
+ grid-column: 2;
1138
980
  }
1139
981
 
1140
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
1141
- vertical-align: middle;
982
+ .pf-v6-c-check__label,
983
+ .pf-v6-c-check__input {
984
+ justify-self: start;
1142
985
  }
1143
986
 
1144
- .pf-v6-c-menu-toggle__controls {
1145
- display: flex;
1146
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1147
- align-items: center;
1148
- justify-content: center;
1149
- margin-inline-start: auto;
987
+ label.pf-v6-c-check, .pf-v6-c-check__label,
988
+ .pf-v6-c-check__input {
989
+ cursor: pointer;
1150
990
  }
1151
991
 
1152
- .pf-v6-c-menu-toggle__toggle-icon {
1153
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1154
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
992
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
993
+ .pf-v6-c-check__input:disabled,
994
+ .pf-v6-c-check__input.pf-m-disabled {
995
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
996
+ cursor: not-allowed;
1155
997
  }
1156
998
 
1157
- .pf-v6-c-menu-toggle__status-icon {
1158
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
999
+ .pf-v6-c-check__label-required {
1000
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
1001
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
1002
+ color: var(--pf-v6-c-check__label-required--Color);
1159
1003
  }
1160
1004
 
1161
1005
  .pf-v6-c-divider {
@@ -2022,6 +1866,162 @@ input.pf-v6-c-label__content {
2022
1866
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2023
1867
  }
2024
1868
 
1869
+ .pf-v6-c-label-group {
1870
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1871
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1872
+ --pf-v6-c-label-group--MaxWidth: 100%;
1873
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1874
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1875
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1876
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1877
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1878
+ --pf-v6-c-label-group__main--MinWidth: 0;
1879
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1880
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1881
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1882
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1883
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1884
+ --pf-v6-c-label-group__list--MinWidth: 0;
1885
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1886
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1887
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1888
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1889
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1890
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1891
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1892
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1893
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1894
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1895
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1896
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1897
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1898
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1899
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1900
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1901
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1902
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1903
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1904
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1905
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1906
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1907
+ }
1908
+
1909
+ .pf-v6-c-label-group {
1910
+ display: inline-flex;
1911
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1912
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1913
+ align-items: center;
1914
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1915
+ }
1916
+
1917
+ .pf-v6-c-label-group.pf-m-category {
1918
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1919
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1920
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1921
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1922
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1923
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1924
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1925
+ }
1926
+
1927
+ .pf-v6-c-label-group.pf-m-vertical {
1928
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1929
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1930
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1931
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1932
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1933
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1934
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1935
+ }
1936
+
1937
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1938
+ align-items: flex-start;
1939
+ }
1940
+
1941
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1942
+ flex-direction: column;
1943
+ align-items: flex-start;
1944
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1945
+ }
1946
+
1947
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1948
+ flex-direction: column;
1949
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1950
+ }
1951
+
1952
+ .pf-v6-c-label-group.pf-m-editable,
1953
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1954
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1955
+ display: flex;
1956
+ }
1957
+
1958
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1959
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1960
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1961
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1962
+ flex: 1;
1963
+ }
1964
+
1965
+ .pf-v6-c-label-group__main {
1966
+ display: flex;
1967
+ flex: 1;
1968
+ flex-wrap: wrap;
1969
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1970
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1971
+ align-items: baseline;
1972
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1973
+ }
1974
+
1975
+ .pf-v6-c-label-group__list {
1976
+ display: inline-flex;
1977
+ flex-wrap: wrap;
1978
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1979
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1980
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1981
+ }
1982
+
1983
+ .pf-v6-c-label-group__list-item {
1984
+ display: inline-flex;
1985
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1986
+ }
1987
+
1988
+ .pf-v6-c-label-group__label {
1989
+ overflow: hidden;
1990
+ text-overflow: ellipsis;
1991
+ white-space: nowrap;
1992
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1993
+ }
1994
+
1995
+ .pf-v6-c-label-group__close {
1996
+ display: flex;
1997
+ align-self: flex-start;
1998
+ }
1999
+
2000
+ .pf-v6-c-label-group__close .pf-v6-c-button {
2001
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
2002
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
2003
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
2004
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
2005
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
2006
+ }
2007
+
2008
+ .pf-v6-c-label-group__textarea {
2009
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
2010
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
2011
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
2012
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
2013
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
2014
+ white-space: nowrap;
2015
+ resize: none;
2016
+ scrollbar-width: none;
2017
+ -ms-overflow-style: none;
2018
+ border: 0;
2019
+ }
2020
+
2021
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
2022
+ display: none;
2023
+ }
2024
+
2025
2025
  .pf-v6-c-button {
2026
2026
  --pf-v6-c-button--Display: inline-flex;
2027
2027
  --pf-v6-c-button--AlignItems: baseline;