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

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 +8 -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-_SycPmCl.css → output-N3f6DOmm.css} +1435 -1368
  6. package/package.json +6 -6
package/dist/umd/assets/{output-_SycPmCl.css → output-N3f6DOmm.css} RENAMED
@@ -3,1422 +3,1283 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-text-input-group {
7
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
40
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
41
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
42
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
43
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
44
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
45
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
46
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
47
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
48
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
49
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
50
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
51
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
52
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
53
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
54
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
55
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
56
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6
+ .pf-v6-c-menu-toggle {
7
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
9
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
10
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
11
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
12
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
13
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
14
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
15
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
16
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
17
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
18
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
19
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--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--pill);
56
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
57
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
58
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
59
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
60
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
61
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
62
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
63
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
64
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
65
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
66
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
67
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
68
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
69
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
70
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
71
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
72
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
73
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
74
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
75
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
76
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
77
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
78
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
79
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
80
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
81
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
82
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
83
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
84
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
85
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
86
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
87
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
88
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
89
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
90
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
91
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
92
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
93
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
94
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
95
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
96
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
97
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
98
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
99
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
100
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
101
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
102
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
103
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
104
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
105
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
106
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
107
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
108
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
109
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
110
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
111
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
112
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
113
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
114
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
115
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
116
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
117
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
118
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
119
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
120
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
121
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
122
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
123
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
124
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
125
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
126
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
127
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
128
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
129
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
130
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
131
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
132
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
133
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
134
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
135
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
136
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
137
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
138
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
139
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
140
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
141
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
142
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
143
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
144
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
145
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
146
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
147
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
148
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
149
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
150
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
151
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
152
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
153
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
57
154
  }
58
155
 
59
- .pf-v6-c-text-input-group {
156
+ .pf-v6-c-menu-toggle {
60
157
  position: relative;
61
- display: flex;
62
- width: 100%;
63
- font-size: var(--pf-v6-c-text-input-group__FontSize);
64
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
65
- color: var(--pf-v6-c-text-input-group--Color, inherit);
66
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
67
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
68
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
69
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
70
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
71
- }
72
-
73
- .pf-v6-c-text-input-group::before {
74
- position: absolute;
75
- inset: 0;
76
- pointer-events: none;
77
- content: "";
78
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
79
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
80
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
81
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
82
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
83
- }
84
-
85
- .pf-v6-c-text-input-group.pf-m-disabled {
86
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
87
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
88
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
89
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
90
- pointer-events: none;
91
- }
92
-
93
- .pf-v6-c-text-input-group.pf-m-plain {
94
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
95
- }
96
-
97
- .pf-v6-c-text-input-group.pf-m-plain::before {
98
- border: 0;
99
- }
100
-
101
- .pf-v6-c-text-input-group.pf-m-success {
102
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
103
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
104
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
105
- }
106
-
107
- .pf-v6-c-text-input-group.pf-m-warning {
108
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
109
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
110
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
111
- }
112
-
113
- .pf-v6-c-text-input-group.pf-m-error {
114
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
115
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
116
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
117
- }
118
-
119
- @media (prefers-reduced-motion: no-preference) {
120
- .pf-v6-c-text-input-group.pf-m-error {
121
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
122
- animation-name: pf-v6-global-danger-jiggle-motion;
123
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
124
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
125
- animation-fill-mode: both;
126
- }
127
- }
128
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
129
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
130
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
131
- animation-name: pf-v6-global-fade-in;
132
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
133
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
134
- }
135
-
136
- .pf-v6-c-text-input-group:hover {
137
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
138
- }
139
-
140
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
141
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
142
- }
143
-
144
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
145
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
146
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
147
- }
148
-
149
- .pf-v6-c-text-input-group__main {
150
- display: flex;
151
- flex: 1;
152
- flex-wrap: wrap;
153
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
154
- min-width: 0;
155
- }
156
-
157
- .pf-v6-c-text-input-group__main.pf-m-icon {
158
- --pf-v6-c-text-input-group__text--Position: relative;
159
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
160
158
  display: inline-flex;
159
+ gap: var(--pf-v6-c-menu-toggle--Gap);
161
160
  align-items: center;
162
161
  justify-content: center;
163
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
164
- }
165
-
166
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
167
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
168
- }
169
-
170
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
171
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
172
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
173
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
174
- }
175
-
176
- .pf-v6-c-text-input-group__text {
177
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
178
- display: inline-grid;
179
- flex: 1;
180
- grid-template-areas: "text-input";
181
- grid-template-columns: 1fr;
182
- }
183
-
184
- .pf-v6-c-text-input-group__icon {
185
- position: absolute;
186
- inset-block-start: 50%;
187
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
188
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
189
- color: var(--pf-v6-c-text-input-group__icon--Color);
190
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
191
- }
192
-
193
- .pf-v6-c-text-input-group__icon.pf-m-status {
194
- inset-inline-start: auto;
195
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
196
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
197
- }
198
-
199
- .pf-v6-c-text-input-group__text-input {
200
- overflow: hidden;
201
- text-overflow: ellipsis;
202
- white-space: nowrap;
203
- position: relative;
204
- width: 100%;
205
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
206
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
207
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
208
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
209
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
210
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
211
- border: 0;
212
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
213
- }
214
-
215
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
216
- grid-area: text-input;
217
- }
218
-
219
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
220
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
221
- }
222
-
223
- .pf-v6-c-text-input-group__text-input::placeholder {
224
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
225
- }
226
-
227
- .pf-v6-c-text-input-group__utilities {
228
- display: flex;
229
- align-items: center;
230
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
231
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
232
- }
233
-
234
- .pf-v6-c-text-input-group__utilities > * + * {
235
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
236
- }
237
-
238
- .pf-v6-c-text-input-group__group {
239
- display: flex;
240
- }
241
-
242
- .pf-v6-c-divider {
243
- --pf-v6-c-divider--Display: flex;
244
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
245
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
246
- --pf-v6-c-divider--before--FlexBasis: 100%;
247
- }
248
-
249
- .pf-v6-c-divider {
250
- flex-direction: row;
251
- width: 100%;
252
- height: var(--pf-v6-c-divider--Size);
253
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
254
- --pf-v6-hidden-visible--hidden--Display: none;
255
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
256
- display: var(--pf-v6-hidden-visible--Display);
257
- flex-shrink: 0;
258
- align-items: stretch;
259
- align-self: stretch;
260
- justify-content: center;
162
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
163
+ max-width: 100%;
164
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
165
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
166
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
167
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
168
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
169
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
170
+ color: var(--pf-v6-c-menu-toggle--Color);
171
+ cursor: pointer;
172
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
261
173
  border: 0;
174
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
175
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
176
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
262
177
  }
263
178
 
264
- .pf-v6-c-divider.pf-m-hidden {
265
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
179
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
180
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
266
181
  }
267
182
 
268
- @media screen and (min-width: 36rem) {
269
- .pf-v6-c-divider.pf-m-hidden-on-sm {
270
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
271
- }
272
- .pf-v6-c-divider.pf-m-visible-on-sm {
273
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
274
- }
275
- }
276
- @media screen and (min-width: 48rem) {
277
- .pf-v6-c-divider.pf-m-hidden-on-md {
278
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
279
- }
280
- .pf-v6-c-divider.pf-m-visible-on-md {
281
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
282
- }
283
- }
284
- @media screen and (min-width: 62rem) {
285
- .pf-v6-c-divider.pf-m-hidden-on-lg {
286
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
287
- }
288
- .pf-v6-c-divider.pf-m-visible-on-lg {
289
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
290
- }
291
- }
292
- @media screen and (min-width: 75rem) {
293
- .pf-v6-c-divider.pf-m-hidden-on-xl {
294
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
295
- }
296
- .pf-v6-c-divider.pf-m-visible-on-xl {
297
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
298
- }
299
- }
300
- @media screen and (min-width: 90.625rem) {
301
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
302
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
303
- }
304
- .pf-v6-c-divider.pf-m-visible-on-2xl {
305
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
306
- }
307
- }
308
- .pf-v6-c-divider::before {
309
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
183
+ .pf-v6-c-menu-toggle::before {
184
+ position: absolute;
185
+ inset-block-start: 0;
186
+ inset-block-end: 0;
187
+ inset-inline-start: 0;
188
+ inset-inline-end: 0;
189
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
190
+ pointer-events: none;
310
191
  content: "";
311
- background-color: var(--pf-v6-c-divider--Color);
192
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
193
+ transition: inherit;
312
194
  }
313
195
 
314
- .pf-v6-c-divider.pf-m-horizontal {
315
- flex-direction: row;
316
- width: 100%;
317
- height: var(--pf-v6-c-divider--Size);
196
+ .pf-v6-c-menu-toggle.pf-m-primary {
197
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
198
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
199
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
200
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
201
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
202
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
203
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
204
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
205
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
206
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
207
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
208
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
209
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
210
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
211
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
212
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
213
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
318
214
  }
319
215
 
320
- .pf-v6-c-divider.pf-m-vertical {
321
- flex-direction: column;
322
- width: var(--pf-v6-c-divider--Size);
323
- height: inherit;
216
+ .pf-v6-c-menu-toggle.pf-m-secondary {
217
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
218
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
219
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
220
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
221
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
222
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
223
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
224
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
225
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
226
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
227
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
228
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
229
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
230
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
231
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
232
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
233
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
324
234
  }
325
235
 
326
- .pf-v6-c-divider.pf-m-inset-none {
327
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
236
+ .pf-v6-c-menu-toggle.pf-m-full-height {
237
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
238
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
239
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
240
+ align-items: center;
241
+ height: 100%;
328
242
  }
329
243
 
330
- .pf-v6-c-divider.pf-m-inset-xs {
331
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
244
+ .pf-v6-c-menu-toggle.pf-m-full-width {
245
+ width: 100%;
332
246
  }
333
247
 
334
- .pf-v6-c-divider.pf-m-inset-sm {
335
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
248
+ .pf-v6-c-menu-toggle.pf-m-plain {
249
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
250
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
251
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
252
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
253
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
254
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
255
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
256
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
257
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
258
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
259
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
260
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
261
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
262
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
263
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
264
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
336
265
  }
337
266
 
338
- .pf-v6-c-divider.pf-m-inset-md {
339
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
267
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
268
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
269
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
340
270
  }
341
271
 
342
- .pf-v6-c-divider.pf-m-inset-lg {
343
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
272
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
273
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
274
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
275
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
276
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
277
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
278
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
279
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
280
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
281
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
282
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
344
283
  }
345
284
 
346
- .pf-v6-c-divider.pf-m-inset-xl {
347
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
285
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
286
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
287
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
288
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
289
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
290
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
291
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
348
292
  }
349
293
 
350
- .pf-v6-c-divider.pf-m-inset-2xl {
351
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
294
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
295
+ border: 0;
352
296
  }
353
297
 
354
- .pf-v6-c-divider.pf-m-inset-3xl {
355
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
298
+ .pf-v6-c-menu-toggle.pf-m-small {
299
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
300
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
301
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
302
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
303
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
304
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
305
+ --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);
306
+ --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);
356
307
  }
357
308
 
358
- @media (min-width: 36rem) {
359
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
360
- flex-direction: row;
361
- width: 100%;
362
- height: var(--pf-v6-c-divider--Size);
363
- }
364
- }
365
- @media (min-width: 36rem) {
366
- .pf-v6-c-divider.pf-m-vertical-on-sm {
367
- flex-direction: column;
368
- width: var(--pf-v6-c-divider--Size);
369
- height: inherit;
370
- }
371
- }
372
- @media (min-width: 36rem) {
373
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
374
- --pf-v6-c-divider--before--FlexBasis: 100%;
375
- }
376
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
377
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
378
- }
379
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
380
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
381
- }
382
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
383
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
384
- }
385
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
386
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
387
- }
388
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
389
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
390
- }
391
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
392
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
393
- }
394
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
395
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
396
- }
397
- }
398
- @media (min-width: 48rem) {
399
- .pf-v6-c-divider.pf-m-horizontal-on-md {
400
- flex-direction: row;
401
- width: 100%;
402
- height: var(--pf-v6-c-divider--Size);
403
- }
404
- }
405
- @media (min-width: 48rem) {
406
- .pf-v6-c-divider.pf-m-vertical-on-md {
407
- flex-direction: column;
408
- width: var(--pf-v6-c-divider--Size);
409
- height: inherit;
410
- }
309
+ .pf-v6-c-menu-toggle.pf-m-success {
310
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
311
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
411
312
  }
412
- @media (min-width: 48rem) {
413
- .pf-v6-c-divider.pf-m-inset-none-on-md {
414
- --pf-v6-c-divider--before--FlexBasis: 100%;
415
- }
416
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
417
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
418
- }
419
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
420
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
421
- }
422
- .pf-v6-c-divider.pf-m-inset-md-on-md {
423
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
424
- }
425
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
426
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
427
- }
428
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
429
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
430
- }
431
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
432
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
433
- }
434
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
435
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
436
- }
313
+
314
+ .pf-v6-c-menu-toggle.pf-m-warning {
315
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
316
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
437
317
  }
438
- @media (min-width: 62rem) {
439
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
440
- flex-direction: row;
441
- width: 100%;
442
- height: var(--pf-v6-c-divider--Size);
443
- }
318
+
319
+ .pf-v6-c-menu-toggle.pf-m-danger {
320
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
321
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
444
322
  }
445
- @media (min-width: 62rem) {
446
- .pf-v6-c-divider.pf-m-vertical-on-lg {
447
- flex-direction: column;
448
- width: var(--pf-v6-c-divider--Size);
449
- height: inherit;
323
+
324
+ @media screen and (prefers-reduced-motion: no-preference) {
325
+ .pf-v6-c-menu-toggle.pf-m-danger {
326
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
327
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
328
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
329
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
330
+ animation-fill-mode: both;
450
331
  }
451
332
  }
452
- @media (min-width: 62rem) {
453
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
454
- --pf-v6-c-divider--before--FlexBasis: 100%;
455
- }
456
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
457
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
458
- }
459
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
460
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
461
- }
462
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
463
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
464
- }
465
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
466
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
467
- }
468
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
469
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
470
- }
471
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
472
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
333
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
334
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
335
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
336
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
337
+ }
338
+
339
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
340
+ from {
341
+ opacity: 0;
473
342
  }
474
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
475
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
343
+ to {
344
+ opacity: 1;
476
345
  }
477
346
  }
478
- @media (min-width: 75rem) {
479
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
480
- flex-direction: row;
481
- width: 100%;
482
- height: var(--pf-v6-c-divider--Size);
483
- }
347
+ .pf-v6-c-menu-toggle.pf-m-settings {
348
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
349
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
350
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
351
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
352
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
353
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
354
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
484
355
  }
485
- @media (min-width: 75rem) {
486
- .pf-v6-c-divider.pf-m-vertical-on-xl {
487
- flex-direction: column;
488
- width: var(--pf-v6-c-divider--Size);
489
- height: inherit;
490
- }
356
+
357
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
358
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
491
359
  }
492
- @media (min-width: 75rem) {
493
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
494
- --pf-v6-c-divider--before--FlexBasis: 100%;
495
- }
496
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
497
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
498
- }
499
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
500
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
501
- }
502
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
503
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
504
- }
505
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
506
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
507
- }
508
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
509
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
510
- }
511
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
512
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
513
- }
514
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
515
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
516
- }
360
+
361
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
362
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
363
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
364
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
365
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
366
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
517
367
  }
518
- @media (min-width: 90.625rem) {
519
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
520
- flex-direction: row;
521
- width: 100%;
522
- height: var(--pf-v6-c-divider--Size);
523
- }
368
+
369
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
370
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
371
+ pointer-events: none;
524
372
  }
525
- @media (min-width: 90.625rem) {
526
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
527
- flex-direction: column;
528
- width: var(--pf-v6-c-divider--Size);
529
- height: inherit;
530
- }
373
+
374
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
375
+ syntax: "<length>";
376
+ inherits: false;
377
+ initial-value: 0;
531
378
  }
532
- @media (min-width: 90.625rem) {
533
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
534
- --pf-v6-c-divider--before--FlexBasis: 100%;
535
- }
536
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
537
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
538
- }
539
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
540
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
541
- }
542
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
543
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
544
- }
545
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
546
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
547
- }
548
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
549
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
550
- }
551
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
552
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
553
- }
554
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
555
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
379
+ @media (prefers-reduced-motion: no-preference) {
380
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
381
+ 33% {
382
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
383
+ }
384
+ 66% {
385
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
386
+ }
556
387
  }
557
388
  }
558
- .pf-v6-c-badge {
559
- --pf-v6-c-badge--BorderColor: transparent;
560
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
561
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
562
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
563
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
564
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
565
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
566
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
567
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
568
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
569
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
570
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
571
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
572
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
573
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
574
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
575
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
576
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
577
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
578
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
389
+ .pf-v6-c-menu-toggle.pf-m-split-button {
390
+ --pf-v6-c-menu-toggle--Gap: 0;
391
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
392
+ padding: 0;
579
393
  }
580
394
 
581
- .pf-v6-c-badge {
395
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
582
396
  position: relative;
583
- display: inline-block;
584
- min-width: var(--pf-v6-c-badge--MinWidth);
585
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
586
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
587
- font-size: var(--pf-v6-c-badge--FontSize);
588
- font-weight: var(--pf-v6-c-badge--FontWeight);
589
- color: var(--pf-v6-c-badge--Color);
590
- text-align: center;
591
- white-space: nowrap;
592
- background-color: var(--pf-v6-c-badge--BackgroundColor);
593
- border-radius: var(--pf-v6-c-badge--BorderRadius);
397
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
398
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
399
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
400
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
594
401
  }
595
402
 
596
- .pf-v6-c-badge::after {
597
- position: absolute;
598
- inset: 0;
599
- pointer-events: none;
600
- content: "";
601
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
602
- border-radius: inherit;
403
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
404
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
405
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
603
406
  }
604
407
 
605
- .pf-v6-c-badge.pf-m-read {
606
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
607
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
608
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
408
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
409
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
410
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
609
411
  }
610
412
 
611
- .pf-v6-c-badge.pf-m-unread {
612
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
613
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
614
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
413
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
414
+ --pf-v6-c-check__label--Color: currentcolor;
415
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
416
+ align-items: center;
417
+ align-self: stretch;
615
418
  }
616
419
 
617
- .pf-v6-c-badge.pf-m-disabled {
618
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
619
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
420
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
421
+ --pf-v6-c-check__input--TranslateY: 0;
422
+ align-self: center;
423
+ }
424
+
425
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
426
+ 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);
427
+ }
428
+
429
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
430
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
431
+ }
432
+
433
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
434
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
435
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
436
+ }
437
+
438
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
439
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
440
+ --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);
620
441
  }
621
442
 
622
- .pf-v6-c-badge.pf-m-disabled::after {
623
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
443
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
444
+ --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);
624
445
  }
625
446
 
626
- .pf-v6-c-badge__toggle-icon {
627
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
628
- color: var(--pf-v6-c-badge__toggle-icon--Color);
447
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
448
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
629
449
  }
630
450
 
631
- .pf-v6-c-check {
632
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
633
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
634
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
635
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
636
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
637
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
638
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
639
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
640
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
641
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
642
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
643
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
644
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
645
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
451
+ .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,
452
+ .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,
453
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
454
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
646
455
  }
647
456
 
648
- .pf-v6-c-check {
649
- display: grid;
650
- grid-template-columns: auto 1fr;
651
- grid-gap: var(--pf-v6-c-check--GridGap);
652
- accent-color: var(--pf-v6-c-check--AccentColor);
457
+ .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,
458
+ .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,
459
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
460
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
653
461
  }
654
462
 
655
- .pf-v6-c-check.pf-m-standalone {
656
- display: inline-grid;
657
- grid-template-columns: auto;
658
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
463
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
464
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
659
465
  }
660
466
 
661
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
662
- align-self: center;
663
- transform: none;
467
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
468
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
469
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
470
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
664
471
  }
665
472
 
666
- .pf-v6-c-check__input {
667
- align-self: start;
668
- font-size: var(--pf-v6-c-check__label--FontSize);
669
- line-height: var(--pf-v6-c-check__label--LineHeight);
670
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
473
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
474
+ content: none;
671
475
  }
672
476
 
673
- .pf-v6-c-check__label {
674
- font-size: var(--pf-v6-c-check__label--FontSize);
675
- font-weight: var(--pf-v6-c-check__label--FontWeight);
676
- line-height: var(--pf-v6-c-check__label--LineHeight);
677
- color: var(--pf-v6-c-check__label--Color);
477
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
478
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
479
+ --pf-v6-c-menu-toggle--Gap: 0;
480
+ align-items: stretch;
481
+ padding: 0;
678
482
  }
679
483
 
680
- .pf-v6-c-check__description {
681
- grid-column: 2;
682
- font-size: var(--pf-v6-c-check__description--FontSize);
683
- color: var(--pf-v6-c-check__description--Color);
484
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
485
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
684
486
  }
685
487
 
686
- .pf-v6-c-check__body {
687
- grid-column: 2;
488
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
489
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
490
+ display: flex;
491
+ align-items: stretch;
688
492
  }
689
493
 
690
- .pf-v6-c-check__label,
691
- .pf-v6-c-check__input {
692
- justify-self: start;
494
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
495
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
496
+ flex: 1;
693
497
  }
694
498
 
695
- label.pf-v6-c-check, .pf-v6-c-check__label,
696
- .pf-v6-c-check__input {
697
- cursor: pointer;
499
+ .pf-v6-c-menu-toggle__button {
500
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
501
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
502
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
503
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
504
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
505
+ color: inherit;
506
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
507
+ border: 0;
698
508
  }
699
509
 
700
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
701
- .pf-v6-c-check__input:disabled,
702
- .pf-v6-c-check__input.pf-m-disabled {
703
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
704
- cursor: not-allowed;
510
+ .pf-v6-c-menu-toggle__button.pf-m-text {
511
+ display: inline-flex;
512
+ align-items: baseline;
705
513
  }
706
514
 
707
- .pf-v6-c-check__label-required {
708
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
709
- font-size: var(--pf-v6-c-check__label-required--FontSize);
710
- color: var(--pf-v6-c-check__label-required--Color);
515
+ .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) {
516
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
517
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
711
518
  }
712
519
 
713
- .pf-v6-c-menu-toggle {
714
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
715
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
716
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
717
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
718
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
719
- --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
720
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
721
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
722
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
723
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
724
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
725
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
726
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
727
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
728
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
729
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
730
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
731
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
732
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
733
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
734
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
735
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
736
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
737
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
738
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
739
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
740
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
741
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
742
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
743
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
744
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
745
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
746
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
747
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
748
- --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
749
- --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
750
- --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
751
- --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
752
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
753
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
754
- --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
755
- --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
756
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
757
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
758
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
759
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
760
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
761
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
762
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
763
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
764
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
765
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
766
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
767
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
768
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
769
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
770
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
771
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
772
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
773
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
774
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
775
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
776
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
777
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
778
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
779
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
780
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
781
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
782
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
783
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
784
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
785
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
786
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
787
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
788
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
789
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
790
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
791
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
792
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
793
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
794
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
795
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
796
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
797
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
798
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
799
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
800
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
801
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
802
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
803
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
804
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
805
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
806
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
807
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
808
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
809
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
810
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
811
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
812
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
813
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
814
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
815
- --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
816
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
817
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
818
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
819
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
820
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
821
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
822
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
823
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
824
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
825
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
826
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
827
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
828
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
829
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
830
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
831
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
832
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
833
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
834
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
835
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
836
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
837
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
838
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
839
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
840
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
841
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
842
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
843
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
844
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
845
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
846
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
847
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
848
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
849
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
850
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
851
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
852
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
853
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
854
- --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
855
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
856
- --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
857
- --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
520
+ .pf-v6-c-menu-toggle__text {
521
+ overflow: hidden;
522
+ text-overflow: ellipsis;
523
+ white-space: nowrap;
524
+ min-width: 0;
858
525
  }
859
526
 
860
- .pf-v6-c-menu-toggle {
861
- position: relative;
862
- display: inline-flex;
863
- gap: var(--pf-v6-c-menu-toggle--Gap);
527
+ .pf-v6-c-menu-toggle__count {
528
+ display: flex;
529
+ flex-wrap: nowrap;
530
+ }
531
+
532
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
533
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
534
+ .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 {
535
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
536
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
537
+ }
538
+
539
+ .pf-v6-c-menu-toggle__icon {
540
+ flex-shrink: 0;
541
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
542
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
543
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
544
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
545
+ }
546
+
547
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
548
+ vertical-align: middle;
549
+ }
550
+
551
+ .pf-v6-c-menu-toggle__controls {
552
+ display: flex;
553
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
864
554
  align-items: center;
865
555
  justify-content: center;
866
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
867
- max-width: 100%;
868
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
869
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
870
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
871
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
872
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
873
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
874
- color: var(--pf-v6-c-menu-toggle--Color);
875
- cursor: pointer;
876
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
877
- border: 0;
878
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
879
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
880
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
556
+ margin-inline-start: auto;
881
557
  }
882
558
 
883
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
884
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
559
+ .pf-v6-c-menu-toggle__toggle-icon {
560
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
561
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
885
562
  }
886
563
 
887
- .pf-v6-c-menu-toggle::before {
888
- position: absolute;
889
- inset-block-start: 0;
890
- inset-block-end: 0;
891
- inset-inline-start: 0;
892
- inset-inline-end: 0;
893
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
894
- pointer-events: none;
895
- content: "";
896
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
897
- transition: inherit;
564
+ .pf-v6-c-menu-toggle__status-icon {
565
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
898
566
  }
899
567
 
900
- .pf-v6-c-menu-toggle.pf-m-primary {
901
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
902
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
903
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
904
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
905
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
906
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
907
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
908
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
909
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
910
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
911
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
912
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
913
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
914
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
915
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
916
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
917
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
568
+ .pf-v6-c-check {
569
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
570
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
571
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
572
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
573
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
574
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
575
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
576
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
577
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
578
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
579
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
580
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
581
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
582
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
918
583
  }
919
584
 
920
- .pf-v6-c-menu-toggle.pf-m-secondary {
921
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
922
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
923
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
924
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
925
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
926
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
927
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
928
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
929
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
930
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
931
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
932
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
933
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
934
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
935
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
936
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
937
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
585
+ .pf-v6-c-check {
586
+ display: grid;
587
+ grid-template-columns: auto 1fr;
588
+ grid-gap: var(--pf-v6-c-check--GridGap);
589
+ accent-color: var(--pf-v6-c-check--AccentColor);
938
590
  }
939
591
 
940
- .pf-v6-c-menu-toggle.pf-m-full-height {
941
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
942
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
943
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
944
- align-items: center;
945
- height: 100%;
592
+ .pf-v6-c-check.pf-m-standalone {
593
+ display: inline-grid;
594
+ grid-template-columns: auto;
595
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
946
596
  }
947
597
 
948
- .pf-v6-c-menu-toggle.pf-m-full-width {
949
- width: 100%;
598
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
599
+ align-self: center;
600
+ transform: none;
950
601
  }
951
602
 
952
- .pf-v6-c-menu-toggle.pf-m-plain {
953
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
954
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
955
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
956
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
957
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
958
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
959
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
960
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
961
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
962
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
963
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
964
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
965
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
966
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
967
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
603
+ .pf-v6-c-check__input {
604
+ align-self: start;
605
+ font-size: var(--pf-v6-c-check__label--FontSize);
606
+ line-height: var(--pf-v6-c-check__label--LineHeight);
607
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
968
608
  }
969
609
 
970
- .pf-v6-c-menu-toggle.pf-m-plain::before {
971
- border: none;
610
+ .pf-v6-c-check__label {
611
+ font-size: var(--pf-v6-c-check__label--FontSize);
612
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
613
+ line-height: var(--pf-v6-c-check__label--LineHeight);
614
+ color: var(--pf-v6-c-check__label--Color);
972
615
  }
973
616
 
974
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
975
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
976
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
977
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
978
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
979
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
980
- --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
981
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
982
- --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
983
- --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
617
+ .pf-v6-c-check__description {
618
+ grid-column: 2;
619
+ font-size: var(--pf-v6-c-check__description--FontSize);
620
+ color: var(--pf-v6-c-check__description--Color);
621
+ }
622
+
623
+ .pf-v6-c-check__body {
624
+ grid-column: 2;
625
+ }
626
+
627
+ .pf-v6-c-check__label,
628
+ .pf-v6-c-check__input {
629
+ justify-self: start;
630
+ }
631
+
632
+ label.pf-v6-c-check, .pf-v6-c-check__label,
633
+ .pf-v6-c-check__input {
634
+ cursor: pointer;
635
+ }
636
+
637
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
638
+ .pf-v6-c-check__input:disabled,
639
+ .pf-v6-c-check__input.pf-m-disabled {
640
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
641
+ cursor: not-allowed;
642
+ }
643
+
644
+ .pf-v6-c-check__label-required {
645
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
646
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
647
+ color: var(--pf-v6-c-check__label-required--Color);
648
+ }
649
+
650
+ .pf-v6-c-badge {
651
+ --pf-v6-c-badge--BorderColor: transparent;
652
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
653
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
654
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
655
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
656
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
657
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
658
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
659
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
660
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
661
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
662
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
663
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
664
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
665
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
666
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
667
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
668
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
669
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
670
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
671
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
672
+ }
673
+
674
+ .pf-v6-c-badge {
675
+ position: relative;
676
+ display: inline-block;
677
+ min-width: var(--pf-v6-c-badge--MinWidth);
678
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
679
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
680
+ font-size: var(--pf-v6-c-badge--FontSize);
681
+ font-weight: var(--pf-v6-c-badge--FontWeight);
682
+ color: var(--pf-v6-c-badge--Color);
683
+ text-align: center;
684
+ white-space: nowrap;
685
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
686
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
687
+ }
688
+
689
+ .pf-v6-c-badge::after {
690
+ position: absolute;
691
+ inset: 0;
692
+ pointer-events: none;
693
+ content: "";
694
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
695
+ border-radius: inherit;
984
696
  }
985
697
 
986
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
987
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
988
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
989
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
990
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
991
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
698
+ .pf-v6-c-badge.pf-m-read {
699
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
700
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
701
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
702
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
992
703
  }
993
704
 
994
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
995
- border: 0;
705
+ .pf-v6-c-badge.pf-m-unread {
706
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
707
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
708
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
996
709
  }
997
710
 
998
- .pf-v6-c-menu-toggle.pf-m-small {
999
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
1000
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
1001
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
1002
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
1003
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
1004
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
1005
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
1006
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
711
+ .pf-v6-c-badge.pf-m-disabled {
712
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
713
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1007
714
  }
1008
715
 
1009
- .pf-v6-c-menu-toggle.pf-m-success {
1010
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
1011
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
716
+ .pf-v6-c-badge.pf-m-disabled::after {
717
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1012
718
  }
1013
719
 
1014
- .pf-v6-c-menu-toggle.pf-m-warning {
1015
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
1016
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
720
+ .pf-v6-c-badge__toggle-icon {
721
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
722
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1017
723
  }
1018
724
 
1019
- .pf-v6-c-menu-toggle.pf-m-danger {
1020
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
1021
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
725
+ .pf-v6-c-divider {
726
+ --pf-v6-c-divider--Display: flex;
727
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
728
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
729
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1022
730
  }
1023
731
 
1024
- @media screen and (prefers-reduced-motion: no-preference) {
1025
- .pf-v6-c-menu-toggle.pf-m-danger {
1026
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
1027
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
1028
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
1029
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
1030
- animation-fill-mode: both;
1031
- }
732
+ .pf-v6-c-divider {
733
+ flex-direction: row;
734
+ width: 100%;
735
+ height: var(--pf-v6-c-divider--Size);
736
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
737
+ --pf-v6-hidden-visible--hidden--Display: none;
738
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
739
+ display: var(--pf-v6-hidden-visible--Display);
740
+ flex-shrink: 0;
741
+ align-items: stretch;
742
+ align-self: stretch;
743
+ justify-content: center;
744
+ border: 0;
1032
745
  }
1033
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
1034
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
1035
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
1036
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
746
+
747
+ .pf-v6-c-divider.pf-m-hidden {
748
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1037
749
  }
1038
750
 
1039
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
1040
- from {
1041
- opacity: 0;
751
+ @media screen and (min-width: 36rem) {
752
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
753
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1042
754
  }
1043
- to {
1044
- opacity: 1;
755
+ .pf-v6-c-divider.pf-m-visible-on-sm {
756
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1045
757
  }
1046
758
  }
1047
- .pf-v6-c-menu-toggle.pf-m-settings {
1048
- --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
1049
- --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
1050
- --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
1051
- --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
1052
- --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
1053
- --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
1054
- --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
1055
- }
1056
-
1057
- .pf-v6-c-menu-toggle.pf-m-placeholder {
1058
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
1059
- }
1060
-
1061
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
1062
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
1063
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
1064
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
1065
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
1066
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
759
+ @media screen and (min-width: 48rem) {
760
+ .pf-v6-c-divider.pf-m-hidden-on-md {
761
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
762
+ }
763
+ .pf-v6-c-divider.pf-m-visible-on-md {
764
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
765
+ }
1067
766
  }
1068
-
1069
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
1070
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
1071
- pointer-events: none;
767
+ @media screen and (min-width: 62rem) {
768
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
769
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
770
+ }
771
+ .pf-v6-c-divider.pf-m-visible-on-lg {
772
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
773
+ }
1072
774
  }
1073
-
1074
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
1075
- syntax: "<length>";
1076
- inherits: false;
1077
- initial-value: 0;
775
+ @media screen and (min-width: 75rem) {
776
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
777
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
778
+ }
779
+ .pf-v6-c-divider.pf-m-visible-on-xl {
780
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
781
+ }
1078
782
  }
1079
- @media (prefers-reduced-motion: no-preference) {
1080
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
1081
- 33% {
1082
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
1083
- }
1084
- 66% {
1085
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
1086
- }
783
+ @media screen and (min-width: 90.625rem) {
784
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
785
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
786
+ }
787
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
788
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1087
789
  }
1088
790
  }
1089
- .pf-v6-c-menu-toggle.pf-m-split-button {
1090
- --pf-v6-c-menu-toggle--Gap: 0;
1091
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
1092
- padding: 0;
791
+ .pf-v6-c-divider::before {
792
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
793
+ content: "";
794
+ background-color: var(--pf-v6-c-divider--Color);
1093
795
  }
1094
796
 
1095
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
1096
- position: relative;
1097
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
1098
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
1099
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
1100
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
797
+ .pf-v6-c-divider.pf-m-horizontal {
798
+ flex-direction: row;
799
+ width: 100%;
800
+ height: var(--pf-v6-c-divider--Size);
1101
801
  }
1102
802
 
1103
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
1104
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1105
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
803
+ .pf-v6-c-divider.pf-m-vertical {
804
+ flex-direction: column;
805
+ width: var(--pf-v6-c-divider--Size);
806
+ height: inherit;
1106
807
  }
1107
808
 
1108
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
1109
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
1110
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
809
+ .pf-v6-c-divider.pf-m-inset-none {
810
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1111
811
  }
1112
812
 
1113
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
1114
- --pf-v6-c-check__label--Color: currentcolor;
1115
- --pf-v6-c-check__label--disabled--Color: currentcolor;
1116
- align-items: center;
1117
- align-self: stretch;
813
+ .pf-v6-c-divider.pf-m-inset-xs {
814
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1118
815
  }
1119
816
 
1120
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
1121
- --pf-v6-c-check__input--TranslateY: 0;
1122
- align-self: center;
817
+ .pf-v6-c-divider.pf-m-inset-sm {
818
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1123
819
  }
1124
820
 
1125
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
1126
- border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
821
+ .pf-v6-c-divider.pf-m-inset-md {
822
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1127
823
  }
1128
824
 
1129
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
1130
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
825
+ .pf-v6-c-divider.pf-m-inset-lg {
826
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1131
827
  }
1132
828
 
1133
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
1134
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
1135
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
829
+ .pf-v6-c-divider.pf-m-inset-xl {
830
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1136
831
  }
1137
832
 
1138
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
1139
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
1140
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
833
+ .pf-v6-c-divider.pf-m-inset-2xl {
834
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1141
835
  }
1142
836
 
1143
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
1144
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
837
+ .pf-v6-c-divider.pf-m-inset-3xl {
838
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1145
839
  }
1146
840
 
1147
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
1148
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
841
+ @media (min-width: 36rem) {
842
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
843
+ flex-direction: row;
844
+ width: 100%;
845
+ height: var(--pf-v6-c-divider--Size);
846
+ }
1149
847
  }
1150
-
1151
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1152
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
1153
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
1154
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
848
+ @media (min-width: 36rem) {
849
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
850
+ flex-direction: column;
851
+ width: var(--pf-v6-c-divider--Size);
852
+ height: inherit;
853
+ }
854
+ }
855
+ @media (min-width: 36rem) {
856
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
857
+ --pf-v6-c-divider--before--FlexBasis: 100%;
858
+ }
859
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
860
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
861
+ }
862
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
863
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
864
+ }
865
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
866
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
867
+ }
868
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
869
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
870
+ }
871
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
872
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
873
+ }
874
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
875
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
876
+ }
877
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
878
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
879
+ }
1155
880
  }
1156
-
1157
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1158
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
1159
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
1160
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
881
+ @media (min-width: 48rem) {
882
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
883
+ flex-direction: row;
884
+ width: 100%;
885
+ height: var(--pf-v6-c-divider--Size);
886
+ }
1161
887
  }
1162
-
1163
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
1164
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
888
+ @media (min-width: 48rem) {
889
+ .pf-v6-c-divider.pf-m-vertical-on-md {
890
+ flex-direction: column;
891
+ width: var(--pf-v6-c-divider--Size);
892
+ height: inherit;
893
+ }
1165
894
  }
1166
-
1167
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
1168
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
1169
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
1170
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
895
+ @media (min-width: 48rem) {
896
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
897
+ --pf-v6-c-divider--before--FlexBasis: 100%;
898
+ }
899
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
900
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
901
+ }
902
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
903
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
904
+ }
905
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
906
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
907
+ }
908
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
909
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
910
+ }
911
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
912
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
913
+ }
914
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
915
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
916
+ }
917
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
918
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
919
+ }
1171
920
  }
1172
-
1173
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
1174
- content: none;
921
+ @media (min-width: 62rem) {
922
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
923
+ flex-direction: row;
924
+ width: 100%;
925
+ height: var(--pf-v6-c-divider--Size);
926
+ }
1175
927
  }
1176
-
1177
- .pf-v6-c-menu-toggle.pf-m-typeahead {
1178
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
1179
- --pf-v6-c-menu-toggle--Gap: 0;
1180
- align-items: stretch;
1181
- padding: 0;
928
+ @media (min-width: 62rem) {
929
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
930
+ flex-direction: column;
931
+ width: var(--pf-v6-c-divider--Size);
932
+ height: inherit;
933
+ }
1182
934
  }
1183
-
1184
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
1185
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
935
+ @media (min-width: 62rem) {
936
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
937
+ --pf-v6-c-divider--before--FlexBasis: 100%;
938
+ }
939
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
940
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
941
+ }
942
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
943
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
944
+ }
945
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
946
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
947
+ }
948
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
949
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
950
+ }
951
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
952
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
953
+ }
954
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
955
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
956
+ }
957
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
958
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
959
+ }
1186
960
  }
1187
-
1188
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
1189
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
1190
- display: flex;
1191
- align-items: stretch;
961
+ @media (min-width: 75rem) {
962
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
963
+ flex-direction: row;
964
+ width: 100%;
965
+ height: var(--pf-v6-c-divider--Size);
966
+ }
1192
967
  }
1193
-
1194
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
1195
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
1196
- flex: 1;
968
+ @media (min-width: 75rem) {
969
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
970
+ flex-direction: column;
971
+ width: var(--pf-v6-c-divider--Size);
972
+ height: inherit;
973
+ }
1197
974
  }
1198
-
1199
- .pf-v6-c-menu-toggle__button {
1200
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
1201
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
1202
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
1203
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
1204
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
1205
- color: inherit;
1206
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
1207
- border: 0;
975
+ @media (min-width: 75rem) {
976
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
977
+ --pf-v6-c-divider--before--FlexBasis: 100%;
978
+ }
979
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
980
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
981
+ }
982
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
983
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
984
+ }
985
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
986
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
987
+ }
988
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
989
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
990
+ }
991
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
992
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
993
+ }
994
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
995
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
996
+ }
997
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
998
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
999
+ }
1208
1000
  }
1209
-
1210
- .pf-v6-c-menu-toggle__button.pf-m-text {
1211
- display: inline-flex;
1212
- align-items: baseline;
1001
+ @media (min-width: 90.625rem) {
1002
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1003
+ flex-direction: row;
1004
+ width: 100%;
1005
+ height: var(--pf-v6-c-divider--Size);
1006
+ }
1213
1007
  }
1214
-
1215
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
1216
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
1217
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
1008
+ @media (min-width: 90.625rem) {
1009
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
1010
+ flex-direction: column;
1011
+ width: var(--pf-v6-c-divider--Size);
1012
+ height: inherit;
1013
+ }
1218
1014
  }
1219
-
1220
- .pf-v6-c-menu-toggle__text {
1221
- overflow: hidden;
1222
- text-overflow: ellipsis;
1223
- white-space: nowrap;
1224
- min-width: 0;
1015
+ @media (min-width: 90.625rem) {
1016
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1017
+ --pf-v6-c-divider--before--FlexBasis: 100%;
1018
+ }
1019
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1020
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1021
+ }
1022
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1023
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1024
+ }
1025
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1026
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1027
+ }
1028
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1029
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1030
+ }
1031
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1032
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1033
+ }
1034
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1035
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1036
+ }
1037
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1038
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1039
+ }
1040
+ }
1041
+ .pf-v6-c-text-input-group {
1042
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1043
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1044
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1045
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1046
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1047
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1048
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1049
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1050
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1051
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1052
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1053
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1054
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1055
+ --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));
1056
+ --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));
1057
+ --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));
1058
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1059
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1060
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1061
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1062
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1063
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1064
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1065
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1066
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1067
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1068
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1069
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1070
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1071
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1072
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1073
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1074
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1075
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1076
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1077
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1078
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1079
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1080
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1081
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1082
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1083
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1084
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1085
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1086
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1087
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1088
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1089
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1090
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1091
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1092
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1225
1093
  }
1226
1094
 
1227
- .pf-v6-c-menu-toggle__count {
1095
+ .pf-v6-c-text-input-group {
1096
+ position: relative;
1228
1097
  display: flex;
1229
- flex-wrap: nowrap;
1098
+ width: 100%;
1099
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1100
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1101
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1102
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1103
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1104
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1105
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1106
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1230
1107
  }
1231
1108
 
1232
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
1233
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
1234
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
1235
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
1236
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
1109
+ .pf-v6-c-text-input-group::before {
1110
+ position: absolute;
1111
+ inset: 0;
1112
+ pointer-events: none;
1113
+ content: "";
1114
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1115
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1116
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1117
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1118
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1237
1119
  }
1238
1120
 
1239
- .pf-v6-c-menu-toggle__icon {
1240
- flex-shrink: 0;
1241
- transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
1242
- transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
1243
- transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
1244
- rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
1121
+ .pf-v6-c-text-input-group.pf-m-disabled {
1122
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1123
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1124
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1125
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1126
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1127
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1128
+ pointer-events: none;
1245
1129
  }
1246
1130
 
1247
- .pf-v6-c-menu-toggle__icon :where(picture, img) {
1248
- vertical-align: middle;
1131
+ .pf-v6-c-text-input-group.pf-m-plain {
1132
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1249
1133
  }
1250
1134
 
1251
- .pf-v6-c-menu-toggle__controls {
1252
- display: flex;
1253
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
1254
- align-items: center;
1255
- justify-content: center;
1256
- margin-inline-start: auto;
1135
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1136
+ border: 0;
1257
1137
  }
1258
1138
 
1259
- .pf-v6-c-menu-toggle__toggle-icon {
1260
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
1261
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
1139
+ .pf-v6-c-text-input-group.pf-m-success {
1140
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1141
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1142
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1262
1143
  }
1263
1144
 
1264
- .pf-v6-c-menu-toggle__status-icon {
1265
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1145
+ .pf-v6-c-text-input-group.pf-m-warning {
1146
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1147
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1148
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1266
1149
  }
1267
1150
 
1268
- .pf-v6-c-label-group {
1269
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1270
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1271
- --pf-v6-c-label-group--MaxWidth: 100%;
1272
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1273
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1274
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1275
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1276
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1277
- --pf-v6-c-label-group__main--MinWidth: 0;
1278
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1279
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1280
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1281
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1282
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1283
- --pf-v6-c-label-group__list--MinWidth: 0;
1284
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1285
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1286
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1287
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1288
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1289
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1290
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1291
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1292
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1293
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1294
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1295
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1296
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1297
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1298
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1299
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1300
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1301
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1302
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1303
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1304
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1305
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1151
+ .pf-v6-c-text-input-group.pf-m-error {
1152
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1153
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1154
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1306
1155
  }
1307
1156
 
1308
- .pf-v6-c-label-group {
1309
- display: inline-flex;
1310
- row-gap: var(--pf-v6-c-label-group--RowGap);
1311
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1312
- align-items: center;
1313
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1157
+ @media (prefers-reduced-motion: no-preference) {
1158
+ .pf-v6-c-text-input-group.pf-m-error {
1159
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1160
+ animation-name: pf-v6-global-danger-jiggle-motion;
1161
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1162
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1163
+ animation-fill-mode: both;
1164
+ }
1314
1165
  }
1315
-
1316
- .pf-v6-c-label-group.pf-m-category {
1317
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1318
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1319
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1320
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1321
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1322
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1323
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1166
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1167
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1168
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1169
+ animation-name: pf-v6-global-fade-in;
1170
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1171
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1324
1172
  }
1325
1173
 
1326
- .pf-v6-c-label-group.pf-m-vertical {
1327
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1328
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1329
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1330
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1331
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1332
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1333
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1174
+ .pf-v6-c-text-input-group:hover {
1175
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1334
1176
  }
1335
1177
 
1336
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1337
- align-items: flex-start;
1178
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1179
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1338
1180
  }
1339
1181
 
1340
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1341
- flex-direction: column;
1342
- align-items: flex-start;
1343
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1182
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) .pf-v6-c-text-input-group__text {
1183
+ --pf-v6-c-text-input-group__text--Position: relative;
1344
1184
  }
1345
1185
 
1346
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1347
- flex-direction: column;
1348
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1186
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1187
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1188
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1349
1189
  }
1350
1190
 
1351
- .pf-v6-c-label-group.pf-m-editable,
1352
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1353
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1191
+ .pf-v6-c-text-input-group__main {
1354
1192
  display: flex;
1193
+ flex: 1;
1194
+ flex-wrap: wrap;
1195
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1196
+ min-width: 0;
1355
1197
  }
1356
1198
 
1357
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1358
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1359
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1360
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1361
- flex: 1;
1199
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1200
+ --pf-v6-c-text-input-group__text--Position: relative;
1201
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1202
+ display: inline-flex;
1203
+ align-items: center;
1204
+ justify-content: center;
1205
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1362
1206
  }
1363
1207
 
1364
- .pf-v6-c-label-group__main {
1365
- display: flex;
1208
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1209
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1210
+ }
1211
+
1212
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1213
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1214
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1215
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1216
+ }
1217
+
1218
+ .pf-v6-c-text-input-group__text {
1219
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1220
+ display: inline-grid;
1366
1221
  flex: 1;
1367
- flex-wrap: wrap;
1368
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1369
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1370
- align-items: baseline;
1371
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1222
+ grid-template-areas: "text-input";
1223
+ grid-template-columns: 1fr;
1372
1224
  }
1373
1225
 
1374
- .pf-v6-c-label-group__list {
1375
- display: inline-flex;
1376
- flex-wrap: wrap;
1377
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1378
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1379
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1226
+ .pf-v6-c-text-input-group__icon {
1227
+ position: absolute;
1228
+ inset-block-start: 50%;
1229
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1230
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1231
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1232
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1380
1233
  }
1381
1234
 
1382
- .pf-v6-c-label-group__list-item {
1383
- display: inline-flex;
1384
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1235
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1236
+ inset-inline-start: auto;
1237
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1238
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1385
1239
  }
1386
1240
 
1387
- .pf-v6-c-label-group__label {
1241
+ .pf-v6-c-text-input-group__text-input {
1388
1242
  overflow: hidden;
1389
1243
  text-overflow: ellipsis;
1390
1244
  white-space: nowrap;
1391
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1245
+ position: relative;
1246
+ width: 100%;
1247
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1248
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1249
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1250
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1251
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1252
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1253
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1254
+ border: 0;
1255
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1392
1256
  }
1393
1257
 
1394
- .pf-v6-c-label-group__close {
1395
- display: flex;
1396
- align-self: flex-start;
1258
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1259
+ grid-area: text-input;
1397
1260
  }
1398
1261
 
1399
- .pf-v6-c-label-group__close .pf-v6-c-button {
1400
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1401
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1402
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1403
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1404
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1262
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1263
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1264
+ }
1265
+
1266
+ .pf-v6-c-text-input-group__text-input::placeholder {
1267
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1405
1268
  }
1406
1269
 
1407
- .pf-v6-c-label-group__textarea {
1408
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1409
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1410
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1411
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1412
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1413
- white-space: nowrap;
1414
- resize: none;
1415
- border: 0;
1416
- -ms-overflow-style: none;
1417
- scrollbar-width: none;
1270
+ .pf-v6-c-text-input-group__utilities {
1271
+ display: flex;
1272
+ align-items: center;
1273
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1274
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1418
1275
  }
1419
1276
 
1420
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1421
- display: none;
1277
+ .pf-v6-c-text-input-group__utilities > * + * {
1278
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1279
+ }
1280
+
1281
+ .pf-v6-c-text-input-group__group {
1282
+ display: flex;
1422
1283
  }
1423
1284
 
1424
1285
  .pf-v6-c-label {
@@ -1428,10 +1289,11 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1428
1289
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1429
1290
  --pf-v6-c-label--MaxWidth: 100%;
1430
1291
  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
1431
- --pf-v6-c-label--BorderWidth: 0;
1432
- --pf-v6-c-label--BorderColor: transparent;
1292
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
1293
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
1433
1294
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1434
1295
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1296
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
1435
1297
  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1436
1298
  --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1437
1299
  --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
@@ -1554,8 +1416,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1554
1416
  --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
1555
1417
  --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
1556
1418
  --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
1557
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
1558
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
1419
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1420
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
1559
1421
  --pf-v6-c-label--m-clickable__content--Cursor: pointer;
1560
1422
  --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
1561
1423
  --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
@@ -1568,8 +1430,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1568
1430
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
1569
1431
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
1570
1432
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1433
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
1571
1434
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
1572
1435
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1436
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1573
1437
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
1574
1438
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
1575
1439
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -1590,15 +1454,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1590
1454
  --pf-v6-c-label__content--Cursor: initial;
1591
1455
  --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1592
1456
  --pf-v6-c-label__text--MaxWidth: 100%;
1593
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
1457
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
1594
1458
  --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1595
1459
  --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
1596
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
1597
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
1598
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1599
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1600
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1601
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1460
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
1461
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
1462
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
1463
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
1464
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
1465
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
1602
1466
  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
1603
1467
  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
1604
1468
  --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
@@ -1618,6 +1482,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1618
1482
 
1619
1483
  .pf-v6-c-label {
1620
1484
  position: relative;
1485
+ gap: var(--pf-v6-c-label--Gap);
1621
1486
  min-width: var(--pf-v6-c-label--MinWidth);
1622
1487
  max-width: var(--pf-v6-c-label--MaxWidth);
1623
1488
  padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
@@ -1838,11 +1703,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
1838
1703
  .pf-v6-c-label.pf-m-overflow {
1839
1704
  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
1840
1705
  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
1706
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
1841
1707
  }
1842
1708
 
1843
1709
  .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
1844
1710
  --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
1845
1711
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
1712
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
1846
1713
  }
1847
1714
 
1848
1715
  .pf-v6-c-label.pf-m-add {
@@ -1954,6 +1821,166 @@ input.pf-v6-c-label__content {
1954
1821
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1955
1822
  }
1956
1823
 
1824
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
1825
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
1826
+ }
1827
+
1828
+ .pf-v6-c-label-group {
1829
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1830
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1831
+ --pf-v6-c-label-group--MaxWidth: 100%;
1832
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1833
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1834
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1835
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1836
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
1837
+ --pf-v6-c-label-group__main--MinWidth: 0;
1838
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1839
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1840
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1841
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1842
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
1843
+ --pf-v6-c-label-group__list--MinWidth: 0;
1844
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1845
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1846
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1847
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1848
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1849
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1850
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1851
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1852
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1853
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1854
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1855
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
1856
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1857
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1858
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1859
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1860
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1861
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1862
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1863
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1864
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1865
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1866
+ }
1867
+
1868
+ .pf-v6-c-label-group {
1869
+ display: inline-flex;
1870
+ row-gap: var(--pf-v6-c-label-group--RowGap);
1871
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
1872
+ align-items: center;
1873
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
1874
+ }
1875
+
1876
+ .pf-v6-c-label-group.pf-m-category {
1877
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1878
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1879
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1880
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1881
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1882
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1883
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1884
+ }
1885
+
1886
+ .pf-v6-c-label-group.pf-m-vertical {
1887
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1888
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1889
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1890
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1891
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1892
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1893
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1894
+ }
1895
+
1896
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1897
+ align-items: flex-start;
1898
+ }
1899
+
1900
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1901
+ flex-direction: column;
1902
+ align-items: flex-start;
1903
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1904
+ }
1905
+
1906
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1907
+ flex-direction: column;
1908
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1909
+ }
1910
+
1911
+ .pf-v6-c-label-group.pf-m-editable,
1912
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1913
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1914
+ display: flex;
1915
+ }
1916
+
1917
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1918
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1919
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1920
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1921
+ flex: 1;
1922
+ }
1923
+
1924
+ .pf-v6-c-label-group__main {
1925
+ display: flex;
1926
+ flex: 1;
1927
+ flex-wrap: wrap;
1928
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
1929
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1930
+ align-items: baseline;
1931
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
1932
+ }
1933
+
1934
+ .pf-v6-c-label-group__list {
1935
+ display: inline-flex;
1936
+ flex-wrap: wrap;
1937
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
1938
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1939
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
1940
+ }
1941
+
1942
+ .pf-v6-c-label-group__list-item {
1943
+ display: inline-flex;
1944
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1945
+ }
1946
+
1947
+ .pf-v6-c-label-group__label {
1948
+ overflow: hidden;
1949
+ text-overflow: ellipsis;
1950
+ white-space: nowrap;
1951
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1952
+ }
1953
+
1954
+ .pf-v6-c-label-group__close {
1955
+ display: flex;
1956
+ align-self: flex-start;
1957
+ }
1958
+
1959
+ .pf-v6-c-label-group__close .pf-v6-c-button {
1960
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1961
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1962
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1963
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1964
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1965
+ }
1966
+
1967
+ .pf-v6-c-label-group__textarea {
1968
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1969
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1970
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1971
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1972
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1973
+ white-space: nowrap;
1974
+ resize: none;
1975
+ border: 0;
1976
+ -ms-overflow-style: none;
1977
+ scrollbar-width: none;
1978
+ }
1979
+
1980
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1981
+ display: none;
1982
+ }
1983
+
1957
1984
  .pf-v6-c-button {
1958
1985
  --pf-v6-c-button--Display: inline-flex;
1959
1986
  --pf-v6-c-button--AlignItems: baseline;
@@ -1981,6 +2008,7 @@ input.pf-v6-c-label__content {
1981
2008
  --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
1982
2009
  --pf-v6-c-button--ScaleX: 1;
1983
2010
  --pf-v6-c-button--ScaleY: 1;
2011
+ --pf-v6-c-button--border--offset: 0;
1984
2012
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1985
2013
  --pf-v6-c-button--hover--BorderColor: transparent;
1986
2014
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -2044,6 +2072,12 @@ input.pf-v6-c-label__content {
2044
2072
  --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
2045
2073
  --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2046
2074
  --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2075
+ --pf-v6-c-button--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2076
+ --pf-v6-c-button--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
2077
+ --pf-v6-c-button--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2078
+ --pf-v6-c-button--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
2079
+ --pf-v6-c-button--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
2080
+ --pf-v6-c-button--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2047
2081
  --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
2048
2082
  --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2049
2083
  --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -2094,6 +2128,12 @@ input.pf-v6-c-label__content {
2094
2128
  --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
2095
2129
  --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2096
2130
  --pf-v6-c-button--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2131
+ --pf-v6-c-button--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2132
+ --pf-v6-c-button--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
2133
+ --pf-v6-c-button--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2134
+ --pf-v6-c-button--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
2135
+ --pf-v6-c-button--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
2136
+ --pf-v6-c-button--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
2097
2137
  --pf-v6-c-button--m-plain--m-no-padding--MinWidth: auto;
2098
2138
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: 0;
2099
2139
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
@@ -2106,7 +2146,7 @@ input.pf-v6-c-label__content {
2106
2146
  --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2107
2147
  --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
2108
2148
  --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
2109
- --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
2149
+ --pf-v6-c-button--m-plain--m-no-padding--border--offset: calc(0.125rem * -1);
2110
2150
  --pf-v6-c-button--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
2111
2151
  --pf-v6-c-button--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2112
2152
  --pf-v6-c-button--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -2241,7 +2281,7 @@ input.pf-v6-c-label__content {
2241
2281
  --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2242
2282
  --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
2243
2283
  --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
2244
- --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
2284
+ --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
2245
2285
  --pf-v6-c-button--m-block--Display: flex;
2246
2286
  --pf-v6-c-button--m-block--Width: 100%;
2247
2287
  --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -2298,7 +2338,7 @@ input.pf-v6-c-label__content {
2298
2338
 
2299
2339
  .pf-v6-c-button::after {
2300
2340
  position: absolute;
2301
- inset: 0;
2341
+ inset: var(--pf-v6-c-button--border--offset);
2302
2342
  pointer-events: none;
2303
2343
  content: "";
2304
2344
  border: var(--pf-v6-c-button--BorderWidth) solid;
@@ -2368,6 +2408,12 @@ input.pf-v6-c-label__content {
2368
2408
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--PaddingInlineEnd);
2369
2409
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--PaddingInlineStart);
2370
2410
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-link--Color);
2411
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-link--BorderWidth);
2412
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-link--hover--BorderColor);
2413
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-link--hover--BorderWidth);
2414
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-link--m-clicked--BorderColor);
2415
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-link--m-clicked--BorderWidth);
2416
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-link--BorderColor);
2371
2417
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-link--BorderRadius);
2372
2418
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-link--BackgroundColor);
2373
2419
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-link__icon--Color);
@@ -2408,6 +2454,9 @@ input.pf-v6-c-label__content {
2408
2454
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2409
2455
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2410
2456
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
2457
+ --pf-v6-c-button--BorderWidth: 0;
2458
+ --pf-v6-c-button--hover--BorderWidth: 0;
2459
+ --pf-v6-c-button--m-clicked--BorderWidth: 0;
2411
2460
  text-align: start;
2412
2461
  white-space: normal;
2413
2462
  background: transparent;
@@ -2525,6 +2574,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2525
2574
  }
2526
2575
 
2527
2576
  .pf-v6-c-button.pf-m-plain {
2577
+ --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
2578
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
2579
+ --pf-v6-c-button--hover--BorderWidth: var(--pf-v6-c-button--m-plain--hover--BorderWidth);
2580
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-plain--m-clicked--BorderColor);
2581
+ --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-plain--m-clicked--BorderWidth);
2582
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-plain--BorderColor);
2528
2583
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-plain--BorderRadius);
2529
2584
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-plain--Color);
2530
2585
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain__icon--Color);
@@ -2554,6 +2609,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2554
2609
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
2555
2610
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
2556
2611
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
2612
+ --pf-v6-c-button--border--offset: var(--pf-v6-c-button--m-plain--m-no-padding--border--offset);
2557
2613
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2558
2614
  background: var(--pf-v6-c-button--BackgroundColor);
2559
2615
  }
@@ -2657,6 +2713,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2657
2713
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2658
2714
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2659
2715
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2716
+ outline-offset: var(--pf-t--global--focus-ring--position--offset);
2660
2717
  }
2661
2718
 
2662
2719
  .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
@@ -2828,6 +2885,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2828
2885
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
2829
2886
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
2830
2887
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
2888
+ --pf-v6-c-menu--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
2889
+ --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
2831
2890
  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
2832
2891
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
2833
2892
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
@@ -2848,6 +2907,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2848
2907
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
2849
2908
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
2850
2909
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2910
+ --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
2911
+ --pf-v6-c-menu__list-item--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
2912
+ --pf-v6-c-menu__list-item--BorderColor: var(--pf-t--global--border--color--high-contrast);
2851
2913
  --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
2852
2914
  --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2853
2915
  --pf-v6-c-menu__list-item--TransitionProperty: background-color;
@@ -3024,6 +3086,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3024
3086
  --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
3025
3087
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
3026
3088
  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
3089
+ --pf-v6-c-menu__list-item--hover--BorderColor: transparent;
3027
3090
  }
3028
3091
 
3029
3092
  .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
@@ -3050,6 +3113,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3050
3113
  overflow: hidden;
3051
3114
  color: var(--pf-v6-c-menu--Color);
3052
3115
  background-color: var(--pf-v6-c-menu--BackgroundColor);
3116
+ border: var(--pf-v6-c-menu--BorderWidth) solid var(--pf-v6-c-menu--BorderColor);
3053
3117
  border-radius: var(--pf-v6-c-menu--BorderRadius);
3054
3118
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
3055
3119
  transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
@@ -3104,6 +3168,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3104
3168
 
3105
3169
  .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
3106
3170
  padding: 0;
3171
+ border: 0;
3107
3172
  }
3108
3173
 
3109
3174
  .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
@@ -3269,6 +3334,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3269
3334
  inset: 0;
3270
3335
  content: "";
3271
3336
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
3337
+ border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
3338
+ border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
3272
3339
  transition: inherit;
3273
3340
  }
3274
3341
 
@@ -3300,6 +3367,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3300
3367
 
3301
3368
  .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
3302
3369
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
3370
+ --pf-v6-c-menu__list-item--BorderWidth: var(--pf-v6-c-menu__list-item--hover--BorderWidth);
3303
3371
  }
3304
3372
 
3305
3373
  .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
@@ -3485,122 +3553,93 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3485
3553
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3486
3554
  }
3487
3555
 
3488
- .pf-v6-c-breadcrumb {
3489
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3490
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3491
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3492
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3493
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3494
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3495
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3496
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3497
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3498
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3499
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3500
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3501
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3502
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3503
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3504
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3505
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3506
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3507
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3508
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3509
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3510
- }
3511
-
3512
- .pf-v6-c-breadcrumb {
3513
- display: inline-flex;
3514
- }
3515
-
3516
- .pf-v6-c-breadcrumb__list {
3517
- display: flex;
3518
- flex-wrap: wrap;
3519
- align-items: center;
3520
- }
3521
-
3522
- .pf-v6-c-breadcrumb__item {
3523
- display: flex;
3524
- align-items: baseline;
3525
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3526
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3527
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3528
- white-space: nowrap;
3529
- list-style: none;
3530
- }
3531
-
3532
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3533
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3534
- }
3535
-
3536
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3537
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3538
- }
3539
-
3540
- .pf-v6-c-breadcrumb__item-divider {
3541
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3542
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3543
- line-height: 1;
3544
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3556
+ .pf-v6-c-spinner {
3557
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3558
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3559
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3560
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3561
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3562
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3563
+ --pf-v6-c-spinner--StrokeWidth: 10;
3564
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3565
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3566
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3567
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3568
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3569
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3570
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3571
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3545
3572
  }
3546
3573
 
3547
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3548
- scale: -1 1;
3574
+ .pf-v6-c-spinner {
3575
+ width: var(--pf-v6-c-spinner--Width);
3576
+ height: var(--pf-v6-c-spinner--Height);
3577
+ overflow: hidden;
3578
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3549
3579
  }
3550
3580
 
3551
- .pf-v6-c-breadcrumb__link {
3552
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3553
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3554
- font-size: inherit;
3555
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3556
- line-height: inherit;
3557
- color: var(--pf-v6-c-breadcrumb__link--Color);
3558
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3559
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3560
- word-break: break-word;
3561
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3581
+ .pf-v6-c-spinner.pf-m-inline {
3582
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3562
3583
  }
3563
3584
 
3564
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3565
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3566
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3567
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3585
+ .pf-v6-c-spinner.pf-m-xs {
3586
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3587
+ --pf-v6-c-spinner--StrokeWidth: 15;
3568
3588
  }
3569
3589
 
3570
- .pf-v6-c-breadcrumb__link.pf-m-current {
3571
- cursor: default;
3590
+ .pf-v6-c-spinner.pf-m-sm {
3591
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3572
3592
  }
3573
3593
 
3574
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3575
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3576
- text-decoration-line: none;
3594
+ .pf-v6-c-spinner.pf-m-md {
3595
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3577
3596
  }
3578
3597
 
3579
- button.pf-v6-c-breadcrumb__link {
3580
- border: none;
3598
+ .pf-v6-c-spinner.pf-m-lg {
3599
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3581
3600
  }
3582
3601
 
3583
- .pf-v6-c-breadcrumb__dropdown {
3584
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3585
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3586
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3587
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3602
+ .pf-v6-c-spinner.pf-m-xl {
3603
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3588
3604
  }
3589
3605
 
3590
- .pf-v6-c-breadcrumb__heading {
3591
- display: inline;
3592
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3606
+ .pf-v6-c-spinner__path {
3607
+ width: 100%;
3608
+ height: 100%;
3609
+ stroke: var(--pf-v6-c-spinner--Color);
3610
+ stroke-dasharray: 283;
3611
+ stroke-dashoffset: 280;
3612
+ stroke-linecap: round;
3613
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3614
+ transform-origin: 50% 50%;
3615
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3593
3616
  }
3594
3617
 
3595
- .pf-v6-c-breadcrumb__link,
3596
- .pf-v6-c-breadcrumb__heading {
3597
- white-space: normal;
3618
+ @keyframes pf-v6-c-spinner-animation-rotate {
3619
+ 0% {
3620
+ transform: rotate(0deg);
3621
+ }
3622
+ 100% {
3623
+ transform: rotate(360deg);
3624
+ }
3598
3625
  }
3599
-
3600
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3601
- display: none;
3626
+ @keyframes pf-v6-c-spinner-animation-dash {
3627
+ 0% {
3628
+ stroke-dashoffset: 280;
3629
+ transform: rotate(0);
3630
+ }
3631
+ 15% {
3632
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3633
+ }
3634
+ 40% {
3635
+ stroke-dasharray: 220;
3636
+ stroke-dashoffset: 150;
3637
+ }
3638
+ 100% {
3639
+ stroke-dashoffset: 280;
3640
+ transform: rotate(720deg);
3641
+ }
3602
3642
  }
3603
-
3604
3643
  .pf-v6-c-tooltip {
3605
3644
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3606
3645
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -3732,90 +3771,118 @@ button.pf-v6-c-breadcrumb__link {
3732
3771
  transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
3733
3772
  }
3734
3773
 
3735
- .pf-v6-c-spinner {
3736
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3737
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3738
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3739
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3740
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3741
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3742
- --pf-v6-c-spinner--StrokeWidth: 10;
3743
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3744
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3745
- --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3746
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3747
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3748
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3749
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3750
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3774
+ .pf-v6-c-breadcrumb {
3775
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3776
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3777
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3778
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3779
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3780
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3781
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3782
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3783
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3784
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3785
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3786
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3787
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3788
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3789
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3790
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3791
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3792
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3793
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3794
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3795
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3751
3796
  }
3752
3797
 
3753
- .pf-v6-c-spinner {
3754
- width: var(--pf-v6-c-spinner--Width);
3755
- height: var(--pf-v6-c-spinner--Height);
3756
- overflow: hidden;
3757
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3798
+ .pf-v6-c-breadcrumb {
3799
+ display: inline-flex;
3758
3800
  }
3759
3801
 
3760
- .pf-v6-c-spinner.pf-m-inline {
3761
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3802
+ .pf-v6-c-breadcrumb__list {
3803
+ display: flex;
3804
+ flex-wrap: wrap;
3805
+ align-items: center;
3762
3806
  }
3763
3807
 
3764
- .pf-v6-c-spinner.pf-m-xs {
3765
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3766
- --pf-v6-c-spinner--StrokeWidth: 15;
3808
+ .pf-v6-c-breadcrumb__item {
3809
+ display: flex;
3810
+ align-items: baseline;
3811
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3812
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3813
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3814
+ white-space: nowrap;
3815
+ list-style: none;
3767
3816
  }
3768
3817
 
3769
- .pf-v6-c-spinner.pf-m-sm {
3770
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3818
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3819
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3771
3820
  }
3772
3821
 
3773
- .pf-v6-c-spinner.pf-m-md {
3774
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3822
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3823
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3775
3824
  }
3776
3825
 
3777
- .pf-v6-c-spinner.pf-m-lg {
3778
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3826
+ .pf-v6-c-breadcrumb__item-divider {
3827
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3828
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3829
+ line-height: 1;
3830
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3779
3831
  }
3780
3832
 
3781
- .pf-v6-c-spinner.pf-m-xl {
3782
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3833
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3834
+ scale: -1 1;
3783
3835
  }
3784
3836
 
3785
- .pf-v6-c-spinner__path {
3786
- width: 100%;
3787
- height: 100%;
3788
- stroke: var(--pf-v6-c-spinner--Color);
3789
- stroke-dasharray: 283;
3790
- stroke-dashoffset: 280;
3791
- stroke-linecap: round;
3792
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3793
- transform-origin: 50% 50%;
3794
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3837
+ .pf-v6-c-breadcrumb__link {
3838
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3839
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3840
+ font-size: inherit;
3841
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3842
+ line-height: inherit;
3843
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3844
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3845
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3846
+ word-break: break-word;
3847
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3795
3848
  }
3796
3849
 
3797
- @keyframes pf-v6-c-spinner-animation-rotate {
3798
- 0% {
3799
- transform: rotate(0deg);
3800
- }
3801
- 100% {
3802
- transform: rotate(360deg);
3803
- }
3850
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3851
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3852
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3853
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3804
3854
  }
3805
- @keyframes pf-v6-c-spinner-animation-dash {
3806
- 0% {
3807
- stroke-dashoffset: 280;
3808
- transform: rotate(0);
3809
- }
3810
- 15% {
3811
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3812
- }
3813
- 40% {
3814
- stroke-dasharray: 220;
3815
- stroke-dashoffset: 150;
3816
- }
3817
- 100% {
3818
- stroke-dashoffset: 280;
3819
- transform: rotate(720deg);
3820
- }
3855
+
3856
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3857
+ cursor: default;
3858
+ }
3859
+
3860
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3861
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3862
+ text-decoration-line: none;
3863
+ }
3864
+
3865
+ button.pf-v6-c-breadcrumb__link {
3866
+ border: none;
3867
+ }
3868
+
3869
+ .pf-v6-c-breadcrumb__dropdown {
3870
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3871
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3872
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3873
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3874
+ }
3875
+
3876
+ .pf-v6-c-breadcrumb__heading {
3877
+ display: inline;
3878
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3879
+ }
3880
+
3881
+ .pf-v6-c-breadcrumb__link,
3882
+ .pf-v6-c-breadcrumb__heading {
3883
+ white-space: normal;
3884
+ }
3885
+
3886
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3887
+ display: none;
3821
3888
  }