@patternfly/react-templates 6.3.0-prerelease.8 → 6.3.0

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 (18) hide show
  1. package/CHANGELOG.md +112 -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/esm/components/Select/MultiTypeaheadSelect.d.ts +2 -0
  6. package/dist/esm/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  7. package/dist/esm/components/Select/MultiTypeaheadSelect.js +5 -4
  8. package/dist/esm/components/Select/MultiTypeaheadSelect.js.map +1 -1
  9. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts +2 -0
  10. package/dist/js/components/Select/MultiTypeaheadSelect.d.ts.map +1 -1
  11. package/dist/js/components/Select/MultiTypeaheadSelect.js +5 -4
  12. package/dist/js/components/Select/MultiTypeaheadSelect.js.map +1 -1
  13. package/dist/umd/assets/{output-73TXTHJ1.css → output-P0zYUNwl.css} +1956 -1726
  14. package/dist/umd/react-templates.min.js +1 -1
  15. package/package.json +6 -6
  16. package/src/components/Select/MultiTypeaheadSelect.tsx +8 -4
  17. package/src/components/Select/__tests__/MultiTypeaheadSelect.test.tsx +31 -1
  18. package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap +2 -2
package/dist/umd/assets/{output-73TXTHJ1.css → output-P0zYUNwl.css} RENAMED
@@ -3,248 +3,565 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-label-group {
7
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
8
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
9
- --pf-v6-c-label-group--MaxWidth: 100%;
10
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
11
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
12
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
13
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
14
- --pf-v6-c-label-group__main--MaxWidth: 100%;
15
- --pf-v6-c-label-group__main--MinWidth: 0;
16
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
17
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
19
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
20
- --pf-v6-c-label-group__list--MaxWidth: 100%;
21
- --pf-v6-c-label-group__list--MinWidth: 0;
22
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
23
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
25
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
26
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
27
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
28
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
29
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
30
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
31
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
32
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
34
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
35
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
36
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
38
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
39
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
40
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
41
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
42
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
43
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
6
+ .pf-v6-c-menu-toggle {
7
+ --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
8
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
9
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
10
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
11
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
12
+ --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
13
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
14
+ --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
15
+ --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
16
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
17
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
18
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
19
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
20
+ --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
21
+ --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22
+ --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
23
+ --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
24
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
25
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
26
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
27
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
28
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
29
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
30
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
31
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
32
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
33
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
34
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
35
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
36
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
37
+ --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
38
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
39
+ --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
40
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
41
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
42
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
43
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
44
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
45
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
46
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
47
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
48
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
49
+ --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
50
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
51
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
52
+ --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
53
+ --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
54
+ --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
55
+ --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
56
+ --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
57
+ --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
58
+ --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
59
+ --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
60
+ --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
61
+ --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
62
+ --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
63
+ --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
64
+ --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
65
+ --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
66
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
67
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
68
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
69
+ --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
70
+ --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
71
+ --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
72
+ --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
73
+ --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
74
+ --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
75
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
76
+ --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
77
+ --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
78
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
79
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
80
+ --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
81
+ --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
82
+ --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
83
+ --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
84
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
85
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
86
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
87
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
88
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
89
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
90
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
91
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
92
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
93
+ --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
94
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
95
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
96
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
97
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
98
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
99
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
100
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
101
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
102
+ --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
103
+ --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
104
+ --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
105
+ --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
106
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
107
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
108
+ --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
109
+ --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
110
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
111
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
112
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
113
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
114
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
115
+ --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
116
+ --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
117
+ --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
118
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
119
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
120
+ --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
121
+ --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
122
+ --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
123
+ --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
124
+ --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
125
+ --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
126
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
127
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
128
+ --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
129
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
130
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
131
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
132
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
133
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
134
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
135
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
136
+ --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
137
+ --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
138
+ --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
139
+ --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
140
+ --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
141
+ --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
142
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
143
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
144
+ --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
145
+ --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
146
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
147
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
148
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
149
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
150
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
44
151
  }
45
152
 
46
- .pf-v6-c-label-group {
153
+ .pf-v6-c-menu-toggle {
154
+ position: relative;
47
155
  display: inline-flex;
48
- row-gap: var(--pf-v6-c-label-group--RowGap);
49
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
156
+ gap: var(--pf-v6-c-menu-toggle--Gap);
50
157
  align-items: center;
51
- max-width: var(--pf-v6-c-label-group--MaxWidth);
52
- }
53
-
54
- .pf-v6-c-label-group.pf-m-category {
55
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
56
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
57
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
58
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
59
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
60
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
61
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
62
- }
63
-
64
- .pf-v6-c-label-group.pf-m-vertical {
65
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
66
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
67
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
68
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
69
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
70
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
71
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
158
+ justify-content: center;
159
+ min-width: var(--pf-v6-c-menu-toggle--MinWidth);
160
+ max-width: 100%;
161
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
162
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
163
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
164
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
165
+ font-size: var(--pf-v6-c-menu-toggle--FontSize);
166
+ line-height: var(--pf-v6-c-menu-toggle--LineHeight);
167
+ color: var(--pf-v6-c-menu-toggle--Color);
168
+ cursor: pointer;
169
+ background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
170
+ border: 0;
171
+ transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
172
+ transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
173
+ transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
72
174
  }
73
175
 
74
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
75
- align-items: flex-start;
176
+ .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
177
+ border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
76
178
  }
77
179
 
78
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
79
- flex-direction: column;
80
- align-items: flex-start;
81
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
180
+ .pf-v6-c-menu-toggle::before {
181
+ position: absolute;
182
+ inset-block-start: 0;
183
+ inset-block-end: 0;
184
+ inset-inline-start: 0;
185
+ inset-inline-end: 0;
186
+ z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
187
+ pointer-events: none;
188
+ content: "";
189
+ border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
190
+ transition: inherit;
82
191
  }
83
192
 
84
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
85
- flex-direction: column;
86
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
193
+ .pf-v6-c-menu-toggle.pf-m-primary {
194
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
195
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
196
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
197
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
198
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
199
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
200
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
201
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
202
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
203
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
204
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
205
+ --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
206
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
207
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
208
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
209
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
210
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
87
211
  }
88
212
 
89
- .pf-v6-c-label-group.pf-m-editable,
90
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
91
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
92
- display: flex;
213
+ .pf-v6-c-menu-toggle.pf-m-secondary {
214
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
215
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
216
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
217
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
218
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
219
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
220
+ --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
221
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
222
+ --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
223
+ --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
224
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
225
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
226
+ --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
227
+ --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
228
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
229
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
230
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
93
231
  }
94
232
 
95
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
96
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
97
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
98
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
99
- flex: 1;
233
+ .pf-v6-c-menu-toggle.pf-m-full-height {
234
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
235
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
236
+ --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
237
+ align-items: center;
238
+ height: 100%;
100
239
  }
101
240
 
102
- .pf-v6-c-label-group__main {
103
- display: flex;
104
- flex: 1;
105
- flex-wrap: wrap;
106
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
107
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
108
- align-items: baseline;
109
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
241
+ .pf-v6-c-menu-toggle.pf-m-full-width {
242
+ width: 100%;
110
243
  }
111
244
 
112
- .pf-v6-c-label-group__list {
113
- display: inline-flex;
114
- flex-wrap: wrap;
115
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
116
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
117
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
245
+ .pf-v6-c-menu-toggle.pf-m-plain {
246
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
247
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
248
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
249
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
250
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
251
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
252
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
253
+ --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
254
+ --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
255
+ --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
256
+ --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
257
+ --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
258
+ --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
259
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
260
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
118
261
  }
119
262
 
120
- .pf-v6-c-label-group__list-item {
121
- display: inline-flex;
122
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
263
+ .pf-v6-c-menu-toggle.pf-m-plain::before {
264
+ border: none;
123
265
  }
124
266
 
125
- .pf-v6-c-label-group__label {
126
- overflow: hidden;
127
- text-overflow: ellipsis;
128
- white-space: nowrap;
129
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
267
+ .pf-v6-c-menu-toggle:is(:hover, :focus) {
268
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
269
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
270
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
271
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
272
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
273
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
274
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
275
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
276
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
130
277
  }
131
278
 
132
- .pf-v6-c-label-group__close {
133
- display: flex;
134
- align-self: flex-start;
279
+ .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
280
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
281
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
282
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
283
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
284
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
135
285
  }
136
286
 
137
- .pf-v6-c-label-group__close .pf-v6-c-button {
138
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
139
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
140
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
141
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
142
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
287
+ .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
288
+ border: 0;
143
289
  }
144
290
 
145
- .pf-v6-c-label-group__textarea {
146
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
147
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
148
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
149
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
150
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
151
- white-space: nowrap;
152
- resize: none;
153
- border: 0;
154
- -ms-overflow-style: none;
155
- scrollbar-width: none;
291
+ .pf-v6-c-menu-toggle.pf-m-small {
292
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
293
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
294
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
295
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
296
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
297
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
298
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
299
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
156
300
  }
157
301
 
158
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
- display: none;
302
+ .pf-v6-c-menu-toggle.pf-m-success {
303
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
304
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
160
305
  }
161
306
 
162
- .pf-v6-c-check {
163
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
164
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
165
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
166
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
167
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
168
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
169
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
170
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
171
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
172
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
173
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
174
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
175
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
176
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
307
+ .pf-v6-c-menu-toggle.pf-m-warning {
308
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
309
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
177
310
  }
178
311
 
179
- .pf-v6-c-check {
180
- display: grid;
181
- grid-template-columns: auto 1fr;
182
- grid-gap: var(--pf-v6-c-check--GridGap);
183
- accent-color: var(--pf-v6-c-check--AccentColor);
312
+ .pf-v6-c-menu-toggle.pf-m-danger {
313
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
314
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
184
315
  }
185
316
 
186
- .pf-v6-c-check.pf-m-standalone {
187
- display: inline-grid;
188
- grid-template-columns: auto;
189
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
317
+ @media screen and (prefers-reduced-motion: no-preference) {
318
+ .pf-v6-c-menu-toggle.pf-m-danger {
319
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
320
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
321
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
322
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
323
+ animation-fill-mode: both;
324
+ }
325
+ }
326
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
327
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
328
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
329
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
190
330
  }
191
331
 
192
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
193
- align-self: center;
194
- transform: none;
332
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
333
+ from {
334
+ opacity: 0;
335
+ }
336
+ to {
337
+ opacity: 1;
338
+ }
339
+ }
340
+ .pf-v6-c-menu-toggle.pf-m-settings {
341
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
342
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
343
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
344
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
345
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
346
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
347
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
195
348
  }
196
349
 
197
- .pf-v6-c-check__input {
198
- align-self: start;
199
- font-size: var(--pf-v6-c-check__label--FontSize);
200
- line-height: var(--pf-v6-c-check__label--LineHeight);
201
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
350
+ .pf-v6-c-menu-toggle.pf-m-placeholder {
351
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
202
352
  }
203
353
 
204
- .pf-v6-c-check__label {
205
- font-size: var(--pf-v6-c-check__label--FontSize);
206
- font-weight: var(--pf-v6-c-check__label--FontWeight);
207
- line-height: var(--pf-v6-c-check__label--LineHeight);
208
- color: var(--pf-v6-c-check__label--Color);
354
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
355
+ --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
356
+ --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
357
+ --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
358
+ --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
359
+ --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
209
360
  }
210
361
 
211
- .pf-v6-c-check__description {
212
- grid-column: 2;
213
- font-size: var(--pf-v6-c-check__description--FontSize);
214
- color: var(--pf-v6-c-check__description--Color);
362
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
363
+ .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
364
+ pointer-events: none;
215
365
  }
216
366
 
217
- .pf-v6-c-check__body {
218
- grid-column: 2;
367
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
368
+ syntax: "<length>";
369
+ inherits: false;
370
+ initial-value: 0;
371
+ }
372
+ @media (prefers-reduced-motion: no-preference) {
373
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
374
+ 33% {
375
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
376
+ }
377
+ 66% {
378
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
379
+ }
380
+ }
381
+ }
382
+ .pf-v6-c-menu-toggle.pf-m-split-button {
383
+ --pf-v6-c-menu-toggle--Gap: 0;
384
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
385
+ padding: 0;
219
386
  }
220
387
 
221
- .pf-v6-c-check__label,
222
- .pf-v6-c-check__input {
223
- justify-self: start;
388
+ .pf-v6-c-menu-toggle.pf-m-split-button > * {
389
+ position: relative;
390
+ padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
391
+ padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
392
+ padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
393
+ padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
224
394
  }
225
395
 
226
- label.pf-v6-c-check, .pf-v6-c-check__label,
227
- .pf-v6-c-check__input {
228
- cursor: pointer;
396
+ .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
397
+ border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
398
+ border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
229
399
  }
230
400
 
231
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
232
- .pf-v6-c-check__input:disabled,
233
- .pf-v6-c-check__input.pf-m-disabled {
234
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
235
- cursor: not-allowed;
401
+ .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
402
+ border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
403
+ border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
236
404
  }
237
405
 
238
- .pf-v6-c-check__label-required {
239
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
240
- font-size: var(--pf-v6-c-check__label-required--FontSize);
241
- color: var(--pf-v6-c-check__label-required--Color);
406
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
407
+ --pf-v6-c-check__label--Color: currentcolor;
408
+ --pf-v6-c-check__label--disabled--Color: currentcolor;
409
+ align-items: center;
410
+ align-self: stretch;
242
411
  }
243
412
 
244
- .pf-v6-c-text-input-group {
245
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
246
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
247
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
413
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
414
+ --pf-v6-c-check__input--TranslateY: 0;
415
+ align-self: center;
416
+ }
417
+
418
+ .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
419
+ border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
420
+ }
421
+
422
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
423
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
424
+ }
425
+
426
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
427
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
428
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
429
+ }
430
+
431
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
432
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
433
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
434
+ }
435
+
436
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
437
+ --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
438
+ }
439
+
440
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
441
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
442
+ }
443
+
444
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
445
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
446
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
447
+ padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
448
+ }
449
+
450
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
451
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
452
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
453
+ padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
454
+ }
455
+
456
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
457
+ --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
458
+ }
459
+
460
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
461
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
462
+ color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
463
+ background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
464
+ }
465
+
466
+ .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
467
+ content: none;
468
+ }
469
+
470
+ .pf-v6-c-menu-toggle.pf-m-typeahead {
471
+ --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
472
+ --pf-v6-c-menu-toggle--Gap: 0;
473
+ align-items: stretch;
474
+ padding: 0;
475
+ }
476
+
477
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
478
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
479
+ }
480
+
481
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
482
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
483
+ display: flex;
484
+ align-items: stretch;
485
+ }
486
+
487
+ .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
488
+ --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
489
+ flex: 1;
490
+ }
491
+
492
+ .pf-v6-c-menu-toggle__button {
493
+ gap: var(--pf-v6-c-menu-toggle__button--Gap);
494
+ align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
495
+ min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
496
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
497
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
498
+ color: inherit;
499
+ background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
500
+ border: 0;
501
+ }
502
+
503
+ .pf-v6-c-menu-toggle__button.pf-m-text {
504
+ display: inline-flex;
505
+ align-items: baseline;
506
+ }
507
+
508
+ .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
509
+ padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
510
+ padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
511
+ }
512
+
513
+ .pf-v6-c-menu-toggle__text {
514
+ overflow: hidden;
515
+ text-overflow: ellipsis;
516
+ white-space: nowrap;
517
+ min-width: 0;
518
+ }
519
+
520
+ .pf-v6-c-menu-toggle__count {
521
+ display: flex;
522
+ flex-wrap: nowrap;
523
+ }
524
+
525
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
526
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
527
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
528
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
529
+ margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
530
+ }
531
+
532
+ .pf-v6-c-menu-toggle__icon {
533
+ flex-shrink: 0;
534
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
535
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
536
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
537
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
538
+ }
539
+
540
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
541
+ vertical-align: middle;
542
+ }
543
+
544
+ .pf-v6-c-menu-toggle__controls {
545
+ display: flex;
546
+ gap: var(--pf-v6-c-menu-toggle__controls--Gap);
547
+ align-items: center;
548
+ justify-content: center;
549
+ margin-inline-start: auto;
550
+ }
551
+
552
+ .pf-v6-c-menu-toggle__toggle-icon {
553
+ min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
554
+ color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
555
+ }
556
+
557
+ .pf-v6-c-menu-toggle__status-icon {
558
+ color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
559
+ }
560
+
561
+ .pf-v6-c-text-input-group {
562
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
563
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
564
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
248
565
  --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
249
566
  --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
250
567
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -354,6 +671,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
354
671
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
355
672
  }
356
673
 
674
+ @media (prefers-reduced-motion: no-preference) {
675
+ .pf-v6-c-text-input-group.pf-m-error {
676
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
677
+ animation-name: pf-v6-global-danger-jiggle-motion;
678
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
679
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
680
+ animation-fill-mode: both;
681
+ }
682
+ }
683
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
684
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
685
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
686
+ animation-name: pf-v6-global-fade-in;
687
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
688
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
689
+ }
690
+
357
691
  .pf-v6-c-text-input-group:hover {
358
692
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
359
693
  }
@@ -460,610 +794,160 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
460
794
  display: flex;
461
795
  }
462
796
 
463
- .pf-v6-c-label {
464
- --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
465
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
466
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
467
- --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
468
- --pf-v6-c-label--MaxWidth: 100%;
469
- --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)));
470
- --pf-v6-c-label--BorderWidth: 0;
471
- --pf-v6-c-label--BorderColor: transparent;
472
- --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
473
- --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
474
- --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
475
- --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
476
- --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
477
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
478
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
479
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
480
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
481
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
482
- --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
483
- --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
484
- --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
485
- --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
486
- --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
487
- --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
488
- --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
489
- --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
490
- --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
491
- --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
492
- --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
493
- --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
494
- --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
495
- --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
496
- --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
497
- --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
498
- --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
499
- --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
500
- --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
501
- --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
502
- --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
503
- --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
504
- --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
505
- --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
506
- --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
507
- --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
508
- --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
509
- --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
510
- --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
511
- --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
512
- --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
513
- --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
514
- --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
515
- --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
516
- --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
517
- --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
518
- --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
519
- --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
520
- --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
521
- --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
522
- --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
523
- --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
524
- --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
525
- --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
526
- --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
527
- --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
528
- --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
529
- --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
530
- --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
531
- --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
532
- --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
533
- --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
534
- --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
535
- --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
536
- --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
537
- --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
538
- --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
539
- --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
540
- --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
541
- --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
542
- --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
543
- --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
544
- --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
545
- --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
546
- --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
547
- --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
548
- --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
549
- --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
550
- --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
551
- --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
552
- --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
553
- --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
554
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
555
- --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
556
- --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
557
- --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
558
- --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
559
- --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
560
- --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
561
- --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
562
- --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
563
- --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
564
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
565
- --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
566
- --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
567
- --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
568
- --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
569
- --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
570
- --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
571
- --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
572
- --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
573
- --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
574
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
575
- --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
576
- --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
577
- --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
578
- --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
579
- --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
580
- --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
581
- --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
582
- --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
583
- --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
584
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
585
- --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
586
- --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
587
- --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
588
- --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
589
- --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
590
- --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
591
- --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
592
- --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
593
- --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
594
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
595
- --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
596
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
597
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
598
- --pf-v6-c-label--m-clickable__content--Cursor: pointer;
599
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
600
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
601
- --pf-v6-c-label--m-outline--BackgroundColor: transparent;
602
- --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
603
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
604
- --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
605
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
606
- --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
607
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
608
- --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
609
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
610
- --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
611
- --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
612
- --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
613
- --pf-v6-c-label--m-add--BackgroundColor: transparent;
614
- --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
615
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
616
- --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
617
- --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
618
- --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
619
- --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
620
- --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
621
- --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
622
- --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
623
- --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
624
- --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
625
- --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
626
- --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
627
- --pf-v6-c-label__content--MaxWidth: 100%;
628
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
629
- --pf-v6-c-label__content--Cursor: initial;
630
- --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
631
- --pf-v6-c-label__text--MaxWidth: 100%;
632
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
633
- --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
634
- --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
635
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
636
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
637
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
638
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
639
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
640
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
641
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
642
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
643
- --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
644
- --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
645
- --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
646
- --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
647
- --pf-v6-c-label--m-editable__content--Cursor: pointer;
648
- --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
649
- --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
650
- --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
651
- --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
652
- --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
653
- --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
654
- --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
655
- --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
656
- }
657
-
658
- .pf-v6-c-label {
659
- position: relative;
660
- min-width: var(--pf-v6-c-label--MinWidth);
661
- max-width: var(--pf-v6-c-label--MaxWidth);
662
- padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
663
- padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
664
- padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
665
- padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
666
- font-size: var(--pf-v6-c-label--FontSize);
667
- white-space: nowrap;
668
- background: transparent;
669
- isolation: isolate;
670
- border: 0;
671
- border-radius: var(--pf-v6-c-label--BorderRadius);
797
+ .pf-v6-c-label-group {
798
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
799
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
800
+ --pf-v6-c-label-group--MaxWidth: 100%;
801
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
802
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
803
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
804
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
805
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
806
+ --pf-v6-c-label-group__main--MinWidth: 0;
807
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
808
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
809
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
810
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
811
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
812
+ --pf-v6-c-label-group__list--MinWidth: 0;
813
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
814
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
815
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
816
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
817
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
818
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
819
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
820
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
821
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
822
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
823
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
824
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
825
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
826
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
827
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
828
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
829
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
830
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
831
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
832
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
833
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
834
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
672
835
  }
673
836
 
674
- .pf-v6-c-label.pf-m-blue {
675
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
676
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
677
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
678
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
679
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
680
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
681
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
682
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
837
+ .pf-v6-c-label-group {
838
+ display: inline-flex;
839
+ row-gap: var(--pf-v6-c-label-group--RowGap);
840
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
841
+ align-items: center;
842
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
683
843
  }
684
844
 
685
- .pf-v6-c-label.pf-m-red {
686
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
687
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
688
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
689
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
690
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
691
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
692
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
693
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
845
+ .pf-v6-c-label-group.pf-m-category {
846
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
847
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
848
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
849
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
850
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
851
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
852
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
694
853
  }
695
854
 
696
- .pf-v6-c-label.pf-m-orange {
697
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
698
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
699
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
700
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
701
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
702
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
703
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
704
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
855
+ .pf-v6-c-label-group.pf-m-vertical {
856
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
857
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
858
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
859
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
860
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
861
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
862
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
705
863
  }
706
864
 
707
- .pf-v6-c-label.pf-m-orangered {
708
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
709
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
710
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
711
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
712
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
713
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
714
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
715
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
865
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
866
+ align-items: flex-start;
716
867
  }
717
868
 
718
- .pf-v6-c-label.pf-m-yellow {
719
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
720
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
721
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
722
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
723
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
724
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
725
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
726
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
869
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
870
+ flex-direction: column;
871
+ align-items: flex-start;
872
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
727
873
  }
728
874
 
729
- .pf-v6-c-label.pf-m-green {
730
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
731
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
732
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
733
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
734
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
735
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
736
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
737
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
875
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
876
+ flex-direction: column;
877
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
738
878
  }
739
879
 
740
- .pf-v6-c-label.pf-m-teal {
741
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
742
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
743
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
744
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
745
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
746
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
747
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
748
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
880
+ .pf-v6-c-label-group.pf-m-editable,
881
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
882
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
883
+ display: flex;
749
884
  }
750
885
 
751
- .pf-v6-c-label.pf-m-purple {
752
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
753
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
754
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
755
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
756
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
757
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
758
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
759
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
886
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
887
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
888
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
889
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
890
+ flex: 1;
760
891
  }
761
892
 
762
- .pf-v6-c-label.pf-m-success {
763
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
764
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
765
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
766
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
767
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
768
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
769
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
770
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
771
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
772
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
773
- }
774
-
775
- .pf-v6-c-label.pf-m-warning {
776
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
777
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
778
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
779
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
780
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
781
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
782
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
783
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
784
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
785
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
786
- }
787
-
788
- .pf-v6-c-label.pf-m-danger {
789
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
790
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
791
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
792
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
793
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
794
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
795
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
796
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
797
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
798
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
799
- }
800
-
801
- .pf-v6-c-label.pf-m-info {
802
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
803
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
804
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
805
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
806
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
807
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
808
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
809
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
810
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
811
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
812
- }
813
-
814
- .pf-v6-c-label.pf-m-custom {
815
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
816
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
817
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
818
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
819
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
820
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
821
- --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
822
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
823
- --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
824
- --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
825
- }
826
-
827
- .pf-v6-c-label.pf-m-compact {
828
- --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
829
- --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
830
- --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
831
- --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
832
- --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
833
- --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
834
- --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
835
- }
836
-
837
- .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
838
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
839
- }
840
-
841
- .pf-v6-c-label.pf-m-outline {
842
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
843
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
844
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
845
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
846
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
847
- --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
848
- --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
849
- --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
850
- --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
851
- --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
852
- }
853
-
854
- .pf-v6-c-label.pf-m-editable {
855
- --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
856
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
857
- }
858
-
859
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
860
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
861
- --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
862
- }
863
-
864
- .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
865
- text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
866
- text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
867
- text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
868
- }
869
-
870
- .pf-v6-c-label.pf-m-editable-active {
871
- --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
872
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
873
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
874
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
875
- }
876
-
877
- .pf-v6-c-label.pf-m-overflow {
878
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
879
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
880
- }
881
-
882
- .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
883
- --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
884
- --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
885
- }
886
-
887
- .pf-v6-c-label.pf-m-add {
888
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
889
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
890
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
891
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
892
- }
893
-
894
- .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
895
- --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
896
- --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
897
- --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
898
- --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
899
- }
900
-
901
- .pf-v6-c-label.pf-m-clickable {
902
- --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
903
- }
904
-
905
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
906
- text-decoration-line: none;
907
- }
908
-
909
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
910
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
911
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
912
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
913
- --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
914
- --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
915
- --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
916
- --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
917
- }
918
-
919
- .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
920
- --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
921
- }
922
-
923
- .pf-v6-c-label.pf-m-disabled {
924
- --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
925
- --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
926
- --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
927
- --pf-v6-c-label--BorderWidth: 0;
928
- pointer-events: none;
893
+ .pf-v6-c-label-group__main {
894
+ display: flex;
895
+ flex: 1;
896
+ flex-wrap: wrap;
897
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
898
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
899
+ align-items: baseline;
900
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
929
901
  }
930
902
 
931
- .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
932
- --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
903
+ .pf-v6-c-label-group__list {
904
+ display: inline-flex;
905
+ flex-wrap: wrap;
906
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
907
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
908
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
933
909
  }
934
910
 
935
- .pf-v6-c-label,
936
- .pf-v6-c-label__content {
911
+ .pf-v6-c-label-group__list-item {
937
912
  display: inline-flex;
938
- align-items: center;
939
- justify-content: center;
913
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
940
914
  }
941
915
 
942
- .pf-v6-c-label__text {
916
+ .pf-v6-c-label-group__label {
943
917
  overflow: hidden;
944
918
  text-overflow: ellipsis;
945
919
  white-space: nowrap;
946
- max-width: var(--pf-v6-c-label__text--MaxWidth);
920
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
947
921
  }
948
922
 
949
- .pf-v6-c-label__content {
950
- gap: var(--pf-v6-c-label__content--Gap);
951
- max-width: var(--pf-v6-c-label__content--MaxWidth);
952
- padding: 0;
953
- overflow: hidden;
954
- color: var(--pf-v6-c-label--Color);
955
- cursor: var(--pf-v6-c-label__content--Cursor, revert);
956
- background: transparent;
957
- border-width: 0;
923
+ .pf-v6-c-label-group__close {
924
+ display: flex;
925
+ align-self: flex-start;
958
926
  }
959
927
 
960
- .pf-v6-c-label__content::before {
961
- position: absolute;
962
- inset: 0;
963
- z-index: -1;
964
- pointer-events: none;
965
- content: "";
966
- background-color: var(--pf-v6-c-label--BackgroundColor);
967
- border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
968
- border-radius: var(--pf-v6-c-label--BorderRadius);
928
+ .pf-v6-c-label-group__close .pf-v6-c-button {
929
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
930
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
931
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
932
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
933
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
969
934
  }
970
935
 
971
- input.pf-v6-c-label__content {
972
- overflow: hidden;
973
- text-overflow: ellipsis;
936
+ .pf-v6-c-label-group__textarea {
937
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
938
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
939
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
940
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
941
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
974
942
  white-space: nowrap;
943
+ resize: none;
944
+ border: 0;
945
+ -ms-overflow-style: none;
946
+ scrollbar-width: none;
975
947
  }
976
948
 
977
- .pf-v6-c-label__icon {
978
- color: var(--pf-v6-c-label__icon--Color);
979
- }
980
-
981
- .pf-v6-c-label__actions {
982
- margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
983
- }
984
-
985
- .pf-v6-c-label__actions .pf-v6-c-button {
986
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
987
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
988
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
989
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
990
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
991
- margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
992
- margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
993
- outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
994
- }
995
-
996
- .pf-v6-c-badge {
997
- --pf-v6-c-badge--BorderColor: transparent;
998
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
999
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1000
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1001
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1002
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1003
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1004
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1005
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1006
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1007
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1008
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1009
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1010
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1011
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1012
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1013
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1014
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1015
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1016
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1017
- }
1018
-
1019
- .pf-v6-c-badge {
1020
- position: relative;
1021
- display: inline-block;
1022
- min-width: var(--pf-v6-c-badge--MinWidth);
1023
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1024
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1025
- font-size: var(--pf-v6-c-badge--FontSize);
1026
- font-weight: var(--pf-v6-c-badge--FontWeight);
1027
- color: var(--pf-v6-c-badge--Color);
1028
- text-align: center;
1029
- white-space: nowrap;
1030
- background-color: var(--pf-v6-c-badge--BackgroundColor);
1031
- border-radius: var(--pf-v6-c-badge--BorderRadius);
1032
- }
1033
-
1034
- .pf-v6-c-badge::after {
1035
- position: absolute;
1036
- inset: 0;
1037
- pointer-events: none;
1038
- content: "";
1039
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1040
- border-radius: inherit;
1041
- }
1042
-
1043
- .pf-v6-c-badge.pf-m-read {
1044
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1045
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1046
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1047
- }
1048
-
1049
- .pf-v6-c-badge.pf-m-unread {
1050
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1051
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1052
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1053
- }
1054
-
1055
- .pf-v6-c-badge.pf-m-disabled {
1056
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1057
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1058
- }
1059
-
1060
- .pf-v6-c-badge.pf-m-disabled::after {
1061
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1062
- }
1063
-
1064
- .pf-v6-c-badge__toggle-icon {
1065
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1066
- color: var(--pf-v6-c-badge__toggle-icon--Color);
949
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
950
+ display: none;
1067
951
  }
1068
952
 
1069
953
  .pf-v6-c-button {
@@ -1087,15 +971,20 @@ input.pf-v6-c-label__content {
1087
971
  --pf-v6-c-button--TextDecorationLine: none;
1088
972
  --pf-v6-c-button--TextDecorationStyle: none;
1089
973
  --pf-v6-c-button--TextDecorationColor: currentcolor;
974
+ --pf-v6-c-button--TransitionDelay: 0s;
1090
975
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1091
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1092
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
976
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
977
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
978
+ --pf-v6-c-button--ScaleX: 1;
979
+ --pf-v6-c-button--ScaleY: 1;
1093
980
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1094
981
  --pf-v6-c-button--hover--BorderColor: transparent;
1095
982
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1096
983
  --pf-v6-c-button--hover--TextDecorationLine: none;
1097
984
  --pf-v6-c-button--hover--TextDecorationStyle: none;
1098
985
  --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
986
+ --pf-v6-c-button--hover--ScaleX: 1;
987
+ --pf-v6-c-button--hover--ScaleY: 1;
1099
988
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1100
989
  --pf-v6-c-button--m-clicked--BorderColor: transparent;
1101
990
  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -1305,12 +1194,30 @@ input.pf-v6-c-label__content {
1305
1194
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1306
1195
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1307
1196
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1197
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1198
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
1199
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
1200
+ --pf-v6-c-button__icon--TransitionProperty: none;
1201
+ --pf-v6-c-button__icon--Rotate: 0deg;
1202
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
1203
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1204
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
1205
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
1206
+ --pf-v6-c-button__icon--ScaleX: 1;
1207
+ --pf-v6-c-button__icon--ScaleY: 1;
1208
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
1209
+ --pf-v6-c-button--hover__icon--ScaleY: 1;
1308
1210
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1309
1211
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1310
1212
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
1311
1213
  --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
1312
1214
  --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
1313
1215
  --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
1216
+ --pf-v6-c-button__icon--favorite--Opacity: 1;
1217
+ --pf-v6-c-button__icon--favorited--Opacity: 0;
1218
+ --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
1219
+ --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
1220
+ --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1314
1221
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1315
1222
  --pf-v6-c-button__progress--Opacity: 0;
1316
1223
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1325,9 +1232,28 @@ input.pf-v6-c-label__content {
1325
1232
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
1326
1233
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1327
1234
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1235
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1236
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1237
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1238
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1239
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
1328
1240
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
1329
1241
  --pf-v6-c-button--m-block--Display: flex;
1330
1242
  --pf-v6-c-button--m-block--Width: 100%;
1243
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1244
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
1245
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
1246
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
1247
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
1248
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
1249
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
1250
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
1251
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
1252
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
1253
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
1254
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1255
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1256
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
1331
1257
  }
1332
1258
 
1333
1259
  .pf-v6-c-button {
@@ -1351,16 +1277,19 @@ input.pf-v6-c-label__content {
1351
1277
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
1352
1278
  white-space: nowrap;
1353
1279
  cursor: pointer;
1280
+ -webkit-user-select: none;
1354
1281
  user-select: none;
1355
- background-color: var(--pf-v6-c-button--BackgroundColor);
1282
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
1356
1283
  border: 0;
1357
1284
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1358
1285
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1359
1286
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1360
1287
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1288
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
1361
1289
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1362
1290
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
1363
1291
  transition-property: var(--pf-v6-c-button--TransitionProperty);
1292
+ scale: var(--pf-v6-c-button--ScaleX) var(--pf-v6-c-button--ScaleY);
1364
1293
  }
1365
1294
 
1366
1295
  .pf-v6-c-button::after {
@@ -1477,6 +1406,7 @@ input.pf-v6-c-label__content {
1477
1406
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1478
1407
  text-align: start;
1479
1408
  white-space: normal;
1409
+ background: transparent;
1480
1410
  outline-offset: 0.125rem;
1481
1411
  }
1482
1412
 
@@ -1621,6 +1551,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1621
1551
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
1622
1552
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
1623
1553
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
1554
+ background: var(--pf-v6-c-button--BackgroundColor);
1624
1555
  }
1625
1556
 
1626
1557
  .pf-v6-c-button.pf-m-block {
@@ -1644,6 +1575,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1644
1575
  }
1645
1576
 
1646
1577
  .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1578
+ display: grid;
1647
1579
  transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1648
1580
  transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1649
1581
  transition-property: color;
@@ -1651,7 +1583,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1651
1583
 
1652
1584
  .pf-v6-c-button.pf-m-favorited {
1653
1585
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1586
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1654
1587
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1588
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1589
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
1590
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
1655
1591
  }
1656
1592
 
1657
1593
  .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
@@ -1660,19 +1596,66 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1660
1596
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
1661
1597
  }
1662
1598
 
1599
+ .pf-v6-c-button.pf-m-settings {
1600
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
1601
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
1602
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
1603
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
1604
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
1605
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
1606
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
1607
+ }
1608
+
1609
+ .pf-v6-c-button.pf-m-hamburger {
1610
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1611
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
1612
+ --pf-v6-c-button__icon--TransitionProperty: scale;
1613
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
1614
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1615
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
1616
+ }
1617
+
1618
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
1619
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1620
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1621
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1622
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1623
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1624
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1625
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
1626
+ }
1627
+
1628
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
1629
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
1630
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
1631
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
1632
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1633
+ --pf-v6-c-button__icon--ScaleX: 1;
1634
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
1635
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
1636
+ }
1637
+
1663
1638
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1664
1639
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1665
1640
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
1666
1641
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
1667
1642
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1643
+ --pf-v6-c-button--ScaleX: var(--pf-v6-c-button--hover--ScaleX);
1644
+ --pf-v6-c-button--ScaleY: var(--pf-v6-c-button--hover--ScaleY);
1668
1645
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1669
1646
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1647
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
1648
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
1649
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
1650
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
1651
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--hover__icon--ScaleX);
1652
+ --pf-v6-c-button__icon--ScaleY: var(--pf-v6-c-button--hover__icon--ScaleY);
1670
1653
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
1671
1654
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
1672
1655
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1673
1656
  }
1674
1657
 
1675
- .pf-v6-c-button.pf-m-clicked {
1658
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
1676
1659
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
1677
1660
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
1678
1661
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
@@ -1680,6 +1663,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1680
1663
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
1681
1664
  }
1682
1665
 
1666
+ .pf-v6-c-button:active {
1667
+ background-size: 100% 100%;
1668
+ transition-duration: 0s;
1669
+ }
1670
+
1683
1671
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
1684
1672
  pointer-events: none;
1685
1673
  }
@@ -1687,7 +1675,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1687
1675
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1688
1676
  color: var(--pf-v6-c-button--disabled--Color);
1689
1677
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1690
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
1678
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
1691
1679
  }
1692
1680
 
1693
1681
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
@@ -1737,6 +1725,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1737
1725
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
1738
1726
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
1739
1727
  color: var(--pf-v6-c-button__icon--Color);
1728
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
1729
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
1730
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
1731
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
1732
+ rotate: var(--pf-v6-c-button__icon--Rotate);
1733
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
1740
1734
  }
1741
1735
 
1742
1736
  .pf-v6-c-button__icon.pf-m-start {
@@ -1747,6 +1741,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1747
1741
  --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
1748
1742
  }
1749
1743
 
1744
+ .pf-v6-c-button__icon-favorite,
1745
+ .pf-v6-c-button__icon-favorited {
1746
+ grid-area: 1/1/1/1;
1747
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
1748
+ transition-property: opacity;
1749
+ }
1750
+
1751
+ .pf-v6-c-button__icon-favorite {
1752
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
1753
+ }
1754
+
1755
+ .pf-v6-c-button__icon-favorited {
1756
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
1757
+ }
1758
+
1750
1759
  .pf-v6-c-button__progress {
1751
1760
  position: absolute;
1752
1761
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
@@ -1760,974 +1769,1054 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1760
1769
  --pf-v6-c-spinner--Color: currentcolor;
1761
1770
  }
1762
1771
 
1772
+ .pf-v6-c-button__text {
1773
+ text-decoration: inherit;
1774
+ }
1775
+
1763
1776
  .pf-v6-c-button__count {
1764
1777
  display: inline-flex;
1765
1778
  align-items: center;
1766
1779
  }
1767
1780
 
1768
- @keyframes pf-v6-c-button-icon-notify {
1769
- 33% {
1770
- transform: rotate(30deg);
1771
- }
1772
- 66% {
1773
- transform: rotate(-60deg);
1774
- }
1775
- }
1776
- @keyframes pf-v6-c-button-icon-favorited {
1777
- 50% {
1778
- transform: scale(1.5);
1779
- }
1780
- }
1781
- .pf-v6-c-divider {
1782
- --pf-v6-c-divider--Display: flex;
1783
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1784
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1785
- --pf-v6-c-divider--before--FlexBasis: 100%;
1781
+ .pf-v6-c-button--hamburger-icon path {
1782
+ fill: none;
1783
+ stroke: currentcolor;
1784
+ stroke-linecap: round;
1785
+ stroke-linejoin: round;
1786
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
1786
1787
  }
1787
1788
 
1788
- .pf-v6-c-divider {
1789
- flex-direction: row;
1790
- width: 100%;
1791
- height: var(--pf-v6-c-divider--Size);
1792
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1793
- --pf-v6-hidden-visible--hidden--Display: none;
1794
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1795
- display: var(--pf-v6-hidden-visible--Display);
1796
- flex-shrink: 0;
1797
- align-items: stretch;
1798
- align-self: stretch;
1799
- justify-content: center;
1800
- border: 0;
1789
+ .pf-v6-c-button--hamburger-icon--top {
1790
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
1801
1791
  }
1802
1792
 
1803
- .pf-v6-c-divider.pf-m-hidden {
1804
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1793
+ .pf-v6-c-button--hamburger-icon--middle {
1794
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
1805
1795
  }
1806
1796
 
1807
- @media screen and (min-width: 36rem) {
1808
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1809
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1810
- }
1811
- .pf-v6-c-divider.pf-m-visible-on-sm {
1812
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1813
- }
1814
- }
1815
- @media screen and (min-width: 48rem) {
1816
- .pf-v6-c-divider.pf-m-hidden-on-md {
1817
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1818
- }
1819
- .pf-v6-c-divider.pf-m-visible-on-md {
1820
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1821
- }
1797
+ .pf-v6-c-button--hamburger-icon--arrow {
1798
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
1822
1799
  }
1823
- @media screen and (min-width: 62rem) {
1824
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1825
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1826
- }
1827
- .pf-v6-c-divider.pf-m-visible-on-lg {
1828
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1829
- }
1800
+
1801
+ .pf-v6-c-button--hamburger-icon--bottom {
1802
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
1830
1803
  }
1831
- @media screen and (min-width: 75rem) {
1832
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1833
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1804
+
1805
+ @keyframes pf-v6-c-button-icon-notify {
1806
+ 33% {
1807
+ transform: rotate(30deg);
1834
1808
  }
1835
- .pf-v6-c-divider.pf-m-visible-on-xl {
1836
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1809
+ 66% {
1810
+ transform: rotate(-60deg);
1837
1811
  }
1838
1812
  }
1839
- @media screen and (min-width: 90.625rem) {
1840
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1841
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1842
- }
1843
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1844
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1813
+ @keyframes pf-v6-c-button-icon-favorited {
1814
+ 50% {
1815
+ scale: 1.5;
1845
1816
  }
1846
1817
  }
1847
- .pf-v6-c-divider::before {
1848
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1849
- content: "";
1850
- background-color: var(--pf-v6-c-divider--Color);
1851
- }
1852
-
1853
- .pf-v6-c-divider.pf-m-horizontal {
1854
- flex-direction: row;
1855
- width: 100%;
1856
- height: var(--pf-v6-c-divider--Size);
1857
- }
1858
-
1859
- .pf-v6-c-divider.pf-m-vertical {
1860
- flex-direction: column;
1861
- width: var(--pf-v6-c-divider--Size);
1862
- height: inherit;
1863
- }
1864
-
1865
- .pf-v6-c-divider.pf-m-inset-none {
1866
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1818
+ .pf-v6-c-badge {
1819
+ --pf-v6-c-badge--BorderColor: transparent;
1820
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1821
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1822
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1823
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1824
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1825
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1826
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1827
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1828
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1829
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1830
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1831
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1832
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1833
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1834
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1835
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1836
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1837
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1838
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1867
1839
  }
1868
1840
 
1869
- .pf-v6-c-divider.pf-m-inset-xs {
1870
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1841
+ .pf-v6-c-badge {
1842
+ position: relative;
1843
+ display: inline-block;
1844
+ min-width: var(--pf-v6-c-badge--MinWidth);
1845
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1846
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1847
+ font-size: var(--pf-v6-c-badge--FontSize);
1848
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1849
+ color: var(--pf-v6-c-badge--Color);
1850
+ text-align: center;
1851
+ white-space: nowrap;
1852
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1853
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1871
1854
  }
1872
1855
 
1873
- .pf-v6-c-divider.pf-m-inset-sm {
1874
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1856
+ .pf-v6-c-badge::after {
1857
+ position: absolute;
1858
+ inset: 0;
1859
+ pointer-events: none;
1860
+ content: "";
1861
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1862
+ border-radius: inherit;
1875
1863
  }
1876
1864
 
1877
- .pf-v6-c-divider.pf-m-inset-md {
1878
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1865
+ .pf-v6-c-badge.pf-m-read {
1866
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1867
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1868
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1879
1869
  }
1880
1870
 
1881
- .pf-v6-c-divider.pf-m-inset-lg {
1882
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1871
+ .pf-v6-c-badge.pf-m-unread {
1872
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1873
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1874
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1883
1875
  }
1884
1876
 
1885
- .pf-v6-c-divider.pf-m-inset-xl {
1886
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1877
+ .pf-v6-c-badge.pf-m-disabled {
1878
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1879
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1887
1880
  }
1888
1881
 
1889
- .pf-v6-c-divider.pf-m-inset-2xl {
1890
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1882
+ .pf-v6-c-badge.pf-m-disabled::after {
1883
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1891
1884
  }
1892
1885
 
1893
- .pf-v6-c-divider.pf-m-inset-3xl {
1894
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1886
+ .pf-v6-c-badge__toggle-icon {
1887
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1888
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1895
1889
  }
1896
1890
 
1897
- @media (min-width: 36rem) {
1898
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1899
- flex-direction: row;
1900
- width: 100%;
1901
- height: var(--pf-v6-c-divider--Size);
1902
- }
1903
- }
1904
- @media (min-width: 36rem) {
1905
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1906
- flex-direction: column;
1907
- width: var(--pf-v6-c-divider--Size);
1908
- height: inherit;
1909
- }
1910
- }
1911
- @media (min-width: 36rem) {
1912
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1913
- --pf-v6-c-divider--before--FlexBasis: 100%;
1914
- }
1915
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1916
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1917
- }
1918
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1919
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1920
- }
1921
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1922
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1923
- }
1924
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1925
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1926
- }
1927
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1928
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1929
- }
1930
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1931
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1932
- }
1933
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1934
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1935
- }
1936
- }
1937
- @media (min-width: 48rem) {
1938
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1939
- flex-direction: row;
1940
- width: 100%;
1941
- height: var(--pf-v6-c-divider--Size);
1942
- }
1943
- }
1944
- @media (min-width: 48rem) {
1945
- .pf-v6-c-divider.pf-m-vertical-on-md {
1946
- flex-direction: column;
1947
- width: var(--pf-v6-c-divider--Size);
1948
- height: inherit;
1949
- }
1950
- }
1951
- @media (min-width: 48rem) {
1952
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1953
- --pf-v6-c-divider--before--FlexBasis: 100%;
1954
- }
1955
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1956
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1957
- }
1958
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1959
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1960
- }
1961
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1962
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1963
- }
1964
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1965
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1966
- }
1967
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1968
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1969
- }
1970
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1971
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1972
- }
1973
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1974
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1975
- }
1976
- }
1977
- @media (min-width: 62rem) {
1978
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1979
- flex-direction: row;
1980
- width: 100%;
1981
- height: var(--pf-v6-c-divider--Size);
1982
- }
1983
- }
1984
- @media (min-width: 62rem) {
1985
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1986
- flex-direction: column;
1987
- width: var(--pf-v6-c-divider--Size);
1988
- height: inherit;
1989
- }
1990
- }
1991
- @media (min-width: 62rem) {
1992
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1993
- --pf-v6-c-divider--before--FlexBasis: 100%;
1994
- }
1995
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1996
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1997
- }
1998
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1999
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2000
- }
2001
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
2002
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2003
- }
2004
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2005
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2006
- }
2007
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2008
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2009
- }
2010
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2011
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2012
- }
2013
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2014
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2015
- }
2016
- }
2017
- @media (min-width: 75rem) {
2018
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
2019
- flex-direction: row;
2020
- width: 100%;
2021
- height: var(--pf-v6-c-divider--Size);
2022
- }
2023
- }
2024
- @media (min-width: 75rem) {
2025
- .pf-v6-c-divider.pf-m-vertical-on-xl {
2026
- flex-direction: column;
2027
- width: var(--pf-v6-c-divider--Size);
2028
- height: inherit;
2029
- }
2030
- }
2031
- @media (min-width: 75rem) {
2032
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
2033
- --pf-v6-c-divider--before--FlexBasis: 100%;
2034
- }
2035
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2036
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2037
- }
2038
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2039
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2040
- }
2041
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
2042
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2043
- }
2044
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2045
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2046
- }
2047
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2048
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2049
- }
2050
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2051
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2052
- }
2053
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2054
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2055
- }
2056
- }
2057
- @media (min-width: 90.625rem) {
2058
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2059
- flex-direction: row;
2060
- width: 100%;
2061
- height: var(--pf-v6-c-divider--Size);
2062
- }
2063
- }
2064
- @media (min-width: 90.625rem) {
2065
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
2066
- flex-direction: column;
2067
- width: var(--pf-v6-c-divider--Size);
2068
- height: inherit;
2069
- }
2070
- }
2071
- @media (min-width: 90.625rem) {
2072
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2073
- --pf-v6-c-divider--before--FlexBasis: 100%;
2074
- }
2075
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2076
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2077
- }
2078
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2079
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2080
- }
2081
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2082
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2083
- }
2084
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2085
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2086
- }
2087
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2088
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2089
- }
2090
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2091
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2092
- }
2093
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2094
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2095
- }
2096
- }
2097
- .pf-v6-c-menu-toggle {
2098
- --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2099
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
2100
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2101
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
2102
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2103
- --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));
2104
- --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
2105
- --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
2106
- --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
2107
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
2108
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
2109
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
2110
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
2111
- --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
2112
- --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2113
- --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
2114
- --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
2115
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
2116
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
2117
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
2118
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
2119
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2120
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
2121
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
2122
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
2123
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
2124
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2125
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2126
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2127
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2128
- --pf-v6-c-menu-toggle--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
2129
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2130
- --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2131
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
2132
- --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
2133
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
2134
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2135
- --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2136
- --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
2137
- --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
2138
- --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
2139
- --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
2140
- --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
2141
- --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2142
- --pf-v6-c-menu-toggle--m-primary--hover--BorderColor: transparent;
2143
- --pf-v6-c-menu-toggle--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
2144
- --pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2145
- --pf-v6-c-menu-toggle--m-primary--expanded--BorderColor: transparent;
2146
- --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
2147
- --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
2148
- --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
2149
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2150
- --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2151
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
2152
- --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
2153
- --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
2154
- --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
2155
- --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
2156
- --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
2157
- --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
2158
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2159
- --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
2160
- --pf-v6-c-menu-toggle--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
2161
- --pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor: transparent;
2162
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
2163
- --pf-v6-c-menu-toggle--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
2164
- --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
2165
- --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
2166
- --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
2167
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
2168
- --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
2169
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
2170
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
2171
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2172
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2173
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
2174
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2175
- --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
2176
- --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
2177
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
2178
- --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
2179
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2180
- --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
2181
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
2182
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
2183
- --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2184
- --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
2185
- --pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
2186
- --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
2187
- --pf-v6-c-menu-toggle__button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
2188
- --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
2189
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
2190
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
2191
- --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));
2192
- --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2193
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
2194
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
2195
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2196
- --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2197
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
2198
- --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
2199
- --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
2200
- --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2201
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
2202
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
2203
- --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2204
- --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
2205
- --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
2206
- --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
2207
- --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
2208
- --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
2209
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2210
- --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
2211
- --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
2212
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
2213
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
2214
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
2215
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
2216
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
2217
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
2218
- --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
2219
- --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
2220
- --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
2221
- --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
2222
- --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
2223
- --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2224
- --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2225
- --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
2226
- --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
2227
- --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
2228
- --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
1891
+ .pf-v6-c-label {
1892
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1893
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1894
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1895
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1896
+ --pf-v6-c-label--MaxWidth: 100%;
1897
+ --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)));
1898
+ --pf-v6-c-label--BorderWidth: 0;
1899
+ --pf-v6-c-label--BorderColor: transparent;
1900
+ --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
1901
+ --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
1902
+ --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1903
+ --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1904
+ --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1905
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--hover);
1906
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gray--hover);
1907
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--hover);
1908
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--default);
1909
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gray--hover);
1910
+ --pf-v6-c-label--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
1911
+ --pf-v6-c-label--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
1912
+ --pf-v6-c-label--m-blue__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--default);
1913
+ --pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--hover);
1914
+ --pf-v6-c-label--m-blue--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-blue--hover);
1915
+ --pf-v6-c-label--m-blue--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-blue--hover);
1916
+ --pf-v6-c-label--m-blue--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--default);
1917
+ --pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--blue--hover);
1918
+ --pf-v6-c-label--m-red--BackgroundColor: var(--pf-t--global--color--nonstatus--red--default);
1919
+ --pf-v6-c-label--m-red--Color: var(--pf-t--global--text--color--nonstatus--on-red--default);
1920
+ --pf-v6-c-label--m-red__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--default);
1921
+ --pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--red--hover);
1922
+ --pf-v6-c-label--m-red--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-red--hover);
1923
+ --pf-v6-c-label--m-red--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-red--hover);
1924
+ --pf-v6-c-label--m-red--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--red--default);
1925
+ --pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--red--hover);
1926
+ --pf-v6-c-label--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
1927
+ --pf-v6-c-label--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
1928
+ --pf-v6-c-label--m-orange__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--default);
1929
+ --pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--hover);
1930
+ --pf-v6-c-label--m-orange--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orange--hover);
1931
+ --pf-v6-c-label--m-orange--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orange--hover);
1932
+ --pf-v6-c-label--m-orange--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--default);
1933
+ --pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orange--hover);
1934
+ --pf-v6-c-label--m-orangered--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--default);
1935
+ --pf-v6-c-label--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
1936
+ --pf-v6-c-label--m-orangered__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--default);
1937
+ --pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--orangered--hover);
1938
+ --pf-v6-c-label--m-orangered--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--hover);
1939
+ --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
1940
+ --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
1941
+ --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
1942
+ --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
1943
+ --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
1944
+ --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
1945
+ --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
1946
+ --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
1947
+ --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
1948
+ --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
1949
+ --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
1950
+ --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
1951
+ --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
1952
+ --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
1953
+ --pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--green--hover);
1954
+ --pf-v6-c-label--m-green--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-green--hover);
1955
+ --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
1956
+ --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
1957
+ --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
1958
+ --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
1959
+ --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
1960
+ --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
1961
+ --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
1962
+ --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
1963
+ --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
1964
+ --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
1965
+ --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
1966
+ --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1967
+ --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1968
+ --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
1969
+ --pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--hover);
1970
+ --pf-v6-c-label--m-purple--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-purple--hover);
1971
+ --pf-v6-c-label--m-purple--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--hover);
1972
+ --pf-v6-c-label--m-purple--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--default);
1973
+ --pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--purple--hover);
1974
+ --pf-v6-c-label--m-success--BackgroundColor: var(--pf-t--global--color--status--success--default);
1975
+ --pf-v6-c-label--m-success--Color: var(--pf-t--global--text--color--status--on-success--default);
1976
+ --pf-v6-c-label--m-success__icon--Color: var(--pf-t--global--icon--color--status--on-success--default);
1977
+ --pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--success--hover);
1978
+ --pf-v6-c-label--m-success--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-success--hover);
1979
+ --pf-v6-c-label--m-success--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-success--hover);
1980
+ --pf-v6-c-label--m-success--m-outline__icon--Color: var(--pf-t--global--icon--color--status--success--default);
1981
+ --pf-v6-c-label--m-success--m-outline--BorderColor: var(--pf-t--global--border--color--status--success--default);
1982
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1983
+ --pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--success--hover);
1984
+ --pf-v6-c-label--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
1985
+ --pf-v6-c-label--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
1986
+ --pf-v6-c-label--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
1987
+ --pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
1988
+ --pf-v6-c-label--m-warning--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
1989
+ --pf-v6-c-label--m-warning--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
1990
+ --pf-v6-c-label--m-warning--m-outline__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
1991
+ --pf-v6-c-label--m-warning--m-outline--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1992
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1993
+ --pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--warning--hover);
1994
+ --pf-v6-c-label--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
1995
+ --pf-v6-c-label--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
1996
+ --pf-v6-c-label--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
1997
+ --pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
1998
+ --pf-v6-c-label--m-danger--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
1999
+ --pf-v6-c-label--m-danger--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
2000
+ --pf-v6-c-label--m-danger--m-outline__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
2001
+ --pf-v6-c-label--m-danger--m-outline--BorderColor: var(--pf-t--global--border--color--status--danger--default);
2002
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
2003
+ --pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
2004
+ --pf-v6-c-label--m-info--BackgroundColor: var(--pf-t--global--color--status--info--default);
2005
+ --pf-v6-c-label--m-info--Color: var(--pf-t--global--text--color--status--on-info--default);
2006
+ --pf-v6-c-label--m-info__icon--Color: var(--pf-t--global--icon--color--status--on-info--default);
2007
+ --pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--info--hover);
2008
+ --pf-v6-c-label--m-info--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-info--hover);
2009
+ --pf-v6-c-label--m-info--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-info--hover);
2010
+ --pf-v6-c-label--m-info--m-outline__icon--Color: var(--pf-t--global--icon--color--status--info--default);
2011
+ --pf-v6-c-label--m-info--m-outline--BorderColor: var(--pf-t--global--border--color--status--info--default);
2012
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--info--hover);
2013
+ --pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--info--hover);
2014
+ --pf-v6-c-label--m-custom--BackgroundColor: var(--pf-t--global--color--status--custom--default);
2015
+ --pf-v6-c-label--m-custom--Color: var(--pf-t--global--text--color--status--on-custom--default);
2016
+ --pf-v6-c-label--m-custom__icon--Color: var(--pf-t--global--icon--color--status--on-custom--default);
2017
+ --pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--status--custom--hover);
2018
+ --pf-v6-c-label--m-custom--m-clickable--hover--Color: var(--pf-t--global--text--color--status--on-custom--hover);
2019
+ --pf-v6-c-label--m-custom--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--on-custom--hover);
2020
+ --pf-v6-c-label--m-custom--m-outline__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
2021
+ --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
2022
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
2023
+ --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
2024
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
2025
+ --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
2026
+ --pf-v6-c-label--m-clickable__content--Cursor: pointer;
2027
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
2028
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
2029
+ --pf-v6-c-label--m-outline--BackgroundColor: transparent;
2030
+ --pf-v6-c-label--m-outline--Color: var(--pf-t--global--text--color--regular);
2031
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-t--global--icon--color--regular);
2032
+ --pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor: transparent;
2033
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2034
+ --pf-v6-c-label--m-outline--m-clickable--hover--Color: var(--pf-t--global--text--color--regular);
2035
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
2036
+ --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
2037
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
2038
+ --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
2039
+ --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
2040
+ --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
2041
+ --pf-v6-c-label--m-add--BackgroundColor: transparent;
2042
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
2043
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-t--global--border--width--action--default);
2044
+ --pf-v6-c-label--m-add--hover--Color: var(--pf-t--global--text--color--brand--hover);
2045
+ --pf-v6-c-label--m-add--hover--BackgroundColor: transparent;
2046
+ --pf-v6-c-label--m-add--hover--BorderColor: var(--pf-t--global--border--color--hover);
2047
+ --pf-v6-c-label--m-add--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
2048
+ --pf-v6-c-label--m-compact--PaddingBlockStart: 0;
2049
+ --pf-v6-c-label--m-compact--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2050
+ --pf-v6-c-label--m-compact--PaddingBlockEnd: 0;
2051
+ --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2052
+ --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
2053
+ --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
2054
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
2055
+ --pf-v6-c-label__content--MaxWidth: 100%;
2056
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
2057
+ --pf-v6-c-label__content--Cursor: initial;
2058
+ --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2059
+ --pf-v6-c-label__text--MaxWidth: 100%;
2060
+ --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
2061
+ --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
2062
+ --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
2063
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
2064
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
2065
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2066
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2067
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2068
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2069
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
2070
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
2071
+ --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
2072
+ --pf-v6-c-label--m-editable--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--hover);
2073
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: 0.25rem;
2074
+ --pf-v6-c-label--m-editable__content--MaxWidth: 16ch;
2075
+ --pf-v6-c-label--m-editable__content--Cursor: pointer;
2076
+ --pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine: none;
2077
+ --pf-v6-c-label--m-editable--m-editable-active--BackgroundColor: transparent;
2078
+ --pf-v6-c-label--m-editable--m-editable-active--Color: var(--pf-t--global--text--color--regular);
2079
+ --pf-v6-c-label--m-editable--m-editable-active__content--Cursor: initial;
2080
+ --pf-v6-c-label--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2081
+ --pf-v6-c-label--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
2082
+ --pf-v6-c-label--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2083
+ --pf-v6-c-label--m-disabled--c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
2229
2084
  }
2230
2085
 
2231
- .pf-v6-c-menu-toggle {
2086
+ .pf-v6-c-label {
2232
2087
  position: relative;
2233
- display: inline-flex;
2234
- gap: var(--pf-v6-c-menu-toggle--Gap);
2235
- align-items: center;
2236
- justify-content: center;
2237
- min-width: var(--pf-v6-c-menu-toggle--MinWidth);
2238
- max-width: 100%;
2239
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2240
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2241
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2242
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2243
- font-size: var(--pf-v6-c-menu-toggle--FontSize);
2244
- line-height: var(--pf-v6-c-menu-toggle--LineHeight);
2245
- color: var(--pf-v6-c-menu-toggle--Color);
2246
- cursor: pointer;
2247
- background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
2088
+ min-width: var(--pf-v6-c-label--MinWidth);
2089
+ max-width: var(--pf-v6-c-label--MaxWidth);
2090
+ padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
2091
+ padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
2092
+ padding-inline-start: var(--pf-v6-c-label--PaddingInlineStart);
2093
+ padding-inline-end: var(--pf-v6-c-label--PaddingInlineEnd);
2094
+ font-size: var(--pf-v6-c-label--FontSize);
2095
+ white-space: nowrap;
2096
+ background: transparent;
2097
+ isolation: isolate;
2248
2098
  border: 0;
2249
- transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
2250
- transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
2251
- transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
2099
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2252
2100
  }
2253
2101
 
2254
- .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
2255
- border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2102
+ .pf-v6-c-label.pf-m-blue {
2103
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-blue--BackgroundColor);
2104
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-blue--Color);
2105
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-blue__icon--Color);
2106
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-blue--m-clickable--hover--BackgroundColor);
2107
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover--Color);
2108
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-blue--m-clickable--hover__icon--Color);
2109
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--BorderColor);
2110
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-blue--m-outline--m-clickable--hover--BorderColor);
2256
2111
  }
2257
2112
 
2258
- .pf-v6-c-menu-toggle::before {
2259
- position: absolute;
2260
- inset-block-start: 0;
2261
- inset-block-end: 0;
2262
- inset-inline-start: 0;
2263
- inset-inline-end: 0;
2264
- z-index: var(--pf-v6-c-menu-toggle--border--ZIndex);
2265
- pointer-events: none;
2266
- content: "";
2267
- border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
2268
- transition: inherit;
2113
+ .pf-v6-c-label.pf-m-red {
2114
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-red--BackgroundColor);
2115
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-red--Color);
2116
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-red__icon--Color);
2117
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-red--m-clickable--hover--BackgroundColor);
2118
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-red--m-clickable--hover--Color);
2119
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-red--m-clickable--hover__icon--Color);
2120
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-red--m-outline--BorderColor);
2121
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-red--m-outline--m-clickable--hover--BorderColor);
2269
2122
  }
2270
2123
 
2271
- .pf-v6-c-menu-toggle.pf-m-primary {
2272
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
2273
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
2274
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
2275
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
2276
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
2277
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--BorderColor);
2278
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-primary--hover--Color);
2279
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor);
2280
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--hover--BorderColor);
2281
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded--Color);
2282
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BackgroundColor);
2283
- --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-v6-c-menu-toggle--m-primary--expanded--BorderColor);
2284
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
2285
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
2286
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
2287
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
2288
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
2124
+ .pf-v6-c-label.pf-m-orange {
2125
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orange--BackgroundColor);
2126
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orange--Color);
2127
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orange__icon--Color);
2128
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orange--m-clickable--hover--BackgroundColor);
2129
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover--Color);
2130
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orange--m-clickable--hover__icon--Color);
2131
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--BorderColor);
2132
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orange--m-outline--m-clickable--hover--BorderColor);
2289
2133
  }
2290
2134
 
2291
- .pf-v6-c-menu-toggle.pf-m-secondary {
2292
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
2293
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
2294
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
2295
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--BackgroundColor);
2296
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
2297
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
2298
- --pf-v6-c-menu-toggle--hover--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover--Color);
2299
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth);
2300
- --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--hover--BorderColor);
2301
- --pf-v6-c-menu-toggle--expanded--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded--Color);
2302
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BackgroundColor);
2303
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-v6-c-menu-toggle--m-secondary--expanded--BorderWidth);
2304
- --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
2305
- --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
2306
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
2307
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
2308
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
2135
+ .pf-v6-c-label.pf-m-orangered {
2136
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-orangered--BackgroundColor);
2137
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-orangered--Color);
2138
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-orangered__icon--Color);
2139
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-orangered--m-clickable--hover--BackgroundColor);
2140
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover--Color);
2141
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color);
2142
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
2143
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
2144
+ }
2145
+
2146
+ .pf-v6-c-label.pf-m-yellow {
2147
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
2148
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
2149
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
2150
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
2151
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
2152
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
2153
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
2154
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
2155
+ }
2156
+
2157
+ .pf-v6-c-label.pf-m-green {
2158
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
2159
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-green--Color);
2160
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-green__icon--Color);
2161
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-green--m-clickable--hover--BackgroundColor);
2162
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-green--m-clickable--hover--Color);
2163
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-green--m-clickable--hover__icon--Color);
2164
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
2165
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
2166
+ }
2167
+
2168
+ .pf-v6-c-label.pf-m-teal {
2169
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
2170
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
2171
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
2172
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
2173
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
2174
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
2175
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
2176
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
2309
2177
  }
2310
2178
 
2311
- .pf-v6-c-menu-toggle.pf-m-full-height {
2312
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
2313
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
2314
- --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
2315
- align-items: center;
2316
- height: 100%;
2179
+ .pf-v6-c-label.pf-m-purple {
2180
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
2181
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-purple--Color);
2182
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-purple__icon--Color);
2183
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-purple--m-clickable--hover--BackgroundColor);
2184
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover--Color);
2185
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-purple--m-clickable--hover__icon--Color);
2186
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--BorderColor);
2187
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-purple--m-outline--m-clickable--hover--BorderColor);
2317
2188
  }
2318
2189
 
2319
- .pf-v6-c-menu-toggle.pf-m-full-width {
2320
- width: 100%;
2190
+ .pf-v6-c-label.pf-m-success {
2191
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-success--BackgroundColor);
2192
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-success--Color);
2193
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-success__icon--Color);
2194
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-success--m-clickable--hover--BackgroundColor);
2195
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-success--m-clickable--hover--Color);
2196
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-clickable--hover__icon--Color);
2197
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-success--m-outline__icon--Color);
2198
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-success--m-outline--BorderColor);
2199
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover--BorderColor);
2200
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2321
2201
  }
2322
2202
 
2323
- .pf-v6-c-menu-toggle.pf-m-plain {
2324
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
2325
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
2326
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
2327
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2328
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
2329
- --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
2330
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
2331
- --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
2332
- --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
2333
- --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
2334
- --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2335
- --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
2336
- --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
2337
- --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
2338
- --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
2203
+ .pf-v6-c-label.pf-m-warning {
2204
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-warning--BackgroundColor);
2205
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-warning--Color);
2206
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-warning__icon--Color);
2207
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-warning--m-clickable--hover--BackgroundColor);
2208
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover--Color);
2209
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-clickable--hover__icon--Color);
2210
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-warning--m-outline__icon--Color);
2211
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--BorderColor);
2212
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover--BorderColor);
2213
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-warning--m-outline--m-clickable--hover__icon--Color);
2339
2214
  }
2340
2215
 
2341
- .pf-v6-c-menu-toggle.pf-m-plain::before {
2342
- border: none;
2216
+ .pf-v6-c-label.pf-m-danger {
2217
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-danger--BackgroundColor);
2218
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-danger--Color);
2219
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-danger__icon--Color);
2220
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-danger--m-clickable--hover--BackgroundColor);
2221
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover--Color);
2222
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-clickable--hover__icon--Color);
2223
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-danger--m-outline__icon--Color);
2224
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--BorderColor);
2225
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover--BorderColor);
2226
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-danger--m-outline--m-clickable--hover__icon--Color);
2343
2227
  }
2344
2228
 
2345
- .pf-v6-c-menu-toggle:is(:hover, :focus) {
2346
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
2347
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
2348
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
2349
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
2350
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
2229
+ .pf-v6-c-label.pf-m-info {
2230
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-info--BackgroundColor);
2231
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-info--Color);
2232
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-info__icon--Color);
2233
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-info--m-clickable--hover--BackgroundColor);
2234
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-info--m-clickable--hover--Color);
2235
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-clickable--hover__icon--Color);
2236
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-info--m-outline__icon--Color);
2237
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-info--m-outline--BorderColor);
2238
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover--BorderColor);
2239
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-info--m-outline--m-clickable--hover__icon--Color);
2351
2240
  }
2352
2241
 
2353
- .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
2354
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
2355
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
2356
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
2357
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
2358
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
2242
+ .pf-v6-c-label.pf-m-custom {
2243
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-custom--BackgroundColor);
2244
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-custom--Color);
2245
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-custom__icon--Color);
2246
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-custom--m-clickable--hover--BackgroundColor);
2247
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover--Color);
2248
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-custom--m-clickable--hover__icon--Color);
2249
+ --pf-v6-c-label--m-outline__icon--Color: var(--pf-v6-c-label--m-custom--m-outline__icon--Color);
2250
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--BorderColor);
2251
+ --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor);
2252
+ --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-success--m-outline--m-clickable--hover__icon--Color);
2359
2253
  }
2360
2254
 
2361
- .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
2362
- border: 0;
2255
+ .pf-v6-c-label.pf-m-compact {
2256
+ --pf-v6-c-label--PaddingBlockStart: var(--pf-v6-c-label--m-compact--PaddingBlockStart);
2257
+ --pf-v6-c-label--PaddingInlineEnd: var(--pf-v6-c-label--m-compact--PaddingInlineEnd);
2258
+ --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
2259
+ --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
2260
+ --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
2261
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
2262
+ --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
2363
2263
  }
2364
2264
 
2365
- .pf-v6-c-menu-toggle.pf-m-small {
2366
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
2367
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
2368
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
2369
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
2370
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
2371
- --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
2372
- --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);
2373
- --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);
2265
+ .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
2266
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-label--m-filled__actions--c-button__icon--Color);
2374
2267
  }
2375
2268
 
2376
- .pf-v6-c-menu-toggle.pf-m-success {
2377
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
2378
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
2269
+ .pf-v6-c-label.pf-m-outline {
2270
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-outline--Color);
2271
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-outline--BorderWidth);
2272
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-outline--BorderColor);
2273
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-outline--BackgroundColor);
2274
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-outline__icon--Color);
2275
+ --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BackgroundColor);
2276
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2277
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2278
+ --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover--Color);
2279
+ --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-outline--m-clickable--hover__icon--Color);
2379
2280
  }
2380
2281
 
2381
- .pf-v6-c-menu-toggle.pf-m-warning {
2382
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-warning--BorderColor);
2383
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-warning__status-icon--Color);
2282
+ .pf-v6-c-label.pf-m-editable {
2283
+ --pf-v6-c-label__content--MaxWidth: var(--pf-v6-c-label--m-editable__content--MaxWidth);
2284
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable__content--Cursor);
2384
2285
  }
2385
2286
 
2386
- .pf-v6-c-menu-toggle.pf-m-danger {
2387
- --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
2388
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
2287
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__content:is(:hover, :focus) {
2288
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--hover--TextDecorationLine);
2289
+ --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
2389
2290
  }
2390
2291
 
2391
- @media screen and (prefers-reduced-motion: no-preference) {
2392
- .pf-v6-c-menu-toggle.pf-m-danger {
2393
- transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
2394
- animation-name: pf-v6-c-menu-toggle-m-danger-motion;
2395
- animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
2396
- animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
2397
- animation-fill-mode: both;
2398
- }
2292
+ .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
2293
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
2294
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
2295
+ text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
2399
2296
  }
2400
- .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
2401
- animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
2402
- animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
2403
- animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
2297
+
2298
+ .pf-v6-c-label.pf-m-editable-active {
2299
+ --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-v6-c-label--m-editable--m-editable-active--TextDecorationLine);
2300
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-editable--m-editable-active--BackgroundColor);
2301
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-editable--m-editable-active--Color);
2302
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-editable--m-editable-active__content--Cursor);
2404
2303
  }
2405
2304
 
2406
- @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
2407
- from {
2408
- opacity: 0;
2409
- }
2410
- to {
2411
- opacity: 1;
2412
- }
2305
+ .pf-v6-c-label.pf-m-overflow {
2306
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
2307
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
2413
2308
  }
2414
- .pf-v6-c-menu-toggle.pf-m-placeholder {
2415
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
2309
+
2310
+ .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
2311
+ --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
2312
+ --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
2416
2313
  }
2417
2314
 
2418
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) {
2419
- --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--disabled--Color);
2420
- --pf-v6-c-menu-toggle__icon--Color: var(--pf-v6-c-menu-toggle--disabled__icon--Color);
2421
- --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--disabled__toggle-icon--Color);
2422
- --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--disabled__status-icon--Color);
2423
- --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--disabled--BackgroundColor);
2315
+ .pf-v6-c-label.pf-m-add {
2316
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
2317
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-add--BackgroundColor);
2318
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-add--BorderColor);
2319
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-add--BorderWidth);
2424
2320
  }
2425
2321
 
2426
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled),
2427
- .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
2428
- pointer-events: none;
2322
+ .pf-v6-c-label.pf-m-add:is(:hover, :focus) {
2323
+ --pf-v6-c-label--m-add--Color: var(--pf-v6-c-label--m-add--hover--Color);
2324
+ --pf-v6-c-label--m-add--BackgroundColor: var(--pf-v6-c-label--m-add--hover--BackgroundColor);
2325
+ --pf-v6-c-label--m-add--BorderColor: var(--pf-v6-c-label--m-add--hover--BorderColor);
2326
+ --pf-v6-c-label--m-add--BorderWidth: var(--pf-v6-c-label--m-add--hover--BorderWidth);
2429
2327
  }
2430
2328
 
2431
- @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
2432
- syntax: "<length>";
2433
- inherits: false;
2434
- initial-value: 0;
2329
+ .pf-v6-c-label.pf-m-clickable {
2330
+ --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
2435
2331
  }
2436
- @media (prefers-reduced-motion: no-preference) {
2437
- @keyframes pf-v6-c-menu-toggle-m-danger-motion {
2438
- 33% {
2439
- --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
2440
- }
2441
- 66% {
2442
- --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
2443
- }
2444
- }
2332
+
2333
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2334
+ text-decoration-line: none;
2445
2335
  }
2446
- .pf-v6-c-menu-toggle.pf-m-split-button {
2447
- --pf-v6-c-menu-toggle--Gap: 0;
2448
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
2449
- padding: 0;
2336
+
2337
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
2338
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
2339
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2340
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-clickable--hover--BackgroundColor);
2341
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-clickable--hover--BorderWidth);
2342
+ --pf-v6-c-label--BorderColor: var(--pf-v6-c-label--m-clickable--hover--BorderColor);
2343
+ --pf-v6-c-label--m-outline--BorderWidth: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderWidth);
2344
+ --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-outline--m-clickable--hover--BorderColor);
2450
2345
  }
2451
2346
 
2452
- .pf-v6-c-menu-toggle.pf-m-split-button > * {
2453
- position: relative;
2454
- padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
2455
- padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
2456
- padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
2457
- padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
2347
+ .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) ~ .pf-v6-c-label__actions .pf-v6-c-button {
2348
+ --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label--m-clickable--hover__icon--Color);
2349
+ }
2350
+
2351
+ .pf-v6-c-label.pf-m-disabled {
2352
+ --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-disabled--BackgroundColor);
2353
+ --pf-v6-c-label--Color: var(--pf-v6-c-label--m-disabled--Color);
2354
+ --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-disabled__icon--Color);
2355
+ --pf-v6-c-label--BorderWidth: 0;
2356
+ pointer-events: none;
2458
2357
  }
2459
2358
 
2460
- .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
2461
- border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2462
- border-end-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2359
+ .pf-v6-c-label.pf-m-disabled .pf-v6-c-button {
2360
+ --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-v6-c-label--m-disabled--c-button--disabled__icon--Color);
2463
2361
  }
2464
2362
 
2465
- .pf-v6-c-menu-toggle.pf-m-split-button > :last-child {
2466
- border-start-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2467
- border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
2363
+ .pf-v6-c-label,
2364
+ .pf-v6-c-label__content {
2365
+ display: inline-flex;
2366
+ align-items: center;
2367
+ justify-content: center;
2468
2368
  }
2469
2369
 
2470
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
2471
- --pf-v6-c-check__label--Color: currentcolor;
2472
- --pf-v6-c-check__label--disabled--Color: currentcolor;
2473
- align-items: center;
2474
- align-self: stretch;
2370
+ .pf-v6-c-label__text {
2371
+ overflow: hidden;
2372
+ text-overflow: ellipsis;
2373
+ white-space: nowrap;
2374
+ max-width: var(--pf-v6-c-label__text--MaxWidth);
2475
2375
  }
2476
2376
 
2477
- .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check .pf-v6-c-check__input {
2478
- --pf-v6-c-check__input--TranslateY: 0;
2479
- align-self: center;
2377
+ .pf-v6-c-label__content {
2378
+ gap: var(--pf-v6-c-label__content--Gap);
2379
+ max-width: var(--pf-v6-c-label__content--MaxWidth);
2380
+ padding: 0;
2381
+ overflow: hidden;
2382
+ color: var(--pf-v6-c-label--Color);
2383
+ cursor: var(--pf-v6-c-label__content--Cursor, revert);
2384
+ background: transparent;
2385
+ border-width: 0;
2480
2386
  }
2481
2387
 
2482
- .pf-v6-c-menu-toggle.pf-m-split-button > :not(:first-child) {
2483
- 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);
2388
+ .pf-v6-c-label__content::before {
2389
+ position: absolute;
2390
+ inset: 0;
2391
+ z-index: -1;
2392
+ pointer-events: none;
2393
+ content: "";
2394
+ background-color: var(--pf-v6-c-label--BackgroundColor);
2395
+ border: var(--pf-v6-c-label--BorderWidth) solid var(--pf-v6-c-label--BorderColor);
2396
+ border-radius: var(--pf-v6-c-label--BorderRadius);
2484
2397
  }
2485
2398
 
2486
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary {
2487
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor);
2399
+ input.pf-v6-c-label__content {
2400
+ overflow: hidden;
2401
+ text-overflow: ellipsis;
2402
+ white-space: nowrap;
2488
2403
  }
2489
2404
 
2490
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button,
2491
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
2492
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
2405
+ .pf-v6-c-label__icon {
2406
+ color: var(--pf-v6-c-label__icon--Color);
2493
2407
  }
2494
2408
 
2495
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
2496
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
2497
- --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);
2409
+ .pf-v6-c-label__actions {
2410
+ margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
2498
2411
  }
2499
2412
 
2500
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
2501
- --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);
2413
+ .pf-v6-c-label__actions .pf-v6-c-button {
2414
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
2415
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
2416
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd);
2417
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd);
2418
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label__actions--c-button--PaddingInlineStart);
2419
+ margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
2420
+ margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
2421
+ outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
2502
2422
  }
2503
2423
 
2504
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
2505
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
2424
+ .pf-v6-c-divider {
2425
+ --pf-v6-c-divider--Display: flex;
2426
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2427
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2428
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2506
2429
  }
2507
2430
 
2508
- .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,
2509
- .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,
2510
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
2511
- padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
2431
+ .pf-v6-c-divider {
2432
+ flex-direction: row;
2433
+ width: 100%;
2434
+ height: var(--pf-v6-c-divider--Size);
2435
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2436
+ --pf-v6-hidden-visible--hidden--Display: none;
2437
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2438
+ display: var(--pf-v6-hidden-visible--Display);
2439
+ flex-shrink: 0;
2440
+ align-items: stretch;
2441
+ align-self: stretch;
2442
+ justify-content: center;
2443
+ border: 0;
2512
2444
  }
2513
2445
 
2514
- .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,
2515
- .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,
2516
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
2517
- padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
2446
+ .pf-v6-c-divider.pf-m-hidden {
2447
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2518
2448
  }
2519
2449
 
2520
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) {
2521
- --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor);
2450
+ @media screen and (min-width: 36rem) {
2451
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2452
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2453
+ }
2454
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2455
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2456
+ }
2457
+ }
2458
+ @media screen and (min-width: 48rem) {
2459
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2460
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2461
+ }
2462
+ .pf-v6-c-divider.pf-m-visible-on-md {
2463
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2464
+ }
2465
+ }
2466
+ @media screen and (min-width: 62rem) {
2467
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2468
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2469
+ }
2470
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2471
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2472
+ }
2473
+ }
2474
+ @media screen and (min-width: 75rem) {
2475
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2476
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2477
+ }
2478
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2479
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2480
+ }
2481
+ }
2482
+ @media screen and (min-width: 90.625rem) {
2483
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2484
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2485
+ }
2486
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2487
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2488
+ }
2489
+ }
2490
+ .pf-v6-c-divider::before {
2491
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2492
+ content: "";
2493
+ background-color: var(--pf-v6-c-divider--Color);
2522
2494
  }
2523
2495
 
2524
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
2525
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
2526
- color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
2527
- background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
2496
+ .pf-v6-c-divider.pf-m-horizontal {
2497
+ flex-direction: row;
2498
+ width: 100%;
2499
+ height: var(--pf-v6-c-divider--Size);
2528
2500
  }
2529
2501
 
2530
- .pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
2531
- content: none;
2502
+ .pf-v6-c-divider.pf-m-vertical {
2503
+ flex-direction: column;
2504
+ width: var(--pf-v6-c-divider--Size);
2505
+ height: inherit;
2532
2506
  }
2533
2507
 
2534
- .pf-v6-c-menu-toggle.pf-m-typeahead {
2535
- --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
2536
- --pf-v6-c-menu-toggle--Gap: 0;
2537
- align-items: stretch;
2538
- padding: 0;
2508
+ .pf-v6-c-divider.pf-m-inset-none {
2509
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2539
2510
  }
2540
2511
 
2541
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
2542
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2512
+ .pf-v6-c-divider.pf-m-inset-xs {
2513
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2543
2514
  }
2544
2515
 
2545
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
2546
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
2547
- display: flex;
2548
- align-items: stretch;
2516
+ .pf-v6-c-divider.pf-m-inset-sm {
2517
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2549
2518
  }
2550
2519
 
2551
- .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
2552
- --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
2553
- flex: 1;
2520
+ .pf-v6-c-divider.pf-m-inset-md {
2521
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2554
2522
  }
2555
2523
 
2556
- .pf-v6-c-menu-toggle__button {
2557
- gap: var(--pf-v6-c-menu-toggle__button--Gap);
2558
- align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
2559
- min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
2560
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
2561
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
2562
- color: inherit;
2563
- background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
2564
- border: 0;
2524
+ .pf-v6-c-divider.pf-m-inset-lg {
2525
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2565
2526
  }
2566
2527
 
2567
- .pf-v6-c-menu-toggle__button.pf-m-text {
2568
- display: inline-flex;
2569
- align-items: baseline;
2528
+ .pf-v6-c-divider.pf-m-inset-xl {
2529
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2570
2530
  }
2571
2531
 
2572
- .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) {
2573
- padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
2574
- padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
2532
+ .pf-v6-c-divider.pf-m-inset-2xl {
2533
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2575
2534
  }
2576
2535
 
2577
- .pf-v6-c-menu-toggle__text {
2578
- overflow: hidden;
2579
- text-overflow: ellipsis;
2580
- white-space: nowrap;
2581
- min-width: 0;
2536
+ .pf-v6-c-divider.pf-m-inset-3xl {
2537
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2582
2538
  }
2583
2539
 
2584
- .pf-v6-c-menu-toggle__count {
2585
- display: flex;
2586
- flex-wrap: nowrap;
2540
+ @media (min-width: 36rem) {
2541
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2542
+ flex-direction: row;
2543
+ width: 100%;
2544
+ height: var(--pf-v6-c-divider--Size);
2545
+ }
2546
+ }
2547
+ @media (min-width: 36rem) {
2548
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2549
+ flex-direction: column;
2550
+ width: var(--pf-v6-c-divider--Size);
2551
+ height: inherit;
2552
+ }
2553
+ }
2554
+ @media (min-width: 36rem) {
2555
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2556
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2557
+ }
2558
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2559
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2560
+ }
2561
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2562
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2563
+ }
2564
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2565
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2566
+ }
2567
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2568
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2569
+ }
2570
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2571
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2572
+ }
2573
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2574
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2575
+ }
2576
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2577
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2578
+ }
2579
+ }
2580
+ @media (min-width: 48rem) {
2581
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2582
+ flex-direction: row;
2583
+ width: 100%;
2584
+ height: var(--pf-v6-c-divider--Size);
2585
+ }
2587
2586
  }
2588
-
2589
- .pf-v6-c-menu-toggle__icon {
2590
- flex-shrink: 0;
2587
+ @media (min-width: 48rem) {
2588
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2589
+ flex-direction: column;
2590
+ width: var(--pf-v6-c-divider--Size);
2591
+ height: inherit;
2592
+ }
2591
2593
  }
2592
-
2593
- .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
2594
- .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
2595
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
2596
- margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
2597
- margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
2594
+ @media (min-width: 48rem) {
2595
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2596
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2597
+ }
2598
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2599
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2600
+ }
2601
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2602
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2603
+ }
2604
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2605
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2606
+ }
2607
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2608
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2609
+ }
2610
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2611
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2612
+ }
2613
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2614
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2615
+ }
2616
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2617
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2618
+ }
2598
2619
  }
2599
-
2600
- .pf-v6-c-menu-toggle__controls {
2601
- display: flex;
2602
- gap: var(--pf-v6-c-menu-toggle__controls--Gap);
2603
- align-items: center;
2604
- justify-content: center;
2605
- margin-inline-start: auto;
2620
+ @media (min-width: 62rem) {
2621
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2622
+ flex-direction: row;
2623
+ width: 100%;
2624
+ height: var(--pf-v6-c-divider--Size);
2625
+ }
2606
2626
  }
2607
-
2608
- .pf-v6-c-menu-toggle__toggle-icon {
2609
- min-height: var(--pf-v6-c-menu-toggle__toggle-icon--MinHeight);
2610
- color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
2627
+ @media (min-width: 62rem) {
2628
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2629
+ flex-direction: column;
2630
+ width: var(--pf-v6-c-divider--Size);
2631
+ height: inherit;
2632
+ }
2611
2633
  }
2612
-
2613
- .pf-v6-c-menu-toggle__status-icon {
2614
- color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
2634
+ @media (min-width: 62rem) {
2635
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2636
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2637
+ }
2638
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2639
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2640
+ }
2641
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2642
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2643
+ }
2644
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2645
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2646
+ }
2647
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2648
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2649
+ }
2650
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2651
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2652
+ }
2653
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2654
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2655
+ }
2656
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2657
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2658
+ }
2615
2659
  }
2616
-
2617
- .pf-v6-c-breadcrumb {
2618
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2619
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
2620
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2621
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
2622
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
2623
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
2624
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2625
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2626
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
2627
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2628
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2629
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
2630
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2631
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2632
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
2633
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
2634
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
2635
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2636
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
2637
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2638
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
2660
+ @media (min-width: 75rem) {
2661
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2662
+ flex-direction: row;
2663
+ width: 100%;
2664
+ height: var(--pf-v6-c-divider--Size);
2665
+ }
2639
2666
  }
2640
-
2641
- .pf-v6-c-breadcrumb {
2642
- display: inline-flex;
2667
+ @media (min-width: 75rem) {
2668
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2669
+ flex-direction: column;
2670
+ width: var(--pf-v6-c-divider--Size);
2671
+ height: inherit;
2672
+ }
2643
2673
  }
2644
-
2645
- .pf-v6-c-breadcrumb__list {
2646
- display: flex;
2647
- flex-wrap: wrap;
2648
- align-items: center;
2674
+ @media (min-width: 75rem) {
2675
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2676
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2677
+ }
2678
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2679
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2680
+ }
2681
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2682
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2683
+ }
2684
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2685
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2686
+ }
2687
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2688
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2689
+ }
2690
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2691
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2692
+ }
2693
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2694
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2695
+ }
2696
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2697
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2698
+ }
2649
2699
  }
2650
-
2651
- .pf-v6-c-breadcrumb__item {
2652
- display: flex;
2653
- align-items: baseline;
2654
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
2655
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
2656
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
2657
- white-space: nowrap;
2658
- list-style: none;
2700
+ @media (min-width: 90.625rem) {
2701
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2702
+ flex-direction: row;
2703
+ width: 100%;
2704
+ height: var(--pf-v6-c-divider--Size);
2705
+ }
2659
2706
  }
2660
-
2661
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
2662
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2707
+ @media (min-width: 90.625rem) {
2708
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2709
+ flex-direction: column;
2710
+ width: var(--pf-v6-c-divider--Size);
2711
+ height: inherit;
2712
+ }
2663
2713
  }
2664
-
2665
- .pf-v6-c-breadcrumb__item:not(:last-child) {
2666
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2714
+ @media (min-width: 90.625rem) {
2715
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2716
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2717
+ }
2718
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2719
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2720
+ }
2721
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2722
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2723
+ }
2724
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2725
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2726
+ }
2727
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2728
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2729
+ }
2730
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2731
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2732
+ }
2733
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2734
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2735
+ }
2736
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2737
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2738
+ }
2667
2739
  }
2668
-
2669
- .pf-v6-c-breadcrumb__item-divider {
2670
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
2671
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2672
- line-height: 1;
2673
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2740
+ .pf-v6-c-check {
2741
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2742
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2743
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2744
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2745
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2746
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2747
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2748
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2749
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2750
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2751
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2752
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2753
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2754
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2674
2755
  }
2675
2756
 
2676
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
2677
- scale: -1 1;
2757
+ .pf-v6-c-check {
2758
+ display: grid;
2759
+ grid-template-columns: auto 1fr;
2760
+ grid-gap: var(--pf-v6-c-check--GridGap);
2761
+ accent-color: var(--pf-v6-c-check--AccentColor);
2678
2762
  }
2679
2763
 
2680
- .pf-v6-c-breadcrumb__link {
2681
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
2682
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
2683
- font-size: inherit;
2684
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
2685
- line-height: inherit;
2686
- color: var(--pf-v6-c-breadcrumb__link--Color);
2687
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
2688
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
2689
- word-break: break-word;
2690
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2764
+ .pf-v6-c-check.pf-m-standalone {
2765
+ display: inline-grid;
2766
+ grid-template-columns: auto;
2767
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2691
2768
  }
2692
2769
 
2693
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
2694
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
2695
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
2696
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
2770
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2771
+ align-self: center;
2772
+ transform: none;
2697
2773
  }
2698
2774
 
2699
- .pf-v6-c-breadcrumb__link.pf-m-current {
2700
- cursor: default;
2775
+ .pf-v6-c-check__input {
2776
+ align-self: start;
2777
+ font-size: var(--pf-v6-c-check__label--FontSize);
2778
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2779
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2701
2780
  }
2702
2781
 
2703
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
2704
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
2705
- text-decoration-line: none;
2782
+ .pf-v6-c-check__label {
2783
+ font-size: var(--pf-v6-c-check__label--FontSize);
2784
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2785
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2786
+ color: var(--pf-v6-c-check__label--Color);
2706
2787
  }
2707
2788
 
2708
- button.pf-v6-c-breadcrumb__link {
2709
- border: none;
2789
+ .pf-v6-c-check__description {
2790
+ grid-column: 2;
2791
+ font-size: var(--pf-v6-c-check__description--FontSize);
2792
+ color: var(--pf-v6-c-check__description--Color);
2710
2793
  }
2711
2794
 
2712
- .pf-v6-c-breadcrumb__dropdown {
2713
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
2714
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
2715
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
2716
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
2795
+ .pf-v6-c-check__body {
2796
+ grid-column: 2;
2717
2797
  }
2718
2798
 
2719
- .pf-v6-c-breadcrumb__heading {
2720
- display: inline;
2721
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
2799
+ .pf-v6-c-check__label,
2800
+ .pf-v6-c-check__input {
2801
+ justify-self: start;
2722
2802
  }
2723
2803
 
2724
- .pf-v6-c-breadcrumb__link,
2725
- .pf-v6-c-breadcrumb__heading {
2726
- white-space: normal;
2804
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2805
+ .pf-v6-c-check__input {
2806
+ cursor: pointer;
2727
2807
  }
2728
2808
 
2729
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
2730
- display: none;
2809
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2810
+ .pf-v6-c-check__input:disabled,
2811
+ .pf-v6-c-check__input.pf-m-disabled {
2812
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2813
+ cursor: not-allowed;
2814
+ }
2815
+
2816
+ .pf-v6-c-check__label-required {
2817
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2818
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2819
+ color: var(--pf-v6-c-check__label-required--Color);
2731
2820
  }
2732
2821
 
2733
2822
  .pf-v6-c-menu {
@@ -2744,7 +2833,7 @@ button.pf-v6-c-breadcrumb__link {
2744
2833
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
2745
2834
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
2746
2835
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
2747
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
2836
+ --pf-v6-c-menu--TransitionDuration: 0s;
2748
2837
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2749
2838
  --pf-v6-c-menu--m-plain--BoxShadow: none;
2750
2839
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -2817,15 +2906,35 @@ button.pf-v6-c-breadcrumb__link {
2817
2906
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
2818
2907
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
2819
2908
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2820
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
2909
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
2821
2910
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
2822
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2911
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
2823
2912
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
2824
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2913
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
2825
2914
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
2826
2915
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
2827
2916
  }
2828
2917
 
2918
+ @media (prefers-reduced-motion: no-preference) {
2919
+ .pf-v6-c-menu {
2920
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
2921
+ }
2922
+ }
2923
+ @media (prefers-reduced-motion: no-preference) {
2924
+ .pf-v6-c-menu {
2925
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
2926
+ }
2927
+ }
2928
+ @media (prefers-reduced-motion: no-preference) {
2929
+ .pf-v6-c-menu {
2930
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2931
+ }
2932
+ }
2933
+ @media (prefers-reduced-motion: no-preference) {
2934
+ .pf-v6-c-menu {
2935
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
2936
+ }
2937
+ }
2829
2938
  .pf-v6-c-menu__content,
2830
2939
  .pf-v6-c-menu__list-item,
2831
2940
  .pf-v6-c-menu__item-main,
@@ -3259,121 +3368,324 @@ button.pf-v6-c-breadcrumb__link {
3259
3368
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3260
3369
  }
3261
3370
  }
3262
- @media screen and (min-width: 90.625rem) {
3263
- .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
3264
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3371
+ @media screen and (min-width: 90.625rem) {
3372
+ .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
3373
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3374
+ }
3375
+ .pf-v6-c-menu__item.pf-m-visible-on-2xl {
3376
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3377
+ }
3378
+ }
3379
+ :where(label).pf-v6-c-menu__item {
3380
+ cursor: pointer;
3381
+ }
3382
+
3383
+ .pf-v6-c-menu__item.pf-m-selected {
3384
+ --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3385
+ }
3386
+
3387
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3388
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3389
+ opacity: 1;
3390
+ }
3391
+
3392
+ .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3393
+ color: var(--pf-v6-c-menu__item-external--Color);
3394
+ }
3395
+
3396
+ .pf-v6-c-menu__item-select-icon {
3397
+ color: var(--pf-v6-c-menu__item-select-icon--Color);
3398
+ }
3399
+
3400
+ .pf-v6-c-menu__item-main {
3401
+ column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3402
+ align-items: center;
3403
+ width: 100%;
3404
+ }
3405
+
3406
+ .pf-v6-c-menu__item-text {
3407
+ overflow: hidden;
3408
+ text-overflow: ellipsis;
3409
+ white-space: nowrap;
3410
+ flex-grow: 1;
3411
+ }
3412
+
3413
+ .pf-v6-c-menu__group-title {
3414
+ padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3415
+ padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3416
+ padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3417
+ padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3418
+ font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3419
+ font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3420
+ color: var(--pf-v6-c-menu__group-title--Color);
3421
+ }
3422
+
3423
+ .pf-v6-c-menu__item-description {
3424
+ font-size: var(--pf-v6-c-menu__item-description--FontSize);
3425
+ color: var(--pf-v6-c-menu__item-description--Color);
3426
+ word-break: break-word;
3427
+ }
3428
+
3429
+ .pf-v6-c-menu__item-check .pf-v6-c-check {
3430
+ --pf-v6-c-check__input--TranslateY: none;
3431
+ }
3432
+
3433
+ .pf-v6-c-menu__item-toggle-icon {
3434
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3435
+ }
3436
+
3437
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3438
+ scale: -1 1;
3439
+ }
3440
+
3441
+ .pf-v6-c-menu__item-icon {
3442
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3443
+ }
3444
+
3445
+ .pf-v6-c-menu__item-select-icon,
3446
+ .pf-v6-c-menu__item-external-icon {
3447
+ opacity: 0;
3448
+ }
3449
+
3450
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3451
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3452
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3453
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3454
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3455
+ }
3456
+
3457
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3458
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3459
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3460
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3461
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3462
+ }
3463
+
3464
+ .pf-v6-c-menu__breadcrumb {
3465
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3466
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3467
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3468
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3469
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3470
+ }
3471
+
3472
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3473
+ min-width: auto;
3474
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3475
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3476
+ }
3477
+
3478
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3479
+ height: auto;
3480
+ }
3481
+
3482
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3483
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3484
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3485
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3486
+ }
3487
+
3488
+ .pf-v6-c-spinner {
3489
+ --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3490
+ --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3491
+ --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3492
+ --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3493
+ --pf-v6-c-spinner--AnimationDuration: 1.4s;
3494
+ --pf-v6-c-spinner--AnimationTimingFunction: linear;
3495
+ --pf-v6-c-spinner--StrokeWidth: 10;
3496
+ --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3497
+ --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3498
+ --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
3499
+ --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3500
+ --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3501
+ --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3502
+ --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3503
+ --pf-v6-c-spinner--m-inline--diameter: 1em;
3504
+ }
3505
+
3506
+ .pf-v6-c-spinner {
3507
+ width: var(--pf-v6-c-spinner--Width);
3508
+ height: var(--pf-v6-c-spinner--Height);
3509
+ overflow: hidden;
3510
+ animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3511
+ }
3512
+
3513
+ .pf-v6-c-spinner.pf-m-inline {
3514
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3515
+ }
3516
+
3517
+ .pf-v6-c-spinner.pf-m-xs {
3518
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
3519
+ --pf-v6-c-spinner--StrokeWidth: 15;
3520
+ }
3521
+
3522
+ .pf-v6-c-spinner.pf-m-sm {
3523
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3524
+ }
3525
+
3526
+ .pf-v6-c-spinner.pf-m-md {
3527
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3528
+ }
3529
+
3530
+ .pf-v6-c-spinner.pf-m-lg {
3531
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3532
+ }
3533
+
3534
+ .pf-v6-c-spinner.pf-m-xl {
3535
+ --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3536
+ }
3537
+
3538
+ .pf-v6-c-spinner__path {
3539
+ width: 100%;
3540
+ height: 100%;
3541
+ stroke: var(--pf-v6-c-spinner--Color);
3542
+ stroke-dasharray: 283;
3543
+ stroke-dashoffset: 280;
3544
+ stroke-linecap: round;
3545
+ stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3546
+ transform-origin: 50% 50%;
3547
+ animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3548
+ }
3549
+
3550
+ @keyframes pf-v6-c-spinner-animation-rotate {
3551
+ 0% {
3552
+ transform: rotate(0deg);
3553
+ }
3554
+ 100% {
3555
+ transform: rotate(360deg);
3556
+ }
3557
+ }
3558
+ @keyframes pf-v6-c-spinner-animation-dash {
3559
+ 0% {
3560
+ stroke-dashoffset: 280;
3561
+ transform: rotate(0);
3265
3562
  }
3266
- .pf-v6-c-menu__item.pf-m-visible-on-2xl {
3267
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3563
+ 15% {
3564
+ stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3565
+ }
3566
+ 40% {
3567
+ stroke-dasharray: 220;
3568
+ stroke-dashoffset: 150;
3569
+ }
3570
+ 100% {
3571
+ stroke-dashoffset: 280;
3572
+ transform: rotate(720deg);
3268
3573
  }
3269
3574
  }
3270
- :where(label).pf-v6-c-menu__item {
3271
- cursor: pointer;
3272
- }
3273
-
3274
- .pf-v6-c-menu__item.pf-m-selected {
3275
- --pf-v6-c-menu__item-select-icon--Color: var(--pf-v6-c-menu__item--m-selected__item-select-icon--Color);
3276
- }
3277
-
3278
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-select-icon,
3279
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3280
- opacity: 1;
3281
- }
3282
-
3283
- .pf-v6-c-menu__item:is(:hover, :focus, .pf-m-selected) .pf-v6-c-menu__item-external-icon {
3284
- color: var(--pf-v6-c-menu__item-external--Color);
3575
+ .pf-v6-c-breadcrumb {
3576
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3577
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3578
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3579
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3580
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3581
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3582
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3583
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3584
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3585
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3586
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3587
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3588
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3589
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3590
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3591
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3592
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3593
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3594
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3595
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3596
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3285
3597
  }
3286
3598
 
3287
- .pf-v6-c-menu__item-select-icon {
3288
- color: var(--pf-v6-c-menu__item-select-icon--Color);
3599
+ .pf-v6-c-breadcrumb {
3600
+ display: inline-flex;
3289
3601
  }
3290
3602
 
3291
- .pf-v6-c-menu__item-main {
3292
- column-gap: var(--pf-v6-c-menu__item-main--ColumnGap);
3603
+ .pf-v6-c-breadcrumb__list {
3604
+ display: flex;
3605
+ flex-wrap: wrap;
3293
3606
  align-items: center;
3294
- width: 100%;
3295
3607
  }
3296
3608
 
3297
- .pf-v6-c-menu__item-text {
3298
- overflow: hidden;
3299
- text-overflow: ellipsis;
3609
+ .pf-v6-c-breadcrumb__item {
3610
+ display: flex;
3611
+ align-items: baseline;
3612
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3613
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3614
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3300
3615
  white-space: nowrap;
3301
- flex-grow: 1;
3616
+ list-style: none;
3302
3617
  }
3303
3618
 
3304
- .pf-v6-c-menu__group-title {
3305
- padding-block-start: var(--pf-v6-c-menu__group-title--PaddingBlockStart);
3306
- padding-block-end: var(--pf-v6-c-menu__group-title--PaddingBlockEnd);
3307
- padding-inline-start: var(--pf-v6-c-menu__group-title--PaddingInlineStart);
3308
- padding-inline-end: var(--pf-v6-c-menu__group-title--PaddingInlineEnd);
3309
- font-size: var(--pf-v6-c-menu__group-title--FontSize, inherit);
3310
- font-weight: var(--pf-v6-c-menu__group-title--FontWeight, inherit);
3311
- color: var(--pf-v6-c-menu__group-title--Color);
3619
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3620
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3312
3621
  }
3313
3622
 
3314
- .pf-v6-c-menu__item-description {
3315
- font-size: var(--pf-v6-c-menu__item-description--FontSize);
3316
- color: var(--pf-v6-c-menu__item-description--Color);
3317
- word-break: break-word;
3623
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3624
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3318
3625
  }
3319
3626
 
3320
- .pf-v6-c-menu__item-check .pf-v6-c-check {
3321
- --pf-v6-c-check__input--TranslateY: none;
3627
+ .pf-v6-c-breadcrumb__item-divider {
3628
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3629
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3630
+ line-height: 1;
3631
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3322
3632
  }
3323
3633
 
3324
- .pf-v6-c-menu__item-toggle-icon {
3325
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3634
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3635
+ scale: -1 1;
3326
3636
  }
3327
3637
 
3328
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3329
- scale: -1 1;
3638
+ .pf-v6-c-breadcrumb__link {
3639
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3640
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3641
+ font-size: inherit;
3642
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3643
+ line-height: inherit;
3644
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3645
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3646
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3647
+ word-break: break-word;
3648
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3330
3649
  }
3331
3650
 
3332
- .pf-v6-c-menu__item-icon {
3333
- color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3651
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3652
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3653
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3654
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3334
3655
  }
3335
3656
 
3336
- .pf-v6-c-menu__item-select-icon,
3337
- .pf-v6-c-menu__item-external-icon {
3338
- opacity: 0;
3657
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3658
+ cursor: default;
3339
3659
  }
3340
3660
 
3341
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
3342
- .pf-v6-c-menu__item-action.pf-m-favorited,
3343
- .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3344
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3345
- --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3661
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3662
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3663
+ text-decoration-line: none;
3346
3664
  }
3347
3665
 
3348
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
3349
- .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3350
- .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3351
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3352
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3666
+ button.pf-v6-c-breadcrumb__link {
3667
+ border: none;
3353
3668
  }
3354
3669
 
3355
- .pf-v6-c-menu__breadcrumb {
3356
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3357
- padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3358
- padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3359
- padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3360
- padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3670
+ .pf-v6-c-breadcrumb__dropdown {
3671
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3672
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3673
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3674
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3361
3675
  }
3362
3676
 
3363
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3364
- min-width: auto;
3365
- padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3366
- padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3677
+ .pf-v6-c-breadcrumb__heading {
3678
+ display: inline;
3679
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3367
3680
  }
3368
3681
 
3369
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3370
- height: auto;
3682
+ .pf-v6-c-breadcrumb__link,
3683
+ .pf-v6-c-breadcrumb__heading {
3684
+ white-space: normal;
3371
3685
  }
3372
3686
 
3373
- .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3374
- --pf-v6-c-menu-toggle--BorderWidth: 0;
3375
- --pf-v6-c-menu-toggle--BorderColor: transparent;
3376
- outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3687
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3688
+ display: none;
3377
3689
  }
3378
3690
 
3379
3691
  .pf-v6-c-tooltip {
@@ -3505,86 +3817,4 @@ button.pf-v6-c-breadcrumb__link {
3505
3817
  background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3506
3818
  box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
3507
3819
  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));
3508
- }
3509
-
3510
- .pf-v6-c-spinner {
3511
- --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3512
- --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
3513
- --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
3514
- --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
3515
- --pf-v6-c-spinner--AnimationDuration: 1.4s;
3516
- --pf-v6-c-spinner--AnimationTimingFunction: linear;
3517
- --pf-v6-c-spinner--StrokeWidth: 10;
3518
- --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
3519
- --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
3520
- --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
3521
- --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
3522
- --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
3523
- --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
3524
- --pf-v6-c-spinner--m-inline--diameter: 1em;
3525
- }
3526
-
3527
- .pf-v6-c-spinner {
3528
- width: var(--pf-v6-c-spinner--Width);
3529
- height: var(--pf-v6-c-spinner--Height);
3530
- overflow: hidden;
3531
- animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
3532
- }
3533
-
3534
- .pf-v6-c-spinner.pf-m-inline {
3535
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
3536
- }
3537
-
3538
- .pf-v6-c-spinner.pf-m-sm {
3539
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
3540
- }
3541
-
3542
- .pf-v6-c-spinner.pf-m-md {
3543
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
3544
- }
3545
-
3546
- .pf-v6-c-spinner.pf-m-lg {
3547
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
3548
- }
3549
-
3550
- .pf-v6-c-spinner.pf-m-xl {
3551
- --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
3552
- }
3553
-
3554
- .pf-v6-c-spinner__path {
3555
- width: 100%;
3556
- height: 100%;
3557
- stroke: var(--pf-v6-c-spinner--Color);
3558
- stroke-dasharray: 283;
3559
- stroke-dashoffset: 280;
3560
- stroke-linecap: round;
3561
- stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
3562
- transform-origin: 50% 50%;
3563
- animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
3564
- }
3565
-
3566
- @keyframes pf-v6-c-spinner-animation-rotate {
3567
- 0% {
3568
- transform: rotate(0deg);
3569
- }
3570
- 100% {
3571
- transform: rotate(360deg);
3572
- }
3573
- }
3574
- @keyframes pf-v6-c-spinner-animation-dash {
3575
- 0% {
3576
- stroke-dashoffset: 280;
3577
- transform: rotate(0);
3578
- }
3579
- 15% {
3580
- stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
3581
- }
3582
- 40% {
3583
- stroke-dasharray: 220;
3584
- stroke-dashoffset: 150;
3585
- }
3586
- 100% {
3587
- stroke-dashoffset: 280;
3588
- transform: rotate(720deg);
3589
- }
3590
3820
  }