@patternfly/react-templates 6.5.0 → 6.5.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 (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/components/package.json +1 -1
  3. package/dist/dynamic/components/Dropdown/package.json +1 -1
  4. package/dist/dynamic/components/Select/package.json +1 -1
  5. package/dist/umd/assets/{output-C-4RSG3A.css → output-CLKvL5r0.css} +766 -766
  6. package/package.json +6 -6
package/dist/umd/assets/{output-C-4RSG3A.css → output-CLKvL5r0.css} RENAMED
@@ -3,160 +3,161 @@
3
3
  pointer-events: none;
4
4
  }
5
5
 
6
- .pf-v6-c-label-group {
7
- --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
8
- --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
9
- --pf-v6-c-label-group--MaxWidth: 100%;
10
- --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
11
- --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
12
- --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
13
- --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
14
- --pf-v6-c-label-group__main--MaxWidth: 100%;
15
- --pf-v6-c-label-group__main--MinWidth: 0;
16
- --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
17
- --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
18
- --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
19
- --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
20
- --pf-v6-c-label-group__list--MaxWidth: 100%;
21
- --pf-v6-c-label-group__list--MinWidth: 0;
22
- --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
23
- --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
24
- --pf-v6-c-label-group__list-item--MaxWidth: 100%;
25
- --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
26
- --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
27
- --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
28
- --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
29
- --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
30
- --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
31
- --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
32
- --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33
- --pf-v6-c-label-group__label--MaxWidth: 18ch;
34
- --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
35
- --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
36
- --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
- --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
38
- --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
39
- --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
40
- --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
41
- --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
42
- --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
43
- --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
6
+ .pf-v6-c-badge {
7
+ --pf-v6-c-badge--BorderColor: transparent;
8
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
9
+ --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
10
+ --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
11
+ --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
12
+ --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
14
+ --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
15
+ --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
16
+ --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
17
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
18
+ --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
19
+ --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
20
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
21
+ --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
22
+ --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
23
+ --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
24
+ --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
25
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
26
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
27
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
44
28
  }
45
29
 
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);
30
+ .pf-v6-c-badge {
31
+ position: relative;
32
+ display: inline-block;
33
+ min-width: var(--pf-v6-c-badge--MinWidth);
34
+ padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
35
+ padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
36
+ font-size: var(--pf-v6-c-badge--FontSize);
37
+ font-weight: var(--pf-v6-c-badge--FontWeight);
38
+ color: var(--pf-v6-c-badge--Color);
39
+ text-align: center;
40
+ white-space: nowrap;
41
+ background-color: var(--pf-v6-c-badge--BackgroundColor);
42
+ border-radius: var(--pf-v6-c-badge--BorderRadius);
52
43
  }
53
44
 
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);
45
+ .pf-v6-c-badge::after {
46
+ position: absolute;
47
+ inset: 0;
48
+ pointer-events: none;
49
+ content: "";
50
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
51
+ border-radius: inherit;
62
52
  }
63
53
 
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);
54
+ .pf-v6-c-badge.pf-m-read {
55
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
56
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
57
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
58
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
72
59
  }
73
60
 
74
- .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
75
- align-items: flex-start;
61
+ .pf-v6-c-badge.pf-m-unread {
62
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
63
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
64
+ --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
76
65
  }
77
66
 
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);
67
+ .pf-v6-c-badge.pf-m-disabled {
68
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
69
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
82
70
  }
83
71
 
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);
72
+ .pf-v6-c-badge.pf-m-disabled::after {
73
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
87
74
  }
88
75
 
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;
76
+ .pf-v6-c-badge__toggle-icon {
77
+ margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
78
+ color: var(--pf-v6-c-badge__toggle-icon--Color);
93
79
  }
94
80
 
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;
81
+ .pf-v6-c-check {
82
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
83
+ --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
84
+ --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
85
+ --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
86
+ --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
87
+ --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
88
+ --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
89
+ --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
90
+ --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
91
+ --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
92
+ --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
93
+ --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
94
+ --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
95
+ --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
100
96
  }
101
97
 
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);
98
+ .pf-v6-c-check {
99
+ display: grid;
100
+ grid-template-columns: auto 1fr;
101
+ grid-gap: var(--pf-v6-c-check--GridGap);
102
+ accent-color: var(--pf-v6-c-check--AccentColor);
110
103
  }
111
104
 
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);
105
+ .pf-v6-c-check.pf-m-standalone {
106
+ display: inline-grid;
107
+ grid-template-columns: auto;
108
+ min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
118
109
  }
119
110
 
120
- .pf-v6-c-label-group__list-item {
121
- display: inline-flex;
122
- max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
111
+ .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
112
+ align-self: center;
113
+ transform: none;
123
114
  }
124
115
 
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);
116
+ .pf-v6-c-check__input {
117
+ align-self: start;
118
+ font-size: var(--pf-v6-c-check__label--FontSize);
119
+ line-height: var(--pf-v6-c-check__label--LineHeight);
120
+ transform: translateY(var(--pf-v6-c-check__input--TranslateY));
130
121
  }
131
122
 
132
- .pf-v6-c-label-group__close {
133
- display: flex;
134
- align-self: flex-start;
123
+ .pf-v6-c-check__label {
124
+ font-size: var(--pf-v6-c-check__label--FontSize);
125
+ font-weight: var(--pf-v6-c-check__label--FontWeight);
126
+ line-height: var(--pf-v6-c-check__label--LineHeight);
127
+ color: var(--pf-v6-c-check__label--Color);
135
128
  }
136
129
 
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);
130
+ .pf-v6-c-check__description {
131
+ grid-column: 2;
132
+ font-size: var(--pf-v6-c-check__description--FontSize);
133
+ color: var(--pf-v6-c-check__description--Color);
143
134
  }
144
135
 
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
- scrollbar-width: none;
154
- -ms-overflow-style: none;
155
- border: 0;
136
+ .pf-v6-c-check__body {
137
+ grid-column: 2;
156
138
  }
157
139
 
158
- .pf-v6-c-label-group__textarea::-webkit-scrollbar {
159
- display: none;
140
+ .pf-v6-c-check__label,
141
+ .pf-v6-c-check__input {
142
+ justify-self: start;
143
+ }
144
+
145
+ label.pf-v6-c-check, .pf-v6-c-check__label,
146
+ .pf-v6-c-check__input {
147
+ cursor: pointer;
148
+ }
149
+
150
+ .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
151
+ .pf-v6-c-check__input:disabled,
152
+ .pf-v6-c-check__input.pf-m-disabled {
153
+ --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
154
+ cursor: not-allowed;
155
+ }
156
+
157
+ .pf-v6-c-check__label-required {
158
+ margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
159
+ font-size: var(--pf-v6-c-check__label-required--FontSize);
160
+ color: var(--pf-v6-c-check__label-required--Color);
160
161
  }
161
162
 
162
163
  .pf-v6-c-text-input-group {
@@ -403,79 +404,160 @@
403
404
  display: flex;
404
405
  }
405
406
 
406
- .pf-v6-c-badge {
407
- --pf-v6-c-badge--BorderColor: transparent;
408
- --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
409
- --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
410
- --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
411
- --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
412
- --pf-v6-c-badge--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
413
- --pf-v6-c-badge--PaddingInlineStart: var(--pf-t--global--spacer--sm);
414
- --pf-v6-c-badge--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
415
- --pf-v6-c-badge--MinWidth: var(--pf-t--global--spacer--xl);
416
- --pf-v6-c-badge__toggle-icon--MarginInlineStart: var(--pf-t--global--spacer--xs);
417
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
418
- --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
419
- --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
420
- --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
421
- --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
422
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
423
- --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
424
- --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
425
- --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
426
- --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
427
- --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
407
+ .pf-v6-c-label-group {
408
+ --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
409
+ --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
410
+ --pf-v6-c-label-group--MaxWidth: 100%;
411
+ --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
412
+ --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
413
+ --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
414
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
415
+ --pf-v6-c-label-group__main--MaxWidth: 100%;
416
+ --pf-v6-c-label-group__main--MinWidth: 0;
417
+ --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
418
+ --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
419
+ --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
420
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
421
+ --pf-v6-c-label-group__list--MaxWidth: 100%;
422
+ --pf-v6-c-label-group__list--MinWidth: 0;
423
+ --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
424
+ --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
425
+ --pf-v6-c-label-group__list-item--MaxWidth: 100%;
426
+ --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
427
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
428
+ --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
429
+ --pf-v6-c-label-group--m-category--PaddingInlineStart: var(--pf-t--global--spacer--sm);
430
+ --pf-v6-c-label-group--m-category--BorderRadius: var(--pf-t--global--border--radius--small);
431
+ --pf-v6-c-label-group--m-category--BorderWidth: var(--pf-t--global--border--width--regular);
432
+ --pf-v6-c-label-group--m-category--BorderColor: var(--pf-t--global--border--color--default);
433
+ --pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
434
+ --pf-v6-c-label-group__label--MaxWidth: 18ch;
435
+ --pf-v6-c-label-group__close--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
436
+ --pf-v6-c-label-group__close--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
437
+ --pf-v6-c-label-group__close--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
438
+ --pf-v6-c-label-group__close--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
439
+ --pf-v6-c-label-group__close--c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
440
+ --pf-v6-c-label-group__textarea--MinWidth: 12.5rem;
441
+ --pf-v6-c-label-group__textarea--PaddingBlockStart: 0.125rem;
442
+ --pf-v6-c-label-group__textarea--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
443
+ --pf-v6-c-label-group__textarea--PaddingBlockEnd: 0;
444
+ --pf-v6-c-label-group__textarea--PaddingInlineStart: var(--pf-t--global--spacer--xs);
428
445
  }
429
446
 
430
- .pf-v6-c-badge {
431
- position: relative;
432
- display: inline-block;
433
- min-width: var(--pf-v6-c-badge--MinWidth);
434
- padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
435
- padding-inline-end: var(--pf-v6-c-badge--PaddingInlineEnd);
436
- font-size: var(--pf-v6-c-badge--FontSize);
437
- font-weight: var(--pf-v6-c-badge--FontWeight);
438
- color: var(--pf-v6-c-badge--Color);
439
- text-align: center;
440
- white-space: nowrap;
441
- background-color: var(--pf-v6-c-badge--BackgroundColor);
442
- border-radius: var(--pf-v6-c-badge--BorderRadius);
447
+ .pf-v6-c-label-group {
448
+ display: inline-flex;
449
+ row-gap: var(--pf-v6-c-label-group--RowGap);
450
+ column-gap: var(--pf-v6-c-label-group--ColumnGap);
451
+ align-items: center;
452
+ max-width: var(--pf-v6-c-label-group--MaxWidth);
443
453
  }
444
454
 
445
- .pf-v6-c-badge::after {
446
- position: absolute;
447
- inset: 0;
448
- pointer-events: none;
449
- content: "";
450
- border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
451
- border-radius: inherit;
455
+ .pf-v6-c-label-group.pf-m-category {
456
+ padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
457
+ padding-block-end: var(--pf-v6-c-label-group--m-category--PaddingBlockEnd);
458
+ padding-inline-start: var(--pf-v6-c-label-group--m-category--PaddingInlineStart);
459
+ padding-inline-end: var(--pf-v6-c-label-group--m-category--PaddingInlineEnd);
460
+ background-color: var(--pf-v6-c-label-group--m-category--BackgroundColor);
461
+ border: var(--pf-v6-c-label-group--m-category--BorderWidth) solid var(--pf-v6-c-label-group--m-category--BorderColor);
462
+ border-radius: var(--pf-v6-c-label-group--m-category--BorderRadius);
452
463
  }
453
464
 
454
- .pf-v6-c-badge.pf-m-read {
455
- --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
456
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
457
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
458
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
465
+ .pf-v6-c-label-group.pf-m-vertical {
466
+ --pf-v6-c-label-group--RowGap: var(--pf-v6-c-label-group--m-vertical--RowGap);
467
+ --pf-v6-c-label-group--ColumnGap: var(--pf-v6-c-label-group--m-vertical--ColumnGap);
468
+ --pf-v6-c-label-group__main--RowGap: var(--pf-v6-c-label-group--m-vertical__main--RowGap);
469
+ --pf-v6-c-label-group__main--ColumnGap: var(--pf-v6-c-label-group--m-vertical__main--ColumnGap);
470
+ --pf-v6-c-label-group__list--RowGap: var(--pf-v6-c-label-group--m-vertical__list--RowGap);
471
+ --pf-v6-c-label-group__list--ColumnGap: var(--pf-v6-c-label-group--m-vertical__list--ColumnGap);
472
+ --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-v6-c-label-group--m-vertical--m-category--PaddingInlineEnd);
459
473
  }
460
474
 
461
- .pf-v6-c-badge.pf-m-unread {
462
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-unread--Color);
463
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
464
- --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
475
+ .pf-v6-c-label-group.pf-m-vertical.pf-v6-c-label-group {
476
+ align-items: flex-start;
465
477
  }
466
478
 
467
- .pf-v6-c-badge.pf-m-disabled {
468
- --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
469
- --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
479
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
480
+ flex-direction: column;
481
+ align-items: flex-start;
482
+ max-width: var(--pf-v6-c-label-group__list--MaxWidth);
470
483
  }
471
484
 
472
- .pf-v6-c-badge.pf-m-disabled::after {
473
- border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
485
+ .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
486
+ flex-direction: column;
487
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
474
488
  }
475
489
 
476
- .pf-v6-c-badge__toggle-icon {
477
- margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
478
- color: var(--pf-v6-c-badge__toggle-icon--Color);
490
+ .pf-v6-c-label-group.pf-m-editable,
491
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
492
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list {
493
+ display: flex;
494
+ }
495
+
496
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
497
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list,
498
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__list-item.pf-m-textarea,
499
+ .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__textarea {
500
+ flex: 1;
501
+ }
502
+
503
+ .pf-v6-c-label-group__main {
504
+ display: flex;
505
+ flex: 1;
506
+ flex-wrap: wrap;
507
+ row-gap: var(--pf-v6-c-label-group__main--RowGap);
508
+ column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
509
+ align-items: baseline;
510
+ min-width: var(--pf-v6-c-label-group__main--MinWidth);
511
+ }
512
+
513
+ .pf-v6-c-label-group__list {
514
+ display: inline-flex;
515
+ flex-wrap: wrap;
516
+ row-gap: var(--pf-v6-c-label-group__list--RowGap);
517
+ column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
518
+ min-width: var(--pf-v6-c-label-group__list--MinWidth);
519
+ }
520
+
521
+ .pf-v6-c-label-group__list-item {
522
+ display: inline-flex;
523
+ max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
524
+ }
525
+
526
+ .pf-v6-c-label-group__label {
527
+ overflow: hidden;
528
+ text-overflow: ellipsis;
529
+ white-space: nowrap;
530
+ max-width: var(--pf-v6-c-label-group__label--MaxWidth);
531
+ }
532
+
533
+ .pf-v6-c-label-group__close {
534
+ display: flex;
535
+ align-self: flex-start;
536
+ }
537
+
538
+ .pf-v6-c-label-group__close .pf-v6-c-button {
539
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-label-group__close--c-button--FontSize);
540
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label-group__close--c-button--PaddingBlockStart);
541
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: var(--pf-v6-c-label-group__close--c-button--PaddingInlineEnd);
542
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: var(--pf-v6-c-label-group__close--c-button--PaddingBlockEnd);
543
+ --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: var(--pf-v6-c-label-group__close--c-button--PaddingInlineStart);
544
+ }
545
+
546
+ .pf-v6-c-label-group__textarea {
547
+ min-width: var(--pf-v6-c-label-group__textarea--MinWidth);
548
+ padding-block-start: var(--pf-v6-c-label-group__textarea--PaddingBlockStart);
549
+ padding-block-end: var(--pf-v6-c-label-group__textarea--PaddingBlockEnd);
550
+ padding-inline-start: var(--pf-v6-c-label-group__textarea--PaddingInlineStart);
551
+ padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
552
+ white-space: nowrap;
553
+ resize: none;
554
+ scrollbar-width: none;
555
+ -ms-overflow-style: none;
556
+ border: 0;
557
+ }
558
+
559
+ .pf-v6-c-label-group__textarea::-webkit-scrollbar {
560
+ display: none;
479
561
  }
480
562
 
481
563
  .pf-v6-c-menu-toggle {
@@ -1076,327 +1158,6 @@
1076
1158
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
1077
1159
  }
1078
1160
 
1079
- .pf-v6-c-divider {
1080
- --pf-v6-c-divider--Display: flex;
1081
- --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
1082
- --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
1083
- --pf-v6-c-divider--before--FlexBasis: 100%;
1084
- }
1085
-
1086
- .pf-v6-c-divider {
1087
- flex-direction: row;
1088
- width: 100%;
1089
- height: var(--pf-v6-c-divider--Size);
1090
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
1091
- --pf-v6-hidden-visible--hidden--Display: none;
1092
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1093
- display: var(--pf-v6-hidden-visible--Display);
1094
- }
1095
-
1096
- .pf-v6-c-divider.pf-m-hidden {
1097
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1098
- }
1099
-
1100
- @media screen and (min-width: 36rem) {
1101
- .pf-v6-c-divider.pf-m-hidden-on-sm {
1102
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1103
- }
1104
- .pf-v6-c-divider.pf-m-visible-on-sm {
1105
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1106
- }
1107
- }
1108
- @media screen and (min-width: 48rem) {
1109
- .pf-v6-c-divider.pf-m-hidden-on-md {
1110
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1111
- }
1112
- .pf-v6-c-divider.pf-m-visible-on-md {
1113
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1114
- }
1115
- }
1116
- @media screen and (min-width: 62rem) {
1117
- .pf-v6-c-divider.pf-m-hidden-on-lg {
1118
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1119
- }
1120
- .pf-v6-c-divider.pf-m-visible-on-lg {
1121
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1122
- }
1123
- }
1124
- @media screen and (min-width: 75rem) {
1125
- .pf-v6-c-divider.pf-m-hidden-on-xl {
1126
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1127
- }
1128
- .pf-v6-c-divider.pf-m-visible-on-xl {
1129
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1130
- }
1131
- }
1132
- @media screen and (min-width: 90.625rem) {
1133
- .pf-v6-c-divider.pf-m-hidden-on-2xl {
1134
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
1135
- }
1136
- .pf-v6-c-divider.pf-m-visible-on-2xl {
1137
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
1138
- }
1139
- }
1140
- .pf-v6-c-divider {
1141
- flex-shrink: 0;
1142
- align-items: stretch;
1143
- align-self: stretch;
1144
- justify-content: center;
1145
- border: 0;
1146
- }
1147
-
1148
- .pf-v6-c-divider::before {
1149
- flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
1150
- content: "";
1151
- background-color: var(--pf-v6-c-divider--Color);
1152
- border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
1153
- border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
1154
- }
1155
-
1156
- .pf-v6-c-divider.pf-m-horizontal {
1157
- flex-direction: row;
1158
- width: 100%;
1159
- height: var(--pf-v6-c-divider--Size);
1160
- }
1161
-
1162
- .pf-v6-c-divider.pf-m-vertical {
1163
- flex-direction: column;
1164
- width: var(--pf-v6-c-divider--Size);
1165
- height: inherit;
1166
- }
1167
-
1168
- .pf-v6-c-divider.pf-m-inset-none {
1169
- --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
1170
- }
1171
-
1172
- .pf-v6-c-divider.pf-m-inset-xs {
1173
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1174
- }
1175
-
1176
- .pf-v6-c-divider.pf-m-inset-sm {
1177
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1178
- }
1179
-
1180
- .pf-v6-c-divider.pf-m-inset-md {
1181
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1182
- }
1183
-
1184
- .pf-v6-c-divider.pf-m-inset-lg {
1185
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1186
- }
1187
-
1188
- .pf-v6-c-divider.pf-m-inset-xl {
1189
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1190
- }
1191
-
1192
- .pf-v6-c-divider.pf-m-inset-2xl {
1193
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1194
- }
1195
-
1196
- .pf-v6-c-divider.pf-m-inset-3xl {
1197
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1198
- }
1199
-
1200
- @media (min-width: 36rem) {
1201
- .pf-v6-c-divider.pf-m-horizontal-on-sm {
1202
- flex-direction: row;
1203
- width: 100%;
1204
- height: var(--pf-v6-c-divider--Size);
1205
- }
1206
- }
1207
- @media (min-width: 36rem) {
1208
- .pf-v6-c-divider.pf-m-vertical-on-sm {
1209
- flex-direction: column;
1210
- width: var(--pf-v6-c-divider--Size);
1211
- height: inherit;
1212
- }
1213
- }
1214
- @media (min-width: 36rem) {
1215
- .pf-v6-c-divider.pf-m-inset-none-on-sm {
1216
- --pf-v6-c-divider--before--FlexBasis: 100%;
1217
- }
1218
- .pf-v6-c-divider.pf-m-inset-xs-on-sm {
1219
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1220
- }
1221
- .pf-v6-c-divider.pf-m-inset-sm-on-sm {
1222
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1223
- }
1224
- .pf-v6-c-divider.pf-m-inset-md-on-sm {
1225
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1226
- }
1227
- .pf-v6-c-divider.pf-m-inset-lg-on-sm {
1228
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1229
- }
1230
- .pf-v6-c-divider.pf-m-inset-xl-on-sm {
1231
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1232
- }
1233
- .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
1234
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1235
- }
1236
- .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
1237
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1238
- }
1239
- }
1240
- @media (min-width: 48rem) {
1241
- .pf-v6-c-divider.pf-m-horizontal-on-md {
1242
- flex-direction: row;
1243
- width: 100%;
1244
- height: var(--pf-v6-c-divider--Size);
1245
- }
1246
- }
1247
- @media (min-width: 48rem) {
1248
- .pf-v6-c-divider.pf-m-vertical-on-md {
1249
- flex-direction: column;
1250
- width: var(--pf-v6-c-divider--Size);
1251
- height: inherit;
1252
- }
1253
- }
1254
- @media (min-width: 48rem) {
1255
- .pf-v6-c-divider.pf-m-inset-none-on-md {
1256
- --pf-v6-c-divider--before--FlexBasis: 100%;
1257
- }
1258
- .pf-v6-c-divider.pf-m-inset-xs-on-md {
1259
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1260
- }
1261
- .pf-v6-c-divider.pf-m-inset-sm-on-md {
1262
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1263
- }
1264
- .pf-v6-c-divider.pf-m-inset-md-on-md {
1265
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1266
- }
1267
- .pf-v6-c-divider.pf-m-inset-lg-on-md {
1268
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1269
- }
1270
- .pf-v6-c-divider.pf-m-inset-xl-on-md {
1271
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1272
- }
1273
- .pf-v6-c-divider.pf-m-inset-2xl-on-md {
1274
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1275
- }
1276
- .pf-v6-c-divider.pf-m-inset-3xl-on-md {
1277
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1278
- }
1279
- }
1280
- @media (min-width: 62rem) {
1281
- .pf-v6-c-divider.pf-m-horizontal-on-lg {
1282
- flex-direction: row;
1283
- width: 100%;
1284
- height: var(--pf-v6-c-divider--Size);
1285
- }
1286
- }
1287
- @media (min-width: 62rem) {
1288
- .pf-v6-c-divider.pf-m-vertical-on-lg {
1289
- flex-direction: column;
1290
- width: var(--pf-v6-c-divider--Size);
1291
- height: inherit;
1292
- }
1293
- }
1294
- @media (min-width: 62rem) {
1295
- .pf-v6-c-divider.pf-m-inset-none-on-lg {
1296
- --pf-v6-c-divider--before--FlexBasis: 100%;
1297
- }
1298
- .pf-v6-c-divider.pf-m-inset-xs-on-lg {
1299
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1300
- }
1301
- .pf-v6-c-divider.pf-m-inset-sm-on-lg {
1302
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1303
- }
1304
- .pf-v6-c-divider.pf-m-inset-md-on-lg {
1305
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1306
- }
1307
- .pf-v6-c-divider.pf-m-inset-lg-on-lg {
1308
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1309
- }
1310
- .pf-v6-c-divider.pf-m-inset-xl-on-lg {
1311
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1312
- }
1313
- .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
1314
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1315
- }
1316
- .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
1317
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1318
- }
1319
- }
1320
- @media (min-width: 75rem) {
1321
- .pf-v6-c-divider.pf-m-horizontal-on-xl {
1322
- flex-direction: row;
1323
- width: 100%;
1324
- height: var(--pf-v6-c-divider--Size);
1325
- }
1326
- }
1327
- @media (min-width: 75rem) {
1328
- .pf-v6-c-divider.pf-m-vertical-on-xl {
1329
- flex-direction: column;
1330
- width: var(--pf-v6-c-divider--Size);
1331
- height: inherit;
1332
- }
1333
- }
1334
- @media (min-width: 75rem) {
1335
- .pf-v6-c-divider.pf-m-inset-none-on-xl {
1336
- --pf-v6-c-divider--before--FlexBasis: 100%;
1337
- }
1338
- .pf-v6-c-divider.pf-m-inset-xs-on-xl {
1339
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1340
- }
1341
- .pf-v6-c-divider.pf-m-inset-sm-on-xl {
1342
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1343
- }
1344
- .pf-v6-c-divider.pf-m-inset-md-on-xl {
1345
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1346
- }
1347
- .pf-v6-c-divider.pf-m-inset-lg-on-xl {
1348
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1349
- }
1350
- .pf-v6-c-divider.pf-m-inset-xl-on-xl {
1351
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1352
- }
1353
- .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
1354
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1355
- }
1356
- .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
1357
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1358
- }
1359
- }
1360
- @media (min-width: 90.625rem) {
1361
- .pf-v6-c-divider.pf-m-horizontal-on-2xl {
1362
- flex-direction: row;
1363
- width: 100%;
1364
- height: var(--pf-v6-c-divider--Size);
1365
- }
1366
- }
1367
- @media (min-width: 90.625rem) {
1368
- .pf-v6-c-divider.pf-m-vertical-on-2xl {
1369
- flex-direction: column;
1370
- width: var(--pf-v6-c-divider--Size);
1371
- height: inherit;
1372
- }
1373
- }
1374
- @media (min-width: 90.625rem) {
1375
- .pf-v6-c-divider.pf-m-inset-none-on-2xl {
1376
- --pf-v6-c-divider--before--FlexBasis: 100%;
1377
- }
1378
- .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
1379
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
1380
- }
1381
- .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
1382
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
1383
- }
1384
- .pf-v6-c-divider.pf-m-inset-md-on-2xl {
1385
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
1386
- }
1387
- .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
1388
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
1389
- }
1390
- .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
1391
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
1392
- }
1393
- .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
1394
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
1395
- }
1396
- .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
1397
- --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
1398
- }
1399
- }
1400
1161
  .pf-v6-c-label {
1401
1162
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1402
1163
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1940,88 +1701,6 @@ input.pf-v6-c-label__content {
1940
1701
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
1941
1702
  }
1942
1703
 
1943
- .pf-v6-c-check {
1944
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
1945
- --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
1946
- --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
1947
- --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
1948
- --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
1949
- --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
1950
- --pf-v6-c-check__label--FontSize: var(--pf-t--global--font--size--body--default);
1951
- --pf-v6-c-check__label--LineHeight: var(--pf-t--global--font--line-height--body);
1952
- --pf-v6-c-check__description--FontSize: var(--pf-t--global--font--size--body--sm);
1953
- --pf-v6-c-check__description--Color: var(--pf-t--global--text--color--subtle);
1954
- --pf-v6-c-check__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
1955
- --pf-v6-c-check__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
1956
- --pf-v6-c-check__label-required--Color: var(--pf-t--global--color--status--danger--default);
1957
- --pf-v6-c-check__input--TranslateY: calc((var(--pf-v6-c-check__label--LineHeight) * var(--pf-v6-c-check__label--FontSize) / 2 ) - 50%);
1958
- }
1959
-
1960
- .pf-v6-c-check {
1961
- display: grid;
1962
- grid-template-columns: auto 1fr;
1963
- grid-gap: var(--pf-v6-c-check--GridGap);
1964
- accent-color: var(--pf-v6-c-check--AccentColor);
1965
- }
1966
-
1967
- .pf-v6-c-check.pf-m-standalone {
1968
- display: inline-grid;
1969
- grid-template-columns: auto;
1970
- min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
1971
- }
1972
-
1973
- .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
1974
- align-self: center;
1975
- transform: none;
1976
- }
1977
-
1978
- .pf-v6-c-check__input {
1979
- align-self: start;
1980
- font-size: var(--pf-v6-c-check__label--FontSize);
1981
- line-height: var(--pf-v6-c-check__label--LineHeight);
1982
- transform: translateY(var(--pf-v6-c-check__input--TranslateY));
1983
- }
1984
-
1985
- .pf-v6-c-check__label {
1986
- font-size: var(--pf-v6-c-check__label--FontSize);
1987
- font-weight: var(--pf-v6-c-check__label--FontWeight);
1988
- line-height: var(--pf-v6-c-check__label--LineHeight);
1989
- color: var(--pf-v6-c-check__label--Color);
1990
- }
1991
-
1992
- .pf-v6-c-check__description {
1993
- grid-column: 2;
1994
- font-size: var(--pf-v6-c-check__description--FontSize);
1995
- color: var(--pf-v6-c-check__description--Color);
1996
- }
1997
-
1998
- .pf-v6-c-check__body {
1999
- grid-column: 2;
2000
- }
2001
-
2002
- .pf-v6-c-check__label,
2003
- .pf-v6-c-check__input {
2004
- justify-self: start;
2005
- }
2006
-
2007
- label.pf-v6-c-check, .pf-v6-c-check__label,
2008
- .pf-v6-c-check__input {
2009
- cursor: pointer;
2010
- }
2011
-
2012
- .pf-v6-c-check__label:disabled, .pf-v6-c-check__label.pf-m-disabled,
2013
- .pf-v6-c-check__input:disabled,
2014
- .pf-v6-c-check__input.pf-m-disabled {
2015
- --pf-v6-c-check__label--Color: var(--pf-v6-c-check__label--disabled--Color);
2016
- cursor: not-allowed;
2017
- }
2018
-
2019
- .pf-v6-c-check__label-required {
2020
- margin-inline-start: var(--pf-v6-c-check__label-required--MarginInlineStart);
2021
- font-size: var(--pf-v6-c-check__label-required--FontSize);
2022
- color: var(--pf-v6-c-check__label-required--Color);
2023
- }
2024
-
2025
1704
  .pf-v6-c-button {
2026
1705
  --pf-v6-c-button--Display: inline-flex;
2027
1706
  --pf-v6-c-button--AlignItems: baseline;
@@ -2949,100 +2628,541 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2949
2628
  display: revert;
2950
2629
  }
2951
2630
 
2952
- .pf-v6-c-button__icon {
2953
- margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2954
- margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2955
- color: var(--pf-v6-c-button__icon--Color);
2956
- transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2957
- transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2958
- transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2959
- transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2960
- rotate: var(--pf-v6-c-button__icon--Rotate);
2961
- scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2631
+ .pf-v6-c-button__icon {
2632
+ margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2633
+ margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2634
+ color: var(--pf-v6-c-button__icon--Color);
2635
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2636
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2637
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2638
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2639
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2640
+ scale: var(--pf-v6-c-button__icon--ScaleX) var(--pf-v6-c-button__icon--ScaleY);
2641
+ }
2642
+
2643
+ .pf-v6-c-button__icon.pf-m-start {
2644
+ --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
2645
+ }
2646
+
2647
+ .pf-v6-c-button__icon.pf-m-end {
2648
+ --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2649
+ }
2650
+
2651
+ .pf-v6-c-button__icon-favorite,
2652
+ .pf-v6-c-button__icon-favorited {
2653
+ grid-area: 1/1/1/1;
2654
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2655
+ transition-property: opacity;
2656
+ }
2657
+
2658
+ .pf-v6-c-button__icon-favorite {
2659
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2660
+ }
2661
+
2662
+ .pf-v6-c-button__icon-favorited {
2663
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2664
+ }
2665
+
2666
+ .pf-v6-c-button__progress {
2667
+ position: absolute;
2668
+ inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2669
+ inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
2670
+ line-height: 1;
2671
+ color: var(--pf-v6-c-button__progress--Color);
2672
+ transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
2673
+ }
2674
+
2675
+ .pf-v6-c-button__progress .pf-v6-c-spinner {
2676
+ --pf-v6-c-spinner--Color: currentcolor;
2677
+ }
2678
+
2679
+ .pf-v6-c-button__text {
2680
+ text-decoration: inherit;
2681
+ }
2682
+
2683
+ .pf-v6-c-button__count {
2684
+ display: inline-flex;
2685
+ align-items: center;
2686
+ }
2687
+
2688
+ .pf-v6-c-button--hamburger-icon path {
2689
+ fill: none;
2690
+ stroke: currentcolor;
2691
+ stroke-linecap: round;
2692
+ stroke-linejoin: round;
2693
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2694
+ }
2695
+
2696
+ .pf-v6-c-button--hamburger-icon--top {
2697
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2698
+ }
2699
+
2700
+ .pf-v6-c-button--hamburger-icon--middle {
2701
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2702
+ }
2703
+
2704
+ .pf-v6-c-button--hamburger-icon--arrow {
2705
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2706
+ }
2707
+
2708
+ .pf-v6-c-button--hamburger-icon--bottom {
2709
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2710
+ }
2711
+
2712
+ @keyframes pf-v6-c-button-icon-notify {
2713
+ 33% {
2714
+ transform: rotate(30deg);
2715
+ }
2716
+ 66% {
2717
+ transform: rotate(-60deg);
2718
+ }
2719
+ }
2720
+ @keyframes pf-v6-c-button-icon-favorited {
2721
+ 50% {
2722
+ scale: 1.5;
2723
+ }
2724
+ }
2725
+ .pf-v6-c-divider {
2726
+ --pf-v6-c-divider--Display: flex;
2727
+ --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
2728
+ --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
2729
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2730
+ }
2731
+
2732
+ .pf-v6-c-divider {
2733
+ flex-direction: row;
2734
+ width: 100%;
2735
+ height: var(--pf-v6-c-divider--Size);
2736
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-divider--Display);
2737
+ --pf-v6-hidden-visible--hidden--Display: none;
2738
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2739
+ display: var(--pf-v6-hidden-visible--Display);
2740
+ }
2741
+
2742
+ .pf-v6-c-divider.pf-m-hidden {
2743
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2744
+ }
2745
+
2746
+ @media screen and (min-width: 36rem) {
2747
+ .pf-v6-c-divider.pf-m-hidden-on-sm {
2748
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2749
+ }
2750
+ .pf-v6-c-divider.pf-m-visible-on-sm {
2751
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2752
+ }
2753
+ }
2754
+ @media screen and (min-width: 48rem) {
2755
+ .pf-v6-c-divider.pf-m-hidden-on-md {
2756
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2757
+ }
2758
+ .pf-v6-c-divider.pf-m-visible-on-md {
2759
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2760
+ }
2761
+ }
2762
+ @media screen and (min-width: 62rem) {
2763
+ .pf-v6-c-divider.pf-m-hidden-on-lg {
2764
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2765
+ }
2766
+ .pf-v6-c-divider.pf-m-visible-on-lg {
2767
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2768
+ }
2769
+ }
2770
+ @media screen and (min-width: 75rem) {
2771
+ .pf-v6-c-divider.pf-m-hidden-on-xl {
2772
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2773
+ }
2774
+ .pf-v6-c-divider.pf-m-visible-on-xl {
2775
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2776
+ }
2777
+ }
2778
+ @media screen and (min-width: 90.625rem) {
2779
+ .pf-v6-c-divider.pf-m-hidden-on-2xl {
2780
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
2781
+ }
2782
+ .pf-v6-c-divider.pf-m-visible-on-2xl {
2783
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
2784
+ }
2785
+ }
2786
+ .pf-v6-c-divider {
2787
+ flex-shrink: 0;
2788
+ align-items: stretch;
2789
+ align-self: stretch;
2790
+ justify-content: center;
2791
+ border: 0;
2792
+ }
2793
+
2794
+ .pf-v6-c-divider::before {
2795
+ flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
2796
+ content: "";
2797
+ background-color: var(--pf-v6-c-divider--Color);
2798
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
2799
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
2800
+ }
2801
+
2802
+ .pf-v6-c-divider.pf-m-horizontal {
2803
+ flex-direction: row;
2804
+ width: 100%;
2805
+ height: var(--pf-v6-c-divider--Size);
2806
+ }
2807
+
2808
+ .pf-v6-c-divider.pf-m-vertical {
2809
+ flex-direction: column;
2810
+ width: var(--pf-v6-c-divider--Size);
2811
+ height: inherit;
2812
+ }
2813
+
2814
+ .pf-v6-c-divider.pf-m-inset-none {
2815
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - 0% * 2);
2816
+ }
2817
+
2818
+ .pf-v6-c-divider.pf-m-inset-xs {
2819
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2820
+ }
2821
+
2822
+ .pf-v6-c-divider.pf-m-inset-sm {
2823
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2824
+ }
2825
+
2826
+ .pf-v6-c-divider.pf-m-inset-md {
2827
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2828
+ }
2829
+
2830
+ .pf-v6-c-divider.pf-m-inset-lg {
2831
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2832
+ }
2833
+
2834
+ .pf-v6-c-divider.pf-m-inset-xl {
2835
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2836
+ }
2837
+
2838
+ .pf-v6-c-divider.pf-m-inset-2xl {
2839
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2840
+ }
2841
+
2842
+ .pf-v6-c-divider.pf-m-inset-3xl {
2843
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2844
+ }
2845
+
2846
+ @media (min-width: 36rem) {
2847
+ .pf-v6-c-divider.pf-m-horizontal-on-sm {
2848
+ flex-direction: row;
2849
+ width: 100%;
2850
+ height: var(--pf-v6-c-divider--Size);
2851
+ }
2852
+ }
2853
+ @media (min-width: 36rem) {
2854
+ .pf-v6-c-divider.pf-m-vertical-on-sm {
2855
+ flex-direction: column;
2856
+ width: var(--pf-v6-c-divider--Size);
2857
+ height: inherit;
2858
+ }
2859
+ }
2860
+ @media (min-width: 36rem) {
2861
+ .pf-v6-c-divider.pf-m-inset-none-on-sm {
2862
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2863
+ }
2864
+ .pf-v6-c-divider.pf-m-inset-xs-on-sm {
2865
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2866
+ }
2867
+ .pf-v6-c-divider.pf-m-inset-sm-on-sm {
2868
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2869
+ }
2870
+ .pf-v6-c-divider.pf-m-inset-md-on-sm {
2871
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2872
+ }
2873
+ .pf-v6-c-divider.pf-m-inset-lg-on-sm {
2874
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2875
+ }
2876
+ .pf-v6-c-divider.pf-m-inset-xl-on-sm {
2877
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2878
+ }
2879
+ .pf-v6-c-divider.pf-m-inset-2xl-on-sm {
2880
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2881
+ }
2882
+ .pf-v6-c-divider.pf-m-inset-3xl-on-sm {
2883
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2884
+ }
2885
+ }
2886
+ @media (min-width: 48rem) {
2887
+ .pf-v6-c-divider.pf-m-horizontal-on-md {
2888
+ flex-direction: row;
2889
+ width: 100%;
2890
+ height: var(--pf-v6-c-divider--Size);
2891
+ }
2892
+ }
2893
+ @media (min-width: 48rem) {
2894
+ .pf-v6-c-divider.pf-m-vertical-on-md {
2895
+ flex-direction: column;
2896
+ width: var(--pf-v6-c-divider--Size);
2897
+ height: inherit;
2898
+ }
2899
+ }
2900
+ @media (min-width: 48rem) {
2901
+ .pf-v6-c-divider.pf-m-inset-none-on-md {
2902
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2903
+ }
2904
+ .pf-v6-c-divider.pf-m-inset-xs-on-md {
2905
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2906
+ }
2907
+ .pf-v6-c-divider.pf-m-inset-sm-on-md {
2908
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2909
+ }
2910
+ .pf-v6-c-divider.pf-m-inset-md-on-md {
2911
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2912
+ }
2913
+ .pf-v6-c-divider.pf-m-inset-lg-on-md {
2914
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2915
+ }
2916
+ .pf-v6-c-divider.pf-m-inset-xl-on-md {
2917
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2918
+ }
2919
+ .pf-v6-c-divider.pf-m-inset-2xl-on-md {
2920
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2921
+ }
2922
+ .pf-v6-c-divider.pf-m-inset-3xl-on-md {
2923
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2924
+ }
2925
+ }
2926
+ @media (min-width: 62rem) {
2927
+ .pf-v6-c-divider.pf-m-horizontal-on-lg {
2928
+ flex-direction: row;
2929
+ width: 100%;
2930
+ height: var(--pf-v6-c-divider--Size);
2931
+ }
2932
+ }
2933
+ @media (min-width: 62rem) {
2934
+ .pf-v6-c-divider.pf-m-vertical-on-lg {
2935
+ flex-direction: column;
2936
+ width: var(--pf-v6-c-divider--Size);
2937
+ height: inherit;
2938
+ }
2939
+ }
2940
+ @media (min-width: 62rem) {
2941
+ .pf-v6-c-divider.pf-m-inset-none-on-lg {
2942
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2943
+ }
2944
+ .pf-v6-c-divider.pf-m-inset-xs-on-lg {
2945
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2946
+ }
2947
+ .pf-v6-c-divider.pf-m-inset-sm-on-lg {
2948
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2949
+ }
2950
+ .pf-v6-c-divider.pf-m-inset-md-on-lg {
2951
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2952
+ }
2953
+ .pf-v6-c-divider.pf-m-inset-lg-on-lg {
2954
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2955
+ }
2956
+ .pf-v6-c-divider.pf-m-inset-xl-on-lg {
2957
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2958
+ }
2959
+ .pf-v6-c-divider.pf-m-inset-2xl-on-lg {
2960
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
2961
+ }
2962
+ .pf-v6-c-divider.pf-m-inset-3xl-on-lg {
2963
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
2964
+ }
2965
+ }
2966
+ @media (min-width: 75rem) {
2967
+ .pf-v6-c-divider.pf-m-horizontal-on-xl {
2968
+ flex-direction: row;
2969
+ width: 100%;
2970
+ height: var(--pf-v6-c-divider--Size);
2971
+ }
2972
+ }
2973
+ @media (min-width: 75rem) {
2974
+ .pf-v6-c-divider.pf-m-vertical-on-xl {
2975
+ flex-direction: column;
2976
+ width: var(--pf-v6-c-divider--Size);
2977
+ height: inherit;
2978
+ }
2979
+ }
2980
+ @media (min-width: 75rem) {
2981
+ .pf-v6-c-divider.pf-m-inset-none-on-xl {
2982
+ --pf-v6-c-divider--before--FlexBasis: 100%;
2983
+ }
2984
+ .pf-v6-c-divider.pf-m-inset-xs-on-xl {
2985
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
2986
+ }
2987
+ .pf-v6-c-divider.pf-m-inset-sm-on-xl {
2988
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
2989
+ }
2990
+ .pf-v6-c-divider.pf-m-inset-md-on-xl {
2991
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
2992
+ }
2993
+ .pf-v6-c-divider.pf-m-inset-lg-on-xl {
2994
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
2995
+ }
2996
+ .pf-v6-c-divider.pf-m-inset-xl-on-xl {
2997
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
2998
+ }
2999
+ .pf-v6-c-divider.pf-m-inset-2xl-on-xl {
3000
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3001
+ }
3002
+ .pf-v6-c-divider.pf-m-inset-3xl-on-xl {
3003
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3004
+ }
3005
+ }
3006
+ @media (min-width: 90.625rem) {
3007
+ .pf-v6-c-divider.pf-m-horizontal-on-2xl {
3008
+ flex-direction: row;
3009
+ width: 100%;
3010
+ height: var(--pf-v6-c-divider--Size);
3011
+ }
3012
+ }
3013
+ @media (min-width: 90.625rem) {
3014
+ .pf-v6-c-divider.pf-m-vertical-on-2xl {
3015
+ flex-direction: column;
3016
+ width: var(--pf-v6-c-divider--Size);
3017
+ height: inherit;
3018
+ }
3019
+ }
3020
+ @media (min-width: 90.625rem) {
3021
+ .pf-v6-c-divider.pf-m-inset-none-on-2xl {
3022
+ --pf-v6-c-divider--before--FlexBasis: 100%;
3023
+ }
3024
+ .pf-v6-c-divider.pf-m-inset-xs-on-2xl {
3025
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xs) * 2);
3026
+ }
3027
+ .pf-v6-c-divider.pf-m-inset-sm-on-2xl {
3028
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--sm) * 2);
3029
+ }
3030
+ .pf-v6-c-divider.pf-m-inset-md-on-2xl {
3031
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--md) * 2);
3032
+ }
3033
+ .pf-v6-c-divider.pf-m-inset-lg-on-2xl {
3034
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--lg) * 2);
3035
+ }
3036
+ .pf-v6-c-divider.pf-m-inset-xl-on-2xl {
3037
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--xl) * 2);
3038
+ }
3039
+ .pf-v6-c-divider.pf-m-inset-2xl-on-2xl {
3040
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--2xl) * 2);
3041
+ }
3042
+ .pf-v6-c-divider.pf-m-inset-3xl-on-2xl {
3043
+ --pf-v6-c-divider--before--FlexBasis: calc(100% - var(--pf-t--global--spacer--3xl) * 2);
3044
+ }
3045
+ }
3046
+ .pf-v6-c-breadcrumb {
3047
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3048
+ --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3049
+ --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3050
+ --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3051
+ --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3052
+ --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3053
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3054
+ --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3055
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3056
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3057
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3058
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3059
+ --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3060
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3061
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3062
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3063
+ --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3064
+ --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3065
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3066
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3067
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3068
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3069
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3070
+ }
3071
+
3072
+ .pf-v6-c-breadcrumb {
3073
+ display: inline-flex;
2962
3074
  }
2963
3075
 
2964
- .pf-v6-c-button__icon.pf-m-start {
2965
- --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
3076
+ .pf-v6-c-breadcrumb__list {
3077
+ display: flex;
3078
+ flex-wrap: wrap;
3079
+ align-items: center;
2966
3080
  }
2967
3081
 
2968
- .pf-v6-c-button__icon.pf-m-end {
2969
- --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
3082
+ .pf-v6-c-breadcrumb__item {
3083
+ display: flex;
3084
+ align-items: baseline;
3085
+ font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3086
+ font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3087
+ line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3088
+ white-space: nowrap;
3089
+ list-style: none;
2970
3090
  }
2971
3091
 
2972
- .pf-v6-c-button__icon-favorite,
2973
- .pf-v6-c-button__icon-favorited {
2974
- grid-area: 1/1/1/1;
2975
- transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2976
- transition-property: opacity;
3092
+ .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3093
+ --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
2977
3094
  }
2978
3095
 
2979
- .pf-v6-c-button__icon-favorite {
2980
- opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
3096
+ .pf-v6-c-breadcrumb__item:not(:last-child) {
3097
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
2981
3098
  }
2982
3099
 
2983
- .pf-v6-c-button__icon-favorited {
2984
- opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
3100
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3101
+ scale: -1 1;
2985
3102
  }
2986
3103
 
2987
- .pf-v6-c-button__progress {
2988
- position: absolute;
2989
- inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
2990
- inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
3104
+ .pf-v6-c-breadcrumb__item-divider {
3105
+ margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3106
+ font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
2991
3107
  line-height: 1;
2992
- color: var(--pf-v6-c-button__progress--Color);
2993
- transform: translate(var(--pf-v6-c-button__progress--TranslateX), var(--pf-v6-c-button__progress--TranslateY));
3108
+ color: var(--pf-v6-c-breadcrumb__item-divider--Color);
2994
3109
  }
2995
3110
 
2996
- .pf-v6-c-button__progress .pf-v6-c-spinner {
2997
- --pf-v6-c-spinner--Color: currentcolor;
3111
+ .pf-v6-c-breadcrumb__link {
3112
+ padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3113
+ padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3114
+ font-size: inherit;
3115
+ font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3116
+ line-height: inherit;
3117
+ color: var(--pf-v6-c-breadcrumb__link--Color);
3118
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3119
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3120
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3121
+ word-break: break-word;
3122
+ background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
2998
3123
  }
2999
3124
 
3000
- .pf-v6-c-button__text {
3001
- text-decoration: inherit;
3125
+ .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3126
+ --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3127
+ --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3128
+ --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3129
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3002
3130
  }
3003
3131
 
3004
- .pf-v6-c-button__count {
3005
- display: inline-flex;
3006
- align-items: center;
3132
+ .pf-v6-c-breadcrumb__link.pf-m-current {
3133
+ cursor: default;
3007
3134
  }
3008
3135
 
3009
- .pf-v6-c-button--hamburger-icon path {
3010
- fill: none;
3011
- stroke: currentcolor;
3012
- stroke-linecap: round;
3013
- stroke-linejoin: round;
3014
- transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
3136
+ .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3137
+ color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3138
+ text-decoration-line: none;
3015
3139
  }
3016
3140
 
3017
- .pf-v6-c-button--hamburger-icon--top {
3018
- d: var(--pf-v6-c-button--hamburger-icon--top--path);
3141
+ button.pf-v6-c-breadcrumb__link {
3142
+ border: none;
3019
3143
  }
3020
3144
 
3021
- .pf-v6-c-button--hamburger-icon--middle {
3022
- d: var(--pf-v6-c-button--hamburger-icon--middle--path);
3145
+ .pf-v6-c-breadcrumb__dropdown {
3146
+ margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3147
+ margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3148
+ margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3149
+ margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3023
3150
  }
3024
3151
 
3025
- .pf-v6-c-button--hamburger-icon--arrow {
3026
- d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
3152
+ .pf-v6-c-breadcrumb__heading {
3153
+ display: inline;
3154
+ font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3027
3155
  }
3028
3156
 
3029
- .pf-v6-c-button--hamburger-icon--bottom {
3030
- d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
3157
+ .pf-v6-c-breadcrumb__link,
3158
+ .pf-v6-c-breadcrumb__heading {
3159
+ white-space: normal;
3031
3160
  }
3032
3161
 
3033
- @keyframes pf-v6-c-button-icon-notify {
3034
- 33% {
3035
- transform: rotate(30deg);
3036
- }
3037
- 66% {
3038
- transform: rotate(-60deg);
3039
- }
3040
- }
3041
- @keyframes pf-v6-c-button-icon-favorited {
3042
- 50% {
3043
- scale: 1.5;
3044
- }
3162
+ .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3163
+ display: none;
3045
3164
  }
3165
+
3046
3166
  .pf-v6-c-menu {
3047
3167
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--xs);
3048
3168
  --pf-v6-c-menu--Width: auto;
@@ -3746,126 +3866,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3746
3866
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
3747
3867
  }
3748
3868
 
3749
- .pf-v6-c-breadcrumb {
3750
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3751
- --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
3752
- --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3753
- --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
3754
- --pf-v6-c-breadcrumb__item-divider--MarginInlineEnd: var(--pf-t--global--spacer--sm);
3755
- --pf-v6-c-breadcrumb__item-divider--FontSize: var( --pf-t--global--font--size--body--sm);
3756
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3757
- --pf-v6-c-breadcrumb__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3758
- --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
3759
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3760
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3761
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
3762
- --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
3763
- --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3764
- --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3765
- --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
3766
- --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
3767
- --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
3768
- --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
3769
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3770
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
3771
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3772
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
3773
- }
3774
-
3775
- .pf-v6-c-breadcrumb {
3776
- display: inline-flex;
3777
- }
3778
-
3779
- .pf-v6-c-breadcrumb__list {
3780
- display: flex;
3781
- flex-wrap: wrap;
3782
- align-items: center;
3783
- }
3784
-
3785
- .pf-v6-c-breadcrumb__item {
3786
- display: flex;
3787
- align-items: baseline;
3788
- font-size: var(--pf-v6-c-breadcrumb__item--FontSize);
3789
- font-weight: var(--pf-v6-c-breadcrumb__item--FontWeight);
3790
- line-height: var(--pf-v6-c-breadcrumb__item--LineHeight);
3791
- white-space: nowrap;
3792
- list-style: none;
3793
- }
3794
-
3795
- .pf-v6-c-breadcrumb__item:first-child:has(.pf-v6-c-breadcrumb__link) {
3796
- --pf-v6-c-breadcrumb__link--PaddingInlineStart: 0;
3797
- }
3798
-
3799
- .pf-v6-c-breadcrumb__item:not(:last-child) {
3800
- margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
3801
- }
3802
-
3803
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
3804
- scale: -1 1;
3805
- }
3806
-
3807
- .pf-v6-c-breadcrumb__item-divider {
3808
- margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
3809
- font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
3810
- line-height: 1;
3811
- color: var(--pf-v6-c-breadcrumb__item-divider--Color);
3812
- }
3813
-
3814
- .pf-v6-c-breadcrumb__link {
3815
- padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
3816
- padding-inline-end: var(--pf-v6-c-breadcrumb__link--PaddingInlineEnd);
3817
- font-size: inherit;
3818
- font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
3819
- line-height: inherit;
3820
- color: var(--pf-v6-c-breadcrumb__link--Color);
3821
- text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
3822
- text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
3823
- text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
3824
- word-break: break-word;
3825
- background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
3826
- }
3827
-
3828
- .pf-v6-c-breadcrumb__link:is(:hover, :focus) {
3829
- --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
3830
- --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
3831
- --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
3832
- --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
3833
- }
3834
-
3835
- .pf-v6-c-breadcrumb__link.pf-m-current {
3836
- cursor: default;
3837
- }
3838
-
3839
- .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
3840
- color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
3841
- text-decoration-line: none;
3842
- }
3843
-
3844
- button.pf-v6-c-breadcrumb__link {
3845
- border: none;
3846
- }
3847
-
3848
- .pf-v6-c-breadcrumb__dropdown {
3849
- margin-block-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart);
3850
- margin-block-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd);
3851
- margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
3852
- margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
3853
- }
3854
-
3855
- .pf-v6-c-breadcrumb__heading {
3856
- display: inline;
3857
- font-size: var(--pf-v6-c-breadcrumb__heading--FontSize);
3858
- }
3859
-
3860
- .pf-v6-c-breadcrumb__link,
3861
- .pf-v6-c-breadcrumb__heading {
3862
- white-space: normal;
3863
- }
3864
-
3865
- .pf-v6-c-breadcrumb__list > :first-child .pf-v6-c-breadcrumb__item-divider {
3866
- display: none;
3867
- }
3868
-
3869
3869
  .pf-v6-c-spinner {
3870
3870
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
3871
3871
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);