@patternfly/react-templates 6.3.1-prerelease.2 → 6.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +1 -9
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-mvjve2sN.css → output-1OzSb-1O.css} +1068 -1064
  6. package/dist/umd/react-templates.min.js +1 -1
  7. package/package.json +6 -6
package/dist/umd/assets/{output-mvjve2sN.css → output-1OzSb-1O.css} RENAMED
@@ -3,395 +3,160 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-text-input-group {
7
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
8
- --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
9
- --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10
- --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11
- --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
12
- --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
13
- --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
14
- --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
15
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
16
- --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
17
- --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18
- --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
19
- --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
20
- --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
21
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
22
- --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
23
- --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
25
- --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
26
- --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
27
- --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
28
- --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
29
- --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
30
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
31
- --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
32
- --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
33
- --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
34
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
35
- --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
36
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
37
- --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
38
- --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
39
- --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
40
- --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
41
- --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
42
- --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
43
- --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
44
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
45
- --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
46
- --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
47
- --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
48
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
49
- --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
50
- --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
51
- --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
52
- --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
53
- --pf-v6-c-text-input-group__icon--TranslateY: -50%;
54
- --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
55
- --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
56
- --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
6
+ .pf-v6-c-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);
57
44
  }
58
45
 
59
- .pf-v6-c-text-input-group {
60
- position: relative;
61
- display: flex;
62
- width: 100%;
63
- font-size: var(--pf-v6-c-text-input-group__FontSize);
64
- line-height: var(--pf-v6-c-text-input-group__LineHeight);
65
- color: var(--pf-v6-c-text-input-group--Color, inherit);
66
- background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
67
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
68
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
69
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
70
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
46
+ .pf-v6-c-label-group {
47
+ display: inline-flex;
48
+ row-gap: var(--pf-v6-c-label-group--RowGap);
49
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
50
+ align-items: center;
51
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
71
52
  }
72
53
 
73
- .pf-v6-c-text-input-group::before {
74
- position: absolute;
75
- inset: 0;
76
- pointer-events: none;
77
- content: "";
78
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
79
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
80
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
81
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
82
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
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);
83
62
  }
84
63
 
85
- .pf-v6-c-text-input-group.pf-m-disabled {
86
- --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
87
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
88
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
89
- --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
90
- pointer-events: none;
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);
91
72
  }
92
73
 
93
- .pf-v6-c-text-input-group.pf-m-plain {
94
- --pf-v6-c-text-input-group--BackgroundColor: transparent;
74
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
75
+ align-items: flex-start;
95
76
  }
96
77
 
97
- .pf-v6-c-text-input-group.pf-m-plain::before {
98
- border: 0;
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);
99
82
  }
100
83
 
101
- .pf-v6-c-text-input-group.pf-m-success {
102
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
103
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
104
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
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);
105
87
  }
106
88
 
107
- .pf-v6-c-text-input-group.pf-m-warning {
108
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
109
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
110
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
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;
111
93
  }
112
94
 
113
- .pf-v6-c-text-input-group.pf-m-error {
114
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
115
- --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
116
- --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
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;
117
100
  }
118
101
 
119
- @media (prefers-reduced-motion: no-preference) {
120
- .pf-v6-c-text-input-group.pf-m-error {
121
- translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
122
- animation-name: pf-v6-global-danger-jiggle-motion;
123
- animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
124
- animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
125
- animation-fill-mode: both;
126
- }
127
- }
128
- .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
129
- --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
130
- --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
131
- animation-name: pf-v6-global-fade-in;
132
- animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
133
- animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
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);
134
110
  }
135
111
 
136
- .pf-v6-c-text-input-group:hover {
137
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
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);
138
118
  }
139
119
 
140
- .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
141
- --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
120
+ .pf-v6-c-label-group__list-item {
121
+ display: inline-flex;
122
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
142
123
  }
143
124
 
144
- .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
145
- --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
146
- --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
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);
147
130
  }
148
131
 
149
- .pf-v6-c-text-input-group__main {
132
+ .pf-v6-c-label-group__close {
150
133
  display: flex;
151
- flex: 1;
152
- flex-wrap: wrap;
153
- gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
154
- min-width: 0;
134
+ align-self: flex-start;
155
135
  }
156
136
 
157
- .pf-v6-c-text-input-group__main.pf-m-icon {
158
- --pf-v6-c-text-input-group__text--Position: relative;
159
- --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
160
- display: inline-flex;
161
- align-items: center;
162
- justify-content: center;
163
- min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
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);
164
143
  }
165
144
 
166
- .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
167
- margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
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;
168
156
  }
169
157
 
170
- .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
171
- padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
172
- padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
173
- padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
174
- }
175
-
176
- .pf-v6-c-text-input-group__text {
177
- position: var(--pf-v6-c-text-input-group__text--Position, revert);
178
- display: inline-grid;
179
- flex: 1;
180
- grid-template-areas: "text-input";
181
- grid-template-columns: 1fr;
182
- }
183
-
184
- .pf-v6-c-text-input-group__icon {
185
- position: absolute;
186
- inset-block-start: 50%;
187
- inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
188
- font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
189
- color: var(--pf-v6-c-text-input-group__icon--Color);
190
- transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
191
- }
192
-
193
- .pf-v6-c-text-input-group__icon.pf-m-status {
194
- inset-inline-start: auto;
195
- inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
196
- color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
197
- }
198
-
199
- .pf-v6-c-text-input-group__text-input {
200
- overflow: hidden;
201
- text-overflow: ellipsis;
202
- white-space: nowrap;
203
- position: relative;
204
- width: 100%;
205
- min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
206
- padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
207
- padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
208
- padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
209
- padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
210
- background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
211
- border: 0;
212
- outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
213
- }
214
-
215
- .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
216
- grid-area: text-input;
217
- }
218
-
219
- .pf-v6-c-text-input-group__text-input.pf-m-hint {
220
- color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
221
- }
222
-
223
- .pf-v6-c-text-input-group__text-input::placeholder {
224
- color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
225
- }
226
-
227
- .pf-v6-c-text-input-group__utilities {
228
- display: flex;
229
- align-items: center;
230
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
231
- margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
232
- }
233
-
234
- .pf-v6-c-text-input-group__utilities > * + * {
235
- margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
236
- }
237
-
238
- .pf-v6-c-text-input-group__group {
239
- display: flex;
240
- }
241
-
242
- .pf-v6-c-badge {
243
- --pf-v6-c-badge--BorderColor: transparent;
244
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
245
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
246
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
247
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
248
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
249
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
250
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
251
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
252
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
253
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
254
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
255
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
256
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
257
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
258
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
259
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
260
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
261
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
262
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
263
- }
264
-
265
- .pf-v6-c-badge {
266
- position: relative;
267
- display: inline-block;
268
- min-width: var(--pf-v6-c-badge--MinWidth);
269
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
270
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
271
- font-size: var(--pf-v6-c-badge--FontSize);
272
- font-weight: var(--pf-v6-c-badge--FontWeight);
273
- color: var(--pf-v6-c-badge--Color);
274
- text-align: center;
275
- white-space: nowrap;
276
- background-color: var(--pf-v6-c-badge--BackgroundColor);
277
- border-radius: var(--pf-v6-c-badge--BorderRadius);
278
- }
279
-
280
- .pf-v6-c-badge::after {
281
- position: absolute;
282
- inset: 0;
283
- pointer-events: none;
284
- content: "";
285
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
286
- border-radius: inherit;
287
- }
288
-
289
- .pf-v6-c-badge.pf-m-read {
290
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
291
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
292
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
293
- }
294
-
295
- .pf-v6-c-badge.pf-m-unread {
296
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
297
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
298
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
299
- }
300
-
301
- .pf-v6-c-badge.pf-m-disabled {
302
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
303
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
304
- }
305
-
306
- .pf-v6-c-badge.pf-m-disabled::after {
307
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
308
- }
309
-
310
- .pf-v6-c-badge__toggle-icon {
311
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
312
- color: var(--pf-v6-c-badge__toggle-icon--Color);
313
- }
314
-
315
- .pf-v6-c-check {
316
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
317
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
318
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
319
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
320
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
321
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
322
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
323
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
324
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
325
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
326
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
327
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
328
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
329
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
330
- }
331
-
332
- .pf-v6-c-check {
333
- display: grid;
334
- grid-template-columns: auto 1fr;
335
- grid-gap: var(--pf-v6-c-check--GridGap);
336
- accent-color: var(--pf-v6-c-check--AccentColor);
337
- }
338
-
339
- .pf-v6-c-check.pf-m-standalone {
340
- display: inline-grid;
341
- grid-template-columns: auto;
342
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
343
- }
344
-
345
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
346
- align-self: center;
347
- transform: none;
348
- }
349
-
350
- .pf-v6-c-check__input {
351
- align-self: start;
352
- font-size: var(--pf-v6-c-check__label--FontSize);
353
- line-height: var(--pf-v6-c-check__label--LineHeight);
354
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
355
- }
356
-
357
- .pf-v6-c-check__label {
358
- font-size: var(--pf-v6-c-check__label--FontSize);
359
- font-weight: var(--pf-v6-c-check__label--FontWeight);
360
- line-height: var(--pf-v6-c-check__label--LineHeight);
361
- color: var(--pf-v6-c-check__label--Color);
362
- }
363
-
364
- .pf-v6-c-check__description {
365
- grid-column: 2;
366
- font-size: var(--pf-v6-c-check__description--FontSize);
367
- color: var(--pf-v6-c-check__description--Color);
368
- }
369
-
370
- .pf-v6-c-check__body {
371
- grid-column: 2;
372
- }
373
-
374
- .pf-v6-c-check__label,
375
- .pf-v6-c-check__input {
376
- justify-self: start;
377
- }
378
-
379
- label.pf-v6-c-check, .pf-v6-c-check__label,
380
- .pf-v6-c-check__input {
381
- cursor: pointer;
382
- }
383
-
384
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
385
- .pf-v6-c-check__input:disabled,
386
- .pf-v6-c-check__input.pf-m-disabled {
387
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
388
- cursor: not-allowed;
389
- }
390
-
391
- .pf-v6-c-check__label-required {
392
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
393
- font-size: var(--pf-v6-c-check__label-required--FontSize);
394
- color: var(--pf-v6-c-check__label-required--Color);
158
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
+ display: none;
395
160
  }
396
161
 
397
162
  .pf-v6-c-menu-toggle {
@@ -1482,478 +1247,319 @@ input.pf-v6-c-label__content {
1482
1247
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1483
1248
  }
1484
1249
 
1485
- .pf-v6-c-label-group {
1486
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
1487
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
1488
- --pf-v6-c-label-group--MaxWidth: 100%;
1489
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
1490
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
1491
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
1492
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
1493
- --pf-v6-c-label-group__main--MaxWidth: 100%;
1494
- --pf-v6-c-label-group__main--MinWidth: 0;
1495
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
1496
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
1497
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
1498
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
1499
- --pf-v6-c-label-group__list--MaxWidth: 100%;
1500
- --pf-v6-c-label-group__list--MinWidth: 0;
1501
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
1502
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
1503
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
1504
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1505
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1506
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1507
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1508
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
1509
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
1510
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
1511
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1512
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
1513
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
1514
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1515
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1516
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
1517
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1518
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
1519
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
1520
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
1521
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
1522
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
1250
+ .pf-v6-c-text-input-group {
1251
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
1252
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
1253
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
1254
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
1255
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
1256
+ --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
1257
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
1258
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
1259
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
1260
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
1261
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
1262
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
1263
+ --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1264
+ --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1265
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1266
+ --pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd: calc(var(--pf-t--global--spacer--sm) + var(--pf-v6-c-text-input-group__icon--FontSize) + var(--pf-t--global--spacer--gap--text-to-element--default));
1267
+ --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
1268
+ --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
1269
+ --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
1270
+ --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1271
+ --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1272
+ --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1273
+ --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
1274
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1275
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--plain) / 2);
1276
+ --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) / 2);
1277
+ --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1278
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1279
+ --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
1280
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1281
+ --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
1282
+ --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
1283
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
1284
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
1285
+ --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
1286
+ --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
1287
+ --pf-v6-c-text-input-group__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
1288
+ --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1289
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1290
+ --pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
1291
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
1292
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1293
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
1294
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--on-disabled);
1295
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
1296
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
1297
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
1298
+ --pf-v6-c-text-input-group__icon--TranslateY: -50%;
1299
+ --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
1300
+ --pf-v6-c-text-input-group--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1301
+ --pf-v6-c-text-input-group--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1523
1302
  }
1524
1303
 
1525
- .pf-v6-c-label-group {
1526
- display: inline-flex;
1527
- row-gap: var(--pf-v6-c-label-group--RowGap);
1528
- column-gap: var(--pf-v6-c-label-group--ColumnGap);
1529
- align-items: center;
1530
- max-width: var(--pf-v6-c-label-group--MaxWidth);
1304
+ .pf-v6-c-text-input-group {
1305
+ position: relative;
1306
+ display: flex;
1307
+ width: 100%;
1308
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
1309
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
1310
+ color: var(--pf-v6-c-text-input-group--Color, inherit);
1311
+ background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
1312
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1313
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1314
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1315
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1531
1316
  }
1532
1317
 
1533
- .pf-v6-c-label-group.pf-m-category {
1534
- padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
1535
- padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
1536
- padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
1537
- padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
1538
- background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
1539
- border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
1540
- border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
1318
+ .pf-v6-c-text-input-group::before {
1319
+ position: absolute;
1320
+ inset: 0;
1321
+ pointer-events: none;
1322
+ content: "";
1323
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
1324
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
1325
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
1326
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
1327
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
1541
1328
  }
1542
1329
 
1543
- .pf-v6-c-label-group.pf-m-vertical {
1544
- --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
1545
- --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
1546
- --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
1547
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
1548
- --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
1549
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
1550
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
1330
+ .pf-v6-c-text-input-group.pf-m-disabled {
1331
+ --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1332
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1333
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
1334
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
1335
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
1336
+ --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
1337
+ pointer-events: none;
1551
1338
  }
1552
1339
 
1553
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
1554
- align-items: flex-start;
1340
+ .pf-v6-c-text-input-group.pf-m-plain {
1341
+ --pf-v6-c-text-input-group--BackgroundColor: transparent;
1555
1342
  }
1556
1343
 
1557
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
1558
- flex-direction: column;
1559
- align-items: flex-start;
1560
- max-width: var(--pf-v6-c-label-group__list--MaxWidth);
1344
+ .pf-v6-c-text-input-group.pf-m-plain::before {
1345
+ border: 0;
1561
1346
  }
1562
1347
 
1563
- .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
1564
- flex-direction: column;
1565
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1348
+ .pf-v6-c-text-input-group.pf-m-success {
1349
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
1350
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
1351
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
1566
1352
  }
1567
1353
 
1568
- .pf-v6-c-label-group.pf-m-editable,
1569
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1570
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
1571
- display: flex;
1354
+ .pf-v6-c-text-input-group.pf-m-warning {
1355
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
1356
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
1357
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
1572
1358
  }
1573
1359
 
1574
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
1575
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
1576
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
1577
- .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
1578
- flex: 1;
1360
+ .pf-v6-c-text-input-group.pf-m-error {
1361
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
1362
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
1363
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
1579
1364
  }
1580
1365
 
1581
- .pf-v6-c-label-group__main {
1366
+ @media (prefers-reduced-motion: no-preference) {
1367
+ .pf-v6-c-text-input-group.pf-m-error {
1368
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
1369
+ animation-name: pf-v6-global-danger-jiggle-motion;
1370
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
1371
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
1372
+ animation-fill-mode: both;
1373
+ }
1374
+ }
1375
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
1376
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
1377
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
1378
+ animation-name: pf-v6-global-fade-in;
1379
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
1380
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
1381
+ }
1382
+
1383
+ .pf-v6-c-text-input-group:hover {
1384
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
1385
+ }
1386
+
1387
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
1388
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
1389
+ }
1390
+
1391
+ .pf-v6-c-text-input-group:has(> .pf-v6-c-text-input-group__utilities) {
1392
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-v6-c-text-input-group--utilities--icon--m-status--InsetInlineEnd);
1393
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--utilities--status__text-input--PaddingInlineEnd);
1394
+ }
1395
+
1396
+ .pf-v6-c-text-input-group__main {
1582
1397
  display: flex;
1583
1398
  flex: 1;
1584
1399
  flex-wrap: wrap;
1585
- row-gap: var(--pf-v6-c-label-group__main--RowGap);
1586
- column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
1587
- align-items: baseline;
1588
- min-width: var(--pf-v6-c-label-group__main--MinWidth);
1400
+ gap: var(--pf-v6-c-text-input-group__main--RowGap) var(--pf-v6-c-text-input-group__main--ColumnGap);
1401
+ min-width: 0;
1589
1402
  }
1590
1403
 
1591
- .pf-v6-c-label-group__list {
1404
+ .pf-v6-c-text-input-group__main.pf-m-icon {
1405
+ --pf-v6-c-text-input-group__text--Position: relative;
1406
+ --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
1592
1407
  display: inline-flex;
1593
- flex-wrap: wrap;
1594
- row-gap: var(--pf-v6-c-label-group__list--RowGap);
1595
- column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
1596
- min-width: var(--pf-v6-c-label-group__list--MinWidth);
1408
+ align-items: center;
1409
+ justify-content: center;
1410
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
1597
1411
  }
1598
1412
 
1599
- .pf-v6-c-label-group__list-item {
1600
- display: inline-flex;
1601
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
1413
+ .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
1414
+ margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
1602
1415
  }
1603
1416
 
1604
- .pf-v6-c-label-group__label {
1605
- overflow: hidden;
1606
- text-overflow: ellipsis;
1607
- white-space: nowrap;
1608
- max-width: var(--pf-v6-c-label-group__label--MaxWidth);
1417
+ .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
1418
+ padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
1419
+ padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
1420
+ padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
1609
1421
  }
1610
1422
 
1611
- .pf-v6-c-label-group__close {
1612
- display: flex;
1613
- align-self: flex-start;
1423
+ .pf-v6-c-text-input-group__text {
1424
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
1425
+ display: inline-grid;
1426
+ flex: 1;
1427
+ grid-template-areas: "text-input";
1428
+ grid-template-columns: 1fr;
1614
1429
  }
1615
1430
 
1616
- .pf-v6-c-label-group__close .pf-v6-c-button {
1617
- --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
1618
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
1619
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
1620
- --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
1621
- --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
1431
+ .pf-v6-c-text-input-group__icon {
1432
+ position: absolute;
1433
+ inset-block-start: 50%;
1434
+ inset-inline-start: var(--pf-v6-c-text-input-group__icon--InsetInlineStart);
1435
+ font-size: var(--pf-v6-c-text-input-group__icon--FontSize);
1436
+ color: var(--pf-v6-c-text-input-group__icon--Color);
1437
+ transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
1622
1438
  }
1623
1439
 
1624
- .pf-v6-c-label-group__textarea {
1625
- min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
1626
- padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
1627
- padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
1628
- padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
1629
- padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
1440
+ .pf-v6-c-text-input-group__icon.pf-m-status {
1441
+ inset-inline-start: auto;
1442
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
1443
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
1444
+ }
1445
+
1446
+ .pf-v6-c-text-input-group__text-input {
1447
+ overflow: hidden;
1448
+ text-overflow: ellipsis;
1630
1449
  white-space: nowrap;
1631
- resize: none;
1450
+ position: relative;
1451
+ width: 100%;
1452
+ min-width: var(--pf-v6-c-text-input-group__text-input--MinWidth);
1453
+ padding-block-start: var(--pf-v6-c-text-input-group__text-input--PaddingBlockStart);
1454
+ padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
1455
+ padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
1456
+ padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
1457
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
1458
+ background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
1632
1459
  border: 0;
1633
- -ms-overflow-style: none;
1634
- scrollbar-width: none;
1460
+ outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
1635
1461
  }
1636
1462
 
1637
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
1638
- display: none;
1463
+ .pf-v6-c-text-input-group__text-input, .pf-v6-c-text-input-group__text-input.pf-m-hint {
1464
+ grid-area: text-input;
1639
1465
  }
1640
1466
 
1641
- .pf-v6-c-divider {
1642
- --pf-v6-c-divider--Display: flex;
1643
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1644
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1645
- --pf-v6-c-divider--before--FlexBasis: 100%;
1646
- }
1647
-
1648
- .pf-v6-c-divider {
1649
- flex-direction: row;
1650
- width: 100%;
1651
- height: var(--pf-v6-c-divider--Size);
1652
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1653
- --pf-v6-hidden-visible--hidden--Display: none;
1654
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1655
- display: var(--pf-v6-hidden-visible--Display);
1656
- flex-shrink: 0;
1657
- align-items: stretch;
1658
- align-self: stretch;
1659
- justify-content: center;
1660
- border: 0;
1467
+ .pf-v6-c-text-input-group__text-input.pf-m-hint {
1468
+ color: var(--pf-v6-c-text-input-group__text-input--m-hint--Color);
1661
1469
  }
1662
1470
 
1663
- .pf-v6-c-divider.pf-m-hidden {
1664
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1471
+ .pf-v6-c-text-input-group__text-input::placeholder {
1472
+ color: var(--pf-v6-c-text-input-group__text-input--placeholder--Color);
1665
1473
  }
1666
1474
 
1667
- @media screen and (min-width: 36rem) {
1668
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1669
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1670
- }
1671
- .pf-v6-c-divider.pf-m-visible-on-sm {
1672
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1673
- }
1674
- }
1675
- @media screen and (min-width: 48rem) {
1676
- .pf-v6-c-divider.pf-m-hidden-on-md {
1677
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1678
- }
1679
- .pf-v6-c-divider.pf-m-visible-on-md {
1680
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1681
- }
1682
- }
1683
- @media screen and (min-width: 62rem) {
1684
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1685
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1686
- }
1687
- .pf-v6-c-divider.pf-m-visible-on-lg {
1688
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1689
- }
1690
- }
1691
- @media screen and (min-width: 75rem) {
1692
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1693
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1694
- }
1695
- .pf-v6-c-divider.pf-m-visible-on-xl {
1696
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1697
- }
1698
- }
1699
- @media screen and (min-width: 90.625rem) {
1700
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1701
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1702
- }
1703
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1704
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1705
- }
1706
- }
1707
- .pf-v6-c-divider::before {
1708
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1709
- content: "";
1710
- background-color: var(--pf-v6-c-divider--Color);
1475
+ .pf-v6-c-text-input-group__utilities {
1476
+ display: flex;
1477
+ align-items: center;
1478
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--MarginInlineStart);
1479
+ margin-inline-end: var(--pf-v6-c-text-input-group__utilities--MarginInlineEnd);
1711
1480
  }
1712
1481
 
1713
- .pf-v6-c-divider.pf-m-horizontal {
1714
- flex-direction: row;
1715
- width: 100%;
1716
- height: var(--pf-v6-c-divider--Size);
1482
+ .pf-v6-c-text-input-group__utilities > * + * {
1483
+ margin-inline-start: var(--pf-v6-c-text-input-group__utilities--child--MarginInlineStart);
1717
1484
  }
1718
1485
 
1719
- .pf-v6-c-divider.pf-m-vertical {
1720
- flex-direction: column;
1721
- width: var(--pf-v6-c-divider--Size);
1722
- height: inherit;
1486
+ .pf-v6-c-text-input-group__group {
1487
+ display: flex;
1723
1488
  }
1724
1489
 
1725
- .pf-v6-c-divider.pf-m-inset-none {
1726
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1490
+ .pf-v6-c-badge {
1491
+ --pf-v6-c-badge--BorderColor: transparent;
1492
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1493
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
1494
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
1495
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
1496
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
1497
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
1498
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1499
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
1500
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
1501
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1502
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1503
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1504
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
1505
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
1506
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
1507
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
1508
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
1509
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
1510
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1727
1511
  }
1728
1512
 
1729
- .pf-v6-c-divider.pf-m-inset-xs {
1730
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1513
+ .pf-v6-c-badge {
1514
+ position: relative;
1515
+ display: inline-block;
1516
+ min-width: var(--pf-v6-c-badge--MinWidth);
1517
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
1518
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
1519
+ font-size: var(--pf-v6-c-badge--FontSize);
1520
+ font-weight: var(--pf-v6-c-badge--FontWeight);
1521
+ color: var(--pf-v6-c-badge--Color);
1522
+ text-align: center;
1523
+ white-space: nowrap;
1524
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
1525
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
1731
1526
  }
1732
1527
 
1733
- .pf-v6-c-divider.pf-m-inset-sm {
1734
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1528
+ .pf-v6-c-badge::after {
1529
+ position: absolute;
1530
+ inset: 0;
1531
+ pointer-events: none;
1532
+ content: "";
1533
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1534
+ border-radius: inherit;
1735
1535
  }
1736
1536
 
1737
- .pf-v6-c-divider.pf-m-inset-md {
1738
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1537
+ .pf-v6-c-badge.pf-m-read {
1538
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1539
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
1540
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
1739
1541
  }
1740
1542
 
1741
- .pf-v6-c-divider.pf-m-inset-lg {
1742
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1543
+ .pf-v6-c-badge.pf-m-unread {
1544
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
1545
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1546
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1743
1547
  }
1744
1548
 
1745
- .pf-v6-c-divider.pf-m-inset-xl {
1746
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1549
+ .pf-v6-c-badge.pf-m-disabled {
1550
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1551
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1747
1552
  }
1748
1553
 
1749
- .pf-v6-c-divider.pf-m-inset-2xl {
1750
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1554
+ .pf-v6-c-badge.pf-m-disabled::after {
1555
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1751
1556
  }
1752
1557
 
1753
- .pf-v6-c-divider.pf-m-inset-3xl {
1754
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1558
+ .pf-v6-c-badge__toggle-icon {
1559
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
1560
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
1755
1561
  }
1756
1562
 
1757
- @media (min-width: 36rem) {
1758
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1759
- flex-direction: row;
1760
- width: 100%;
1761
- height: var(--pf-v6-c-divider--Size);
1762
- }
1763
- }
1764
- @media (min-width: 36rem) {
1765
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1766
- flex-direction: column;
1767
- width: var(--pf-v6-c-divider--Size);
1768
- height: inherit;
1769
- }
1770
- }
1771
- @media (min-width: 36rem) {
1772
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1773
- --pf-v6-c-divider--before--FlexBasis: 100%;
1774
- }
1775
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1776
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1777
- }
1778
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1779
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1780
- }
1781
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1782
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1783
- }
1784
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1785
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1786
- }
1787
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1788
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1789
- }
1790
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1791
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1792
- }
1793
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1794
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1795
- }
1796
- }
1797
- @media (min-width: 48rem) {
1798
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1799
- flex-direction: row;
1800
- width: 100%;
1801
- height: var(--pf-v6-c-divider--Size);
1802
- }
1803
- }
1804
- @media (min-width: 48rem) {
1805
- .pf-v6-c-divider.pf-m-vertical-on-md {
1806
- flex-direction: column;
1807
- width: var(--pf-v6-c-divider--Size);
1808
- height: inherit;
1809
- }
1810
- }
1811
- @media (min-width: 48rem) {
1812
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1813
- --pf-v6-c-divider--before--FlexBasis: 100%;
1814
- }
1815
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1816
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1817
- }
1818
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1819
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1820
- }
1821
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1822
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1823
- }
1824
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1825
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1826
- }
1827
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1828
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1829
- }
1830
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1831
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1832
- }
1833
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1834
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1835
- }
1836
- }
1837
- @media (min-width: 62rem) {
1838
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1839
- flex-direction: row;
1840
- width: 100%;
1841
- height: var(--pf-v6-c-divider--Size);
1842
- }
1843
- }
1844
- @media (min-width: 62rem) {
1845
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1846
- flex-direction: column;
1847
- width: var(--pf-v6-c-divider--Size);
1848
- height: inherit;
1849
- }
1850
- }
1851
- @media (min-width: 62rem) {
1852
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1853
- --pf-v6-c-divider--before--FlexBasis: 100%;
1854
- }
1855
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1856
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1857
- }
1858
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1859
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1860
- }
1861
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1862
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1863
- }
1864
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1865
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1866
- }
1867
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1868
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1869
- }
1870
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1871
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1872
- }
1873
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1874
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1875
- }
1876
- }
1877
- @media (min-width: 75rem) {
1878
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1879
- flex-direction: row;
1880
- width: 100%;
1881
- height: var(--pf-v6-c-divider--Size);
1882
- }
1883
- }
1884
- @media (min-width: 75rem) {
1885
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1886
- flex-direction: column;
1887
- width: var(--pf-v6-c-divider--Size);
1888
- height: inherit;
1889
- }
1890
- }
1891
- @media (min-width: 75rem) {
1892
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1893
- --pf-v6-c-divider--before--FlexBasis: 100%;
1894
- }
1895
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1896
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1897
- }
1898
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1899
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1900
- }
1901
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1902
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1903
- }
1904
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1905
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1906
- }
1907
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1908
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1909
- }
1910
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1911
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1912
- }
1913
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1914
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1915
- }
1916
- }
1917
- @media (min-width: 90.625rem) {
1918
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1919
- flex-direction: row;
1920
- width: 100%;
1921
- height: var(--pf-v6-c-divider--Size);
1922
- }
1923
- }
1924
- @media (min-width: 90.625rem) {
1925
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1926
- flex-direction: column;
1927
- width: var(--pf-v6-c-divider--Size);
1928
- height: inherit;
1929
- }
1930
- }
1931
- @media (min-width: 90.625rem) {
1932
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1933
- --pf-v6-c-divider--before--FlexBasis: 100%;
1934
- }
1935
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1936
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1937
- }
1938
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1939
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1940
- }
1941
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1942
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1943
- }
1944
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1945
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1946
- }
1947
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1948
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1949
- }
1950
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1951
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1952
- }
1953
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1954
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1955
- }
1956
- }
1957
1563
  .pf-v6-c-button {
1958
1564
  --pf-v6-c-button--Display: inline-flex;
1959
1565
  --pf-v6-c-button--AlignItems: baseline;
@@ -2752,73 +2358,602 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2752
2358
  transition-property: opacity;
2753
2359
  }
2754
2360
 
2755
- .pf-v6-c-button__icon-favorite {
2756
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2361
+ .pf-v6-c-button__icon-favorite {
2362
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2363
+ }
2364
+
2365
+ .pf-v6-c-button__icon-favorited {
2366
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2367
+ }
2368
+
2369
+ .pf-v6-c-button__progress {
2370
+ position: absolute;
2371
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2372
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2373
+ line-height: 1;
2374
+ color: var(--pf-v6-c-button__progress--Color);
2375
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2376
+ }
2377
+
2378
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2379
+ --pf-v6-c-spinner--Color: currentcolor;
2380
+ }
2381
+
2382
+ .pf-v6-c-button__text {
2383
+ text-decoration: inherit;
2384
+ }
2385
+
2386
+ .pf-v6-c-button__count {
2387
+ display: inline-flex;
2388
+ align-items: center;
2389
+ }
2390
+
2391
+ .pf-v6-c-button--hamburger-icon path {
2392
+ fill: none;
2393
+ stroke: currentcolor;
2394
+ stroke-linecap: round;
2395
+ stroke-linejoin: round;
2396
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2397
+ }
2398
+
2399
+ .pf-v6-c-button--hamburger-icon--top {
2400
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2401
+ }
2402
+
2403
+ .pf-v6-c-button--hamburger-icon--middle {
2404
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2405
+ }
2406
+
2407
+ .pf-v6-c-button--hamburger-icon--arrow {
2408
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2409
+ }
2410
+
2411
+ .pf-v6-c-button--hamburger-icon--bottom {
2412
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2413
+ }
2414
+
2415
+ @keyframes pf-v6-c-button-icon-notify {
2416
+ 33% {
2417
+ transform: rotate(30deg);
2418
+ }
2419
+ 66% {
2420
+ transform: rotate(-60deg);
2421
+ }
2422
+ }
2423
+ @keyframes pf-v6-c-button-icon-favorited {
2424
+ 50% {
2425
+ scale: 1.5;
2426
+ }
2427
+ }
2428
+ .pf-v6-c-check {
2429
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2430
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2431
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2432
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
2433
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
2434
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
2435
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
2436
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
2437
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
2438
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
2439
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
2440
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
2441
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
2442
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
2443
+ }
2444
+
2445
+ .pf-v6-c-check {
2446
+ display: grid;
2447
+ grid-template-columns: auto 1fr;
2448
+ grid-gap: var(--pf-v6-c-check--GridGap);
2449
+ accent-color: var(--pf-v6-c-check--AccentColor);
2450
+ }
2451
+
2452
+ .pf-v6-c-check.pf-m-standalone {
2453
+ display: inline-grid;
2454
+ grid-template-columns: auto;
2455
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
2456
+ }
2457
+
2458
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
2459
+ align-self: center;
2460
+ transform: none;
2461
+ }
2462
+
2463
+ .pf-v6-c-check__input {
2464
+ align-self: start;
2465
+ font-size: var(--pf-v6-c-check__label--FontSize);
2466
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2467
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
2468
+ }
2469
+
2470
+ .pf-v6-c-check__label {
2471
+ font-size: var(--pf-v6-c-check__label--FontSize);
2472
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
2473
+ line-height: var(--pf-v6-c-check__label--LineHeight);
2474
+ color: var(--pf-v6-c-check__label--Color);
2475
+ }
2476
+
2477
+ .pf-v6-c-check__description {
2478
+ grid-column: 2;
2479
+ font-size: var(--pf-v6-c-check__description--FontSize);
2480
+ color: var(--pf-v6-c-check__description--Color);
2481
+ }
2482
+
2483
+ .pf-v6-c-check__body {
2484
+ grid-column: 2;
2485
+ }
2486
+
2487
+ .pf-v6-c-check__label,
2488
+ .pf-v6-c-check__input {
2489
+ justify-self: start;
2490
+ }
2491
+
2492
+ label.pf-v6-c-check, .pf-v6-c-check__label,
2493
+ .pf-v6-c-check__input {
2494
+ cursor: pointer;
2495
+ }
2496
+
2497
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2498
+ .pf-v6-c-check__input:disabled,
2499
+ .pf-v6-c-check__input.pf-m-disabled {
2500
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2501
+ cursor: not-allowed;
2502
+ }
2503
+
2504
+ .pf-v6-c-check__label-required {
2505
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2506
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
2507
+ color: var(--pf-v6-c-check__label-required--Color);
2508
+ }
2509
+
2510
+ .pf-v6-c-divider {
2511
+ --pf-v6-c-divider--Display: flex;
2512
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2513
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2514
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2515
+ }
2516
+
2517
+ .pf-v6-c-divider {
2518
+ flex-direction: row;
2519
+ width: 100%;
2520
+ height: var(--pf-v6-c-divider--Size);
2521
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2522
+ --pf-v6-hidden-visible--hidden--Display: none;
2523
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2524
+ display: var(--pf-v6-hidden-visible--Display);
2525
+ flex-shrink: 0;
2526
+ align-items: stretch;
2527
+ align-self: stretch;
2528
+ justify-content: center;
2529
+ border: 0;
2530
+ }
2531
+
2532
+ .pf-v6-c-divider.pf-m-hidden {
2533
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2534
+ }
2535
+
2536
+ @media screen and (min-width: 36rem) {
2537
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2538
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2539
+ }
2540
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2541
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2542
+ }
2543
+ }
2544
+ @media screen and (min-width: 48rem) {
2545
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2546
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2547
+ }
2548
+ .pf-v6-c-divider.pf-m-visible-on-md {
2549
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2550
+ }
2551
+ }
2552
+ @media screen and (min-width: 62rem) {
2553
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2554
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2555
+ }
2556
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2557
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2558
+ }
2559
+ }
2560
+ @media screen and (min-width: 75rem) {
2561
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2562
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2563
+ }
2564
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2565
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2566
+ }
2567
+ }
2568
+ @media screen and (min-width: 90.625rem) {
2569
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2570
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2571
+ }
2572
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2573
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2574
+ }
2575
+ }
2576
+ .pf-v6-c-divider::before {
2577
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2578
+ content: "";
2579
+ background-color: var(--pf-v6-c-divider--Color);
2580
+ }
2581
+
2582
+ .pf-v6-c-divider.pf-m-horizontal {
2583
+ flex-direction: row;
2584
+ width: 100%;
2585
+ height: var(--pf-v6-c-divider--Size);
2586
+ }
2587
+
2588
+ .pf-v6-c-divider.pf-m-vertical {
2589
+ flex-direction: column;
2590
+ width: var(--pf-v6-c-divider--Size);
2591
+ height: inherit;
2592
+ }
2593
+
2594
+ .pf-v6-c-divider.pf-m-inset-none {
2595
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2596
+ }
2597
+
2598
+ .pf-v6-c-divider.pf-m-inset-xs {
2599
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2600
+ }
2601
+
2602
+ .pf-v6-c-divider.pf-m-inset-sm {
2603
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2604
+ }
2605
+
2606
+ .pf-v6-c-divider.pf-m-inset-md {
2607
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2608
+ }
2609
+
2610
+ .pf-v6-c-divider.pf-m-inset-lg {
2611
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2612
+ }
2613
+
2614
+ .pf-v6-c-divider.pf-m-inset-xl {
2615
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2616
+ }
2617
+
2618
+ .pf-v6-c-divider.pf-m-inset-2xl {
2619
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2620
+ }
2621
+
2622
+ .pf-v6-c-divider.pf-m-inset-3xl {
2623
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2624
+ }
2625
+
2626
+ @media (min-width: 36rem) {
2627
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2628
+ flex-direction: row;
2629
+ width: 100%;
2630
+ height: var(--pf-v6-c-divider--Size);
2631
+ }
2632
+ }
2633
+ @media (min-width: 36rem) {
2634
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2635
+ flex-direction: column;
2636
+ width: var(--pf-v6-c-divider--Size);
2637
+ height: inherit;
2638
+ }
2639
+ }
2640
+ @media (min-width: 36rem) {
2641
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2642
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2643
+ }
2644
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2645
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2646
+ }
2647
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2648
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2649
+ }
2650
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2651
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2652
+ }
2653
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2654
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2655
+ }
2656
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2657
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2658
+ }
2659
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2660
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2661
+ }
2662
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2663
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2664
+ }
2665
+ }
2666
+ @media (min-width: 48rem) {
2667
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2668
+ flex-direction: row;
2669
+ width: 100%;
2670
+ height: var(--pf-v6-c-divider--Size);
2671
+ }
2672
+ }
2673
+ @media (min-width: 48rem) {
2674
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2675
+ flex-direction: column;
2676
+ width: var(--pf-v6-c-divider--Size);
2677
+ height: inherit;
2678
+ }
2679
+ }
2680
+ @media (min-width: 48rem) {
2681
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2682
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2683
+ }
2684
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2685
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2686
+ }
2687
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2688
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2689
+ }
2690
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2691
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2692
+ }
2693
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2694
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2695
+ }
2696
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2697
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2698
+ }
2699
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2700
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2701
+ }
2702
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2703
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2704
+ }
2705
+ }
2706
+ @media (min-width: 62rem) {
2707
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2708
+ flex-direction: row;
2709
+ width: 100%;
2710
+ height: var(--pf-v6-c-divider--Size);
2711
+ }
2712
+ }
2713
+ @media (min-width: 62rem) {
2714
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2715
+ flex-direction: column;
2716
+ width: var(--pf-v6-c-divider--Size);
2717
+ height: inherit;
2718
+ }
2719
+ }
2720
+ @media (min-width: 62rem) {
2721
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2722
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2723
+ }
2724
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2725
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2726
+ }
2727
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2728
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2729
+ }
2730
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2731
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2732
+ }
2733
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2734
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2735
+ }
2736
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2737
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2738
+ }
2739
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2740
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2741
+ }
2742
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2743
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2744
+ }
2745
+ }
2746
+ @media (min-width: 75rem) {
2747
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2748
+ flex-direction: row;
2749
+ width: 100%;
2750
+ height: var(--pf-v6-c-divider--Size);
2751
+ }
2752
+ }
2753
+ @media (min-width: 75rem) {
2754
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2755
+ flex-direction: column;
2756
+ width: var(--pf-v6-c-divider--Size);
2757
+ height: inherit;
2758
+ }
2759
+ }
2760
+ @media (min-width: 75rem) {
2761
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2762
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2763
+ }
2764
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2765
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2766
+ }
2767
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2768
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2769
+ }
2770
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2771
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2772
+ }
2773
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2774
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2775
+ }
2776
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2777
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2778
+ }
2779
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
2780
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2781
+ }
2782
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
2783
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2784
+ }
2785
+ }
2786
+ @media (min-width: 90.625rem) {
2787
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
2788
+ flex-direction: row;
2789
+ width: 100%;
2790
+ height: var(--pf-v6-c-divider--Size);
2791
+ }
2792
+ }
2793
+ @media (min-width: 90.625rem) {
2794
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
2795
+ flex-direction: column;
2796
+ width: var(--pf-v6-c-divider--Size);
2797
+ height: inherit;
2798
+ }
2799
+ }
2800
+ @media (min-width: 90.625rem) {
2801
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
2802
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2803
+ }
2804
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
2805
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2806
+ }
2807
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
2808
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2809
+ }
2810
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
2811
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2812
+ }
2813
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
2814
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2815
+ }
2816
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
2817
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2818
+ }
2819
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
2820
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2821
+ }
2822
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
2823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2824
+ }
2825
+ }
2826
+ .pf-v6-c-tooltip {
2827
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
2828
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
2829
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
2830
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2831
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2832
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
2833
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
2834
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
2835
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
2836
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
2837
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
2838
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
2839
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
2840
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
2841
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
2842
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
2843
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
2844
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
2845
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
2846
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
2847
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
2848
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
2849
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
2850
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
2851
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
2852
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
2853
+ }
2854
+
2855
+ .pf-v6-c-tooltip {
2856
+ position: relative;
2857
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
2858
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
2757
2859
  }
2758
2860
 
2759
- .pf-v6-c-button__icon-favorited {
2760
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2861
+ .pf-v6-c-tooltip:is(.pf-m-top,
2862
+ .pf-m-top-left,
2863
+ .pf-m-top-right) {
2864
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
2865
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
2866
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
2867
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
2868
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
2761
2869
  }
2762
2870
 
2763
- .pf-v6-c-button__progress {
2764
- position: absolute;
2765
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2766
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2767
- line-height: 1;
2768
- color: var(--pf-v6-c-button__progress--Color);
2769
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2871
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
2872
+ .pf-m-bottom-left,
2873
+ .pf-m-bottom-right) {
2874
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
2875
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
2876
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
2877
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
2878
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
2770
2879
  }
2771
2880
 
2772
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2773
- --pf-v6-c-spinner--Color: currentcolor;
2881
+ .pf-v6-c-tooltip:is(.pf-m-left,
2882
+ .pf-m-left-top,
2883
+ .pf-m-left-bottom) {
2884
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
2885
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
2886
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
2887
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
2888
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
2774
2889
  }
2775
2890
 
2776
- .pf-v6-c-button__text {
2777
- text-decoration: inherit;
2891
+ .pf-v6-c-tooltip:is(.pf-m-right,
2892
+ .pf-m-right-top,
2893
+ .pf-m-right-bottom) {
2894
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
2895
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
2896
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
2897
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
2898
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
2778
2899
  }
2779
2900
 
2780
- .pf-v6-c-button__count {
2781
- display: inline-flex;
2782
- align-items: center;
2901
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
2902
+ .pf-m-right-top) {
2903
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
2904
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
2783
2905
  }
2784
2906
 
2785
- .pf-v6-c-button--hamburger-icon path {
2786
- fill: none;
2787
- stroke: currentcolor;
2788
- stroke-linecap: round;
2789
- stroke-linejoin: round;
2790
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2907
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
2908
+ .pf-m-right-bottom) {
2909
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
2910
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
2791
2911
  }
2792
2912
 
2793
- .pf-v6-c-button--hamburger-icon--top {
2794
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
2913
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
2914
+ .pf-m-bottom-left) {
2915
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
2916
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
2795
2917
  }
2796
2918
 
2797
- .pf-v6-c-button--hamburger-icon--middle {
2798
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2919
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
2920
+ .pf-m-bottom-right) {
2921
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
2922
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
2799
2923
  }
2800
2924
 
2801
- .pf-v6-c-button--hamburger-icon--arrow {
2802
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2925
+ .pf-v6-c-tooltip__content {
2926
+ position: relative;
2927
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
2928
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
2929
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
2930
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
2931
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
2932
+ color: var(--pf-v6-c-tooltip__content--Color);
2933
+ text-align: center;
2934
+ word-break: break-word;
2935
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
2936
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
2803
2937
  }
2804
2938
 
2805
- .pf-v6-c-button--hamburger-icon--bottom {
2806
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2939
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
2940
+ text-align: start;
2807
2941
  }
2808
2942
 
2809
- @keyframes pf-v6-c-button-icon-notify {
2810
- 33% {
2811
- transform: rotate(30deg);
2812
- }
2813
- 66% {
2814
- transform: rotate(-60deg);
2815
- }
2816
- }
2817
- @keyframes pf-v6-c-button-icon-favorited {
2818
- 50% {
2819
- scale: 1.5;
2820
- }
2943
+ .pf-v6-c-tooltip__arrow {
2944
+ position: absolute;
2945
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
2946
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
2947
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
2948
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
2949
+ width: var(--pf-v6-c-tooltip__arrow--Width);
2950
+ height: var(--pf-v6-c-tooltip__arrow--Height);
2951
+ pointer-events: none;
2952
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
2953
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
2954
+ 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));
2821
2955
  }
2956
+
2822
2957
  .pf-v6-c-menu {
2823
2958
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
2824
2959
  --pf-v6-c-menu--Width: auto;
@@ -3430,175 +3565,59 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3430
3565
  --pf-v6-c-check__input--TranslateY: none;
3431
3566
  }
3432
3567
 
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-breadcrumb {
3489
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3490
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3491
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3492
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3493
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3494
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3495
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3496
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3497
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3498
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3499
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3500
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3501
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3502
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3503
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3504
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3505
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3506
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3507
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3508
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3509
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3510
- }
3511
-
3512
- .pf-v6-c-breadcrumb {
3513
- display: inline-flex;
3514
- }
3515
-
3516
- .pf-v6-c-breadcrumb__list {
3517
- display: flex;
3518
- flex-wrap: wrap;
3519
- align-items: center;
3520
- }
3521
-
3522
- .pf-v6-c-breadcrumb__item {
3523
- display: flex;
3524
- align-items: baseline;
3525
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3526
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3527
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3528
- white-space: nowrap;
3529
- list-style: none;
3530
- }
3531
-
3532
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3533
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3534
- }
3535
-
3536
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3537
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3538
- }
3539
-
3540
- .pf-v6-c-breadcrumb__item-divider {
3541
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3542
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3543
- line-height: 1;
3544
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3545
- }
3546
-
3547
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3548
- scale: -1 1;
3549
- }
3550
-
3551
- .pf-v6-c-breadcrumb__link {
3552
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3553
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3554
- font-size: inherit;
3555
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3556
- line-height: inherit;
3557
- color: var(--pf-v6-c-breadcrumb__link--Color);
3558
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3559
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3560
- word-break: break-word;
3561
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3568
+ .pf-v6-c-menu__item-toggle-icon {
3569
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
3562
3570
  }
3563
3571
 
3564
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3565
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3566
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3567
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3572
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
3573
+ scale: -1 1;
3568
3574
  }
3569
3575
 
3570
- .pf-v6-c-breadcrumb__link.pf-m-current {
3571
- cursor: default;
3576
+ .pf-v6-c-menu__item-icon {
3577
+ color: var(--pf-v6-c-menu__item--icon--Color, inherit);
3572
3578
  }
3573
3579
 
3574
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3575
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3576
- text-decoration-line: none;
3580
+ .pf-v6-c-menu__item-select-icon,
3581
+ .pf-v6-c-menu__item-external-icon {
3582
+ opacity: 0;
3577
3583
  }
3578
3584
 
3579
- button.pf-v6-c-breadcrumb__link {
3580
- border: none;
3585
+ .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),
3586
+ .pf-v6-c-menu__item-action.pf-m-favorited,
3587
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover,
3588
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
3589
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3581
3590
  }
3582
3591
 
3583
- .pf-v6-c-breadcrumb__dropdown {
3584
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3585
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3586
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3587
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3592
+ .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),
3593
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
3594
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
3595
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
3596
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
3588
3597
  }
3589
3598
 
3590
- .pf-v6-c-breadcrumb__heading {
3591
- display: inline;
3592
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3599
+ .pf-v6-c-menu__breadcrumb {
3600
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-v6-c-menu__breadcrumb--FontSize);
3601
+ padding-block-start: var(--pf-v6-c-menu__breadcrumb--PaddingBlockStart);
3602
+ padding-block-end: var(--pf-v6-c-menu__breadcrumb--PaddingBlockEnd);
3603
+ padding-inline-start: var(--pf-v6-c-menu__breadcrumb--PaddingInlineStart);
3604
+ padding-inline-end: var(--pf-v6-c-menu__breadcrumb--PaddingInlineEnd);
3593
3605
  }
3594
3606
 
3595
- .pf-v6-c-breadcrumb__link,
3596
- .pf-v6-c-breadcrumb__heading {
3597
- white-space: normal;
3607
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu {
3608
+ min-width: auto;
3609
+ padding-block-start: var(--pf-v6-c-menu--PaddingBlockStart);
3610
+ padding-block-end: var(--pf-v6-c-menu--PaddingBlockEnd);
3598
3611
  }
3599
3612
 
3600
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3601
- display: none;
3613
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu__content {
3614
+ height: auto;
3615
+ }
3616
+
3617
+ .pf-v6-c-menu__breadcrumb .pf-v6-c-menu-toggle {
3618
+ --pf-v6-c-menu-toggle--BorderWidth: 0;
3619
+ --pf-v6-c-menu-toggle--BorderColor: transparent;
3620
+ outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3602
3621
  }
3603
3622
 
3604
3623
  .pf-v6-c-spinner {
@@ -3688,133 +3707,118 @@ button.pf-v6-c-breadcrumb__link {
3688
3707
  transform: rotate(720deg);
3689
3708
  }
3690
3709
  }
3691
- .pf-v6-c-tooltip {
3692
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
3693
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
3694
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3695
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3696
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3697
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
3698
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
3699
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3700
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
3701
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
3702
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
3703
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
3704
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
3705
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
3706
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
3707
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
3708
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
3709
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
3710
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
3711
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
3712
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
3713
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
3714
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
3715
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
3716
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
3717
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
3710
+ .pf-v6-c-breadcrumb {
3711
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
3712
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3713
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3714
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3715
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3716
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3717
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3718
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3719
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3720
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3721
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3722
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3723
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3724
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3725
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3726
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3727
+ --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
3728
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3729
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3730
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3731
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3718
3732
  }
3719
3733
 
3720
- .pf-v6-c-tooltip {
3721
- position: relative;
3722
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
3723
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
3734
+ .pf-v6-c-breadcrumb {
3735
+ display: inline-flex;
3724
3736
  }
3725
3737
 
3726
- .pf-v6-c-tooltip:is(.pf-m-top,
3727
- .pf-m-top-left,
3728
- .pf-m-top-right) {
3729
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
3730
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
3731
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
3732
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3733
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
3738
+ .pf-v6-c-breadcrumb__list {
3739
+ display: flex;
3740
+ flex-wrap: wrap;
3741
+ align-items: center;
3734
3742
  }
3735
3743
 
3736
- .pf-v6-c-tooltip:is(.pf-m-bottom,
3737
- .pf-m-bottom-left,
3738
- .pf-m-bottom-right) {
3739
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
3740
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
3741
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
3742
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
3743
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
3744
+ .pf-v6-c-breadcrumb__item {
3745
+ display: flex;
3746
+ align-items: baseline;
3747
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3748
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3749
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3750
+ white-space: nowrap;
3751
+ list-style: none;
3744
3752
  }
3745
3753
 
3746
- .pf-v6-c-tooltip:is(.pf-m-left,
3747
- .pf-m-left-top,
3748
- .pf-m-left-bottom) {
3749
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
3750
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
3751
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3752
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
3753
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
3754
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3755
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3754
3756
  }
3755
3757
 
3756
- .pf-v6-c-tooltip:is(.pf-m-right,
3757
- .pf-m-right-top,
3758
- .pf-m-right-bottom) {
3759
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
3760
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
3761
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
3762
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
3763
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
3758
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3759
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3764
3760
  }
3765
3761
 
3766
- .pf-v6-c-tooltip:is(.pf-m-left-top,
3767
- .pf-m-right-top) {
3768
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
3769
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
3762
+ .pf-v6-c-breadcrumb__item-divider {
3763
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3764
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3765
+ line-height: 1;
3766
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3770
3767
  }
3771
3768
 
3772
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
3773
- .pf-m-right-bottom) {
3774
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
3775
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
3769
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3770
+ scale: -1 1;
3776
3771
  }
3777
3772
 
3778
- .pf-v6-c-tooltip:is(.pf-m-top-left,
3779
- .pf-m-bottom-left) {
3780
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
3781
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
3773
+ .pf-v6-c-breadcrumb__link {
3774
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3775
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3776
+ font-size: inherit;
3777
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3778
+ line-height: inherit;
3779
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3780
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3781
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3782
+ word-break: break-word;
3783
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3782
3784
  }
3783
3785
 
3784
- .pf-v6-c-tooltip:is(.pf-m-top-right,
3785
- .pf-m-bottom-right) {
3786
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
3787
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
3786
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3787
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3788
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3789
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3788
3790
  }
3789
3791
 
3790
- .pf-v6-c-tooltip__content {
3791
- position: relative;
3792
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
3793
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
3794
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
3795
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
3796
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
3797
- color: var(--pf-v6-c-tooltip__content--Color);
3798
- text-align: center;
3799
- word-break: break-word;
3800
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
3801
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
3792
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3793
+ cursor: default;
3802
3794
  }
3803
3795
 
3804
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
3805
- text-align: start;
3796
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3797
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3798
+ text-decoration-line: none;
3806
3799
  }
3807
3800
 
3808
- .pf-v6-c-tooltip__arrow {
3809
- position: absolute;
3810
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
3811
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
3812
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
3813
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
3814
- width: var(--pf-v6-c-tooltip__arrow--Width);
3815
- height: var(--pf-v6-c-tooltip__arrow--Height);
3816
- pointer-events: none;
3817
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
3818
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
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));
3801
+ button.pf-v6-c-breadcrumb__link {
3802
+ border: none;
3803
+ }
3804
+
3805
+ .pf-v6-c-breadcrumb__dropdown {
3806
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3807
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3808
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3809
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3810
+ }
3811
+
3812
+ .pf-v6-c-breadcrumb__heading {
3813
+ display: inline;
3814
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3815
+ }
3816
+
3817
+ .pf-v6-c-breadcrumb__link,
3818
+ .pf-v6-c-breadcrumb__heading {
3819
+ white-space: normal;
3820
+ }
3821
+
3822
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3823
+ display: none;
3820
3824
  }