@patternfly/patternfly 6.0.0-alpha.80 → 6.0.0-alpha.81

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 (9) hide show
  1. package/components/DualListSelector/dual-list-selector.css +56 -48
  2. package/components/DualListSelector/dual-list-selector.scss +57 -50
  3. package/package.json +1 -1
  4. package/patternfly-no-globals.css +56 -52
  5. package/patternfly-theme-dark-unversioned.css +56 -52
  6. package/patternfly.css +56 -52
  7. package/patternfly.min.css +1 -1
  8. package/patternfly.min.css.map +1 -1
  9. package/components/DualListSelector/themes/dark/dual-list-selector.scss +0 -9
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -1,4 +1,4 @@
1
- .pf-v5-c-dual-list-selector {
1
+ :where(:root), :where(.pf-v5-c-dual-list-selector) {
2
2
  --pf-v5-c-dual-list-selector__header--GridArea: pane-header;
3
3
  --pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;
4
4
  --pf-v5-c-dual-list-selector__status--GridArea: pane-status;
@@ -10,54 +10,55 @@
10
10
  --pf-v5-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
11
11
  --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
12
12
  --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
13
- --pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-v5-global--spacer--sm);
14
- --pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
15
- --pf-v5-c-dual-list-selector__tools--MarginBottom: var(--pf-v5-global--spacer--md);
16
- --pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-v5-global--spacer--sm);
17
- --pf-v5-c-dual-list-selector__menu--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
18
- --pf-v5-c-dual-list-selector__menu--BorderColor: var(--pf-v5-global--BorderColor--100);
13
+ --pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-t--global--spacer--sm);
14
+ --pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
15
+ --pf-v5-c-dual-list-selector__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
16
+ --pf-v5-c-dual-list-selector__tools--MarginBottom: var(--pf-t--global--spacer--md);
17
+ --pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
18
+ --pf-v5-c-dual-list-selector__menu--BorderWidth: var(--pf-t--global--border--width--regular);
19
+ --pf-v5-c-dual-list-selector__menu--BorderColor: var(--pf-t--global--border--color--default);
20
+ --pf-v5-c-dual-list-selector__menu--BorderRadius: var(--pf-t--global--border--radius--small);
19
21
  --pf-v5-c-dual-list-selector__menu--MinHeight: 12.5rem;
20
22
  --pf-v5-c-dual-list-selector__menu--MaxHeight: 20rem;
21
- --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-v5-global--FontSize--sm);
22
- --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: transparent;
23
- --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
24
- --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
25
- --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
26
- --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
23
+ --pf-v5-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
24
+ --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
25
+ --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
26
+ --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
27
+ --pf-v5-c-dual-list-selector__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
28
+ --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
29
+ --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
27
30
  --pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
28
- --pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-v5-global--spacer--sm);
29
- --pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-v5-global--spacer--md);
30
- --pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
31
- --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-v5-global--spacer--md);
32
- --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft: 0;
33
- --pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-global--spacer--sm) + var(--pf-v5-c-dual-list-selector__list-item-row--FontSize));
34
- --pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-v5-global--spacer--md));
35
- --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-v5-global--spacer--xs);
36
- --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-global--Color--100);
37
- --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-v5-global--active-color--100);
38
- --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight: var(--pf-v5-global--FontWeight--bold);
39
- --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-v5-global--disabled-color--100);
40
- --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-v5-global--spacer--sm);
41
- --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-v5-global--FontSize--sm);
42
- --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-v5-global--Color--200);
43
- --pf-v5-c-dual-list-selector__controls--PaddingRight: var(--pf-v5-global--spacer--md);
44
- --pf-v5-c-dual-list-selector__controls--PaddingLeft: var(--pf-v5-global--spacer--md);
45
- --pf-v5-c-dual-list-selector__item-toggle--PaddingTop: var(--pf-v5-global--spacer--sm);
46
- --pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
47
- --pf-v5-c-dual-list-selector__item-toggle--PaddingBottom: var(--pf-v5-global--spacer--sm);
48
- --pf-v5-c-dual-list-selector__item-toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
49
- --pf-v5-c-dual-list-selector__item-toggle--MarginTop: calc(var(--pf-v5-global--spacer--sm) * -1);
50
- --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: calc(var(--pf-v5-global--spacer--sm) * -1);
31
+ --pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-t--global--spacer--sm);
32
+ --pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-t--global--spacer--md);
33
+ --pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-t--global--spacer--sm);
34
+ --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-t--global--spacer--md);
35
+ --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
36
+ --pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--pf-v5-c-dual-list-selector__list-item-row--FontSize));
37
+ --pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-t--global--spacer--md));
38
+ --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
39
+ --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
40
+ --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
41
+ --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default);
42
+ --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
43
+ --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
44
+ --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
45
+ --pf-v5-c-dual-list-selector__controls--PaddingRight: var(--pf-t--global--spacer--md);
46
+ --pf-v5-c-dual-list-selector__controls--PaddingLeft: var(--pf-t--global--spacer--md);
47
+ --pf-v5-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--sm);
48
+ --pf-v5-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
49
+ --pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
51
50
  --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: 0;
52
51
  --pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
53
- --pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-v5-global--spacer--sm);
54
- --pf-v5-c-dual-list-selector__item-count--Marginleft: var(--pf-v5-global--spacer--sm);
55
- --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-v5-global--disabled-color--200);
52
+ --pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-t--global--spacer--sm);
53
+ --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
56
54
  --pf-v5-c-dual-list-selector__item-toggle-icon--Rotate: 0;
57
55
  --pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
58
56
  --pf-v5-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v5-global--Transition);
59
57
  --pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
60
- --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-v5-global--disabled-color--200);
58
+ --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
59
+ }
60
+
61
+ .pf-v5-c-dual-list-selector {
61
62
  display: grid;
62
63
  grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
63
64
  grid-template-rows: repeat(3, auto) auto;
@@ -80,6 +81,7 @@
80
81
  }
81
82
 
82
83
  .pf-v5-c-dual-list-selector__title-text {
84
+ font-size: var(--pf-v5-c-dual-list-selector__title-text--FontSize);
83
85
  font-weight: var(--pf-v5-c-dual-list-selector__title-text--FontWeight);
84
86
  }
85
87
 
@@ -116,8 +118,10 @@
116
118
  grid-area: var(--pf-v5-c-dual-list-selector__menu--GridArea);
117
119
  min-height: var(--pf-v5-c-dual-list-selector__menu--MinHeight);
118
120
  max-height: var(--pf-v5-c-dual-list-selector__menu--MaxHeight);
121
+ margin-block-start: var(--pf-v5-c-dual-list-selector__menu--MarginBlockStart);
119
122
  overflow: auto;
120
123
  border: var(--pf-v5-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v5-c-dual-list-selector__menu--BorderColor);
124
+ border-radius: var(--pf-v5-c-dual-list-selector__menu--BorderRadius);
121
125
  }
122
126
 
123
127
  .pf-v5-c-dual-list-selector__list {
@@ -132,7 +136,6 @@
132
136
  .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
133
137
  transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
134
138
  position: absolute;
135
- inset-block-start: 0;
136
139
  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
137
140
  }
138
141
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
@@ -144,7 +147,7 @@
144
147
  }
145
148
 
146
149
  .pf-v5-c-dual-list-selector__list-item:focus {
147
- --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
150
+ --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
148
151
  }
149
152
  .pf-v5-c-dual-list-selector__list-item.pf-m-expandable {
150
153
  --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft);
@@ -162,6 +165,7 @@
162
165
  display: flex;
163
166
  font-size: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
164
167
  background-color: var(--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor);
168
+ border-radius: var(--pf-v5-c-dual-list-selector__list-item-row--BorderRadius);
165
169
  }
166
170
  .pf-v5-c-dual-list-selector__list-item-row:hover {
167
171
  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
@@ -173,6 +177,9 @@
173
177
  --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color);
174
178
  font-weight: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
175
179
  }
180
+ .pf-v5-c-dual-list-selector__list-item-row.pf-m-selected:hover {
181
+ --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
182
+ }
176
183
  .pf-v5-c-dual-list-selector__list-item-row.pf-m-check {
177
184
  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
178
185
  }
@@ -213,6 +220,7 @@
213
220
  padding-inline-start: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
214
221
  padding-inline-end: var(--pf-v5-c-dual-list-selector__item--PaddingRight);
215
222
  cursor: pointer;
223
+ outline-offset: -2px;
216
224
  }
217
225
 
218
226
  .pf-v5-c-dual-list-selector__item-count {
@@ -231,10 +239,16 @@
231
239
  }
232
240
 
233
241
  .pf-v5-c-dual-list-selector__controls {
242
+ display: flex;
243
+ flex-direction: column;
234
244
  grid-area: var(--pf-v5-c-dual-list-selector__controls--GridArea);
245
+ gap: var(--pf-v5-c-dual-list-selector__controls--Gap);
246
+ align-items: center;
235
247
  align-self: center;
248
+ justify-content: center;
236
249
  padding-inline-start: var(--pf-v5-c-dual-list-selector__controls--PaddingLeft);
237
250
  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
251
+ margin-block-start: var(--pf-v5-c-dual-list-selector__controls--MarginBlockStart);
238
252
  }
239
253
 
240
254
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
@@ -309,10 +323,4 @@
309
323
  .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item .pf-v5-c-dual-list-selector__list-item {
310
324
  --pf-v5-c-dual-list-selector__item--PaddingLeft: calc(var(--pf-v5-c-dual-list-selector__item--nested-indent--base) * 10 + var(--pf-v5-c-dual-list-selector__item--indent--base));
311
325
  --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
312
- }
313
-
314
- :where(.pf-v5-theme-dark) .pf-v5-c-dual-list-selector {
315
- --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
316
- --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
317
- --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
318
326
  }
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // @debug $dual-list-selector; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
  $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
3
3
 
4
- .#{$dual-list-selector} {
4
+ :where(:root), :where(.#{$dual-list-selector}) {
5
5
  // Grid
6
6
  --#{$dual-list-selector}__header--GridArea: pane-header;
7
7
  --#{$dual-list-selector}__tools--GridArea: pane-tools;
@@ -16,79 +16,79 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
16
16
  --#{$dual-list-selector}--GridTemplateColumns--pane--MinMax--max: #{pf-size-prem(450px)};
17
17
 
18
18
  // Header
19
- --#{$dual-list-selector}__header--MarginBottom: var(--#{$pf-global}--spacer--sm);
19
+ --#{$dual-list-selector}__header--MarginBottom: var(--pf-t--global--spacer--sm);
20
20
 
21
21
  // Title
22
- --#{$dual-list-selector}__title-text--FontWeight: var(--#{$pf-global}--FontWeight--bold);
22
+ --#{$dual-list-selector}__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
23
+ --#{$dual-list-selector}__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
23
24
 
24
25
  // Tools
25
- --#{$dual-list-selector}__tools--MarginBottom: var(--#{$pf-global}--spacer--md);
26
- --#{$dual-list-selector}__tools-filter--tools-actions--MarginLeft: var(--#{$pf-global}--spacer--sm);
26
+ --#{$dual-list-selector}__tools--MarginBottom: var(--pf-t--global--spacer--md);
27
+ --#{$dual-list-selector}__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
27
28
 
28
29
  // Menu
29
- --#{$dual-list-selector}__menu--BorderWidth: var(--#{$pf-global}--BorderWidth--sm);
30
- --#{$dual-list-selector}__menu--BorderColor: var(--#{$pf-global}--BorderColor--100);
30
+ --#{$dual-list-selector}__menu--BorderWidth: var(--pf-t--global--border--width--regular);
31
+ --#{$dual-list-selector}__menu--BorderColor: var(--pf-t--global--border--color--default);
32
+ --#{$dual-list-selector}__menu--BorderRadius: var(--pf-t--global--border--radius--small);
31
33
  --#{$dual-list-selector}__menu--MinHeight: #{pf-size-prem(200px)};
32
34
  --#{$dual-list-selector}__menu--MaxHeight: #{pf-size-prem(320px)};
35
+ --#{$dual-list-selector}__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
33
36
 
34
37
  // List item
35
- --#{$dual-list-selector}__list-item-row--FontSize: var(--#{$pf-global}--FontSize--sm);
36
- --#{$dual-list-selector}__list-item-row--BackgroundColor: transparent;
37
- --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
38
- --#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
39
- --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
40
- --#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
38
+ --#{$dual-list-selector}__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
39
+ --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
40
+ --#{$dual-list-selector}__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
41
+ --#{$dual-list-selector}__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
42
+ --#{$dual-list-selector}__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
43
+ --#{$dual-list-selector}__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
41
44
  --#{$dual-list-selector}__list-item--m-ghost-row--Opacity: .4;
42
45
 
43
46
  // Item
44
- --#{$dual-list-selector}__item--PaddingTop: var(--#{$pf-global}--spacer--sm);
45
- --#{$dual-list-selector}__item--PaddingRight: var(--#{$pf-global}--spacer--md);
46
- --#{$dual-list-selector}__item--PaddingBottom: var(--#{$pf-global}--spacer--sm);
47
- --#{$dual-list-selector}__item--PaddingLeft: var(--#{$pf-global}--spacer--md);
48
- --#{$dual-list-selector}__item--m-expandable--PaddingLeft: 0;
49
- --#{$dual-list-selector}__item--indent--base: calc(var(--#{$pf-global}--spacer--md) + var(--#{$pf-global}--spacer--sm) + var(--#{$dual-list-selector}__list-item-row--FontSize));
50
- --#{$dual-list-selector}__item--nested-indent--base: calc(var(--#{$dual-list-selector}__item--indent--base) - var(--#{$pf-global}--spacer--md));
51
- --#{$dual-list-selector}__draggable--item--PaddingLeft: var(--#{$pf-global}--spacer--xs);
47
+ --#{$dual-list-selector}__item--PaddingTop: var(--pf-t--global--spacer--sm);
48
+ --#{$dual-list-selector}__item--PaddingRight: var(--pf-t--global--spacer--md);
49
+ --#{$dual-list-selector}__item--PaddingBottom: var(--pf-t--global--spacer--sm);
50
+ --#{$dual-list-selector}__item--PaddingLeft: var(--pf-t--global--spacer--md);
51
+ --#{$dual-list-selector}__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
52
+ --#{$dual-list-selector}__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--#{$dual-list-selector}__list-item-row--FontSize));
53
+ --#{$dual-list-selector}__item--nested-indent--base: calc(var(--#{$dual-list-selector}__item--indent--base) - var(--pf-t--global--spacer--md));
54
+ --#{$dual-list-selector}__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
52
55
 
53
56
  // Item text
54
- --#{$dual-list-selector}__item-text--Color: var(--#{$pf-global}--Color--100);
55
- --#{$dual-list-selector}__list-item-row--m-selected__text--Color: var(--#{$pf-global}--active-color--100);
56
- --#{$dual-list-selector}__list-item-row--m-selected__text--FontWeight: var(--#{$pf-global}--FontWeight--bold);
57
- --#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--#{$pf-global}--disabled-color--100);
57
+ --#{$dual-list-selector}__item-text--Color: var(--pf-t--global--text--color--subtle);
58
+ --#{$dual-list-selector}__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
59
+ --#{$dual-list-selector}__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default); // token?
58
60
 
59
61
  // Status
60
- --#{$dual-list-selector}__status--MarginBottom: var(--#{$pf-global}--spacer--sm);
61
- --#{$dual-list-selector}__status-text--FontSize: var(--#{$pf-global}--FontSize--sm);
62
- --#{$dual-list-selector}__status-text--Color: var(--#{$pf-global}--Color--200);
62
+ --#{$dual-list-selector}__status--MarginBottom: var(--pf-t--global--spacer--sm);
63
+ --#{$dual-list-selector}__status-text--FontSize: var(--pf-t--global--font--size--sm);
64
+ --#{$dual-list-selector}__status-text--Color: var(--pf-t--global--text--color--subtle);
63
65
 
64
66
  // Controls
65
- --#{$dual-list-selector}__controls--PaddingRight: var(--#{$pf-global}--spacer--md);
66
- --#{$dual-list-selector}__controls--PaddingLeft: var(--#{$pf-global}--spacer--md);
67
+ --#{$dual-list-selector}__controls--PaddingRight: var(--pf-t--global--spacer--md);
68
+ --#{$dual-list-selector}__controls--PaddingLeft: var(--pf-t--global--spacer--md);
69
+ --#{$dual-list-selector}__controls--Gap: var(--pf-t--global--spacer--sm);
70
+ --#{$dual-list-selector}__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
67
71
 
68
72
  // Toggle
69
- --#{$dual-list-selector}__item-toggle--PaddingTop: var(--#{$pf-global}--spacer--sm);
70
- --#{$dual-list-selector}__item-toggle--PaddingRight: var(--#{$pf-global}--spacer--sm);
71
- --#{$dual-list-selector}__item-toggle--PaddingBottom: var(--#{$pf-global}--spacer--sm);
72
- --#{$dual-list-selector}__item-toggle--PaddingLeft: var(--#{$pf-global}--spacer--md);
73
- --#{$dual-list-selector}__item-toggle--MarginTop: calc(var(--#{$pf-global}--spacer--sm) * -1);
74
- --#{$dual-list-selector}__item-toggle--MarginBottom: calc(var(--#{$pf-global}--spacer--sm) * -1);
73
+ --#{$dual-list-selector}__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
75
74
  --#{$dual-list-selector}__list__list__item-toggle--Left: 0;
76
75
  --#{$dual-list-selector}__list__list__item-toggle--TranslateX: -100%;
77
76
 
78
77
  // Check
79
- --#{$dual-list-selector}__item-check--MarginRight: var(--#{$pf-global}--spacer--sm);
78
+ --#{$dual-list-selector}__item-check--MarginRight: var(--pf-t--global--spacer--sm);
80
79
 
81
80
  // Badge
82
- --#{$dual-list-selector}__item-count--Marginleft: var(--#{$pf-global}--spacer--sm);
83
- --#{$dual-list-selector}__item--c-badge--m-read--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
81
+ --#{$dual-list-selector}__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
84
82
 
85
83
  // Icon
86
84
  --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
87
85
  --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
88
- --#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition);
86
+ --#{$dual-list-selector}__item-toggle-icon--Transition: var(--#{$pf-global}--Transition); // need token
89
87
  --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
90
- --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--#{$pf-global}--disabled-color--200);
88
+ --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
89
+ }
91
90
 
91
+ .#{$dual-list-selector} {
92
92
  display: grid;
93
93
  grid-template-areas:
94
94
  "pane-header . pane-header-c"
@@ -119,6 +119,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
119
119
  }
120
120
 
121
121
  .#{$dual-list-selector}__title-text {
122
+ font-size: var(--#{$dual-list-selector}__title-text--FontSize);
122
123
  font-weight: var(--#{$dual-list-selector}__title-text--FontWeight);
123
124
  }
124
125
 
@@ -156,8 +157,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
156
157
  grid-area: var(--#{$dual-list-selector}__menu--GridArea);
157
158
  min-height: var(--#{$dual-list-selector}__menu--MinHeight);
158
159
  max-height: var(--#{$dual-list-selector}__menu--MaxHeight);
160
+ margin-block-start: var(--#{$dual-list-selector}__menu--MarginBlockStart);
159
161
  overflow: auto;
160
162
  border: var(--#{$dual-list-selector}__menu--BorderWidth) solid var(--#{$dual-list-selector}__menu--BorderColor);
163
+ border-radius: var(--#{$dual-list-selector}__menu--BorderRadius);
161
164
  }
162
165
 
163
166
  .#{$dual-list-selector}__list {
@@ -175,7 +178,6 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
175
178
  );
176
179
 
177
180
  position: absolute;
178
- inset-block-start: 0;
179
181
  inset-inline-start: var(--#{$dual-list-selector}__list__list__item-toggle--Left);
180
182
  }
181
183
  }
@@ -190,7 +192,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
190
192
 
191
193
  .#{$dual-list-selector}__list-item {
192
194
  &:focus {
193
- --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--focus-within--BackgroundColor);
195
+ --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
194
196
  }
195
197
 
196
198
  &.pf-m-expandable {
@@ -213,6 +215,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
213
215
  display: flex;
214
216
  font-size: var(--#{$dual-list-selector}__list-item-row--FontSize);
215
217
  background-color: var(--#{$dual-list-selector}__list-item-row--BackgroundColor);
218
+ border-radius: var(--#{$dual-list-selector}__list-item-row--BorderRadius);
216
219
 
217
220
  &:hover {
218
221
  --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
@@ -226,6 +229,10 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
226
229
 
227
230
  font-weight: var(--#{$dual-list-selector}__list-item-row--m-selected__text--FontWeight);
228
231
  }
232
+
233
+ &:hover {
234
+ --#{$dual-list-selector}__list-item-row--BackgroundColor: var(--#{$dual-list-selector}__list-item-row--hover--BackgroundColor);
235
+ }
229
236
  }
230
237
 
231
238
  &.pf-m-check {
@@ -275,6 +282,7 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
275
282
  padding-inline-start: var(--#{$dual-list-selector}__item--PaddingLeft);
276
283
  padding-inline-end: var(--#{$dual-list-selector}__item--PaddingRight);
277
284
  cursor: pointer;
285
+ outline-offset: -2px;
278
286
  }
279
287
 
280
288
  .#{$dual-list-selector}__item-count {
@@ -293,10 +301,16 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
293
301
  }
294
302
 
295
303
  .#{$dual-list-selector}__controls {
304
+ display: flex;
305
+ flex-direction: column;
296
306
  grid-area: var(--#{$dual-list-selector}__controls--GridArea);
307
+ gap: var(--#{$dual-list-selector}__controls--Gap);
308
+ align-items: center;
297
309
  align-self: center;
310
+ justify-content: center;
298
311
  padding-inline-start: var(--#{$dual-list-selector}__controls--PaddingLeft);
299
312
  padding-inline-end: var(--#{$dual-list-selector}__controls--PaddingRight);
313
+ margin-block-start: var(--#{$dual-list-selector}__controls--MarginBlockStart);
300
314
  }
301
315
 
302
316
  :is(.#{$dual-list-selector}__controls-item, .#{$dual-list-selector}__item-toggle-icon) {
@@ -347,10 +361,3 @@ $pf-v5-c-dual-list-selector__item--MaxNesting: 10;
347
361
  }
348
362
  }
349
363
  // stylelint-enable
350
-
351
- // stylelint-disable no-invalid-position-at-import-rule
352
- @import "themes/dark/dual-list-selector";
353
-
354
- @include pf-v5-theme-dark {
355
- @include pf-v5-theme-dark-dual-list-selector;
356
- }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.80",
4
+ "version": "6.0.0-alpha.81",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11309,7 +11309,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11309
11309
  --pf-v5-c-droppable--m-dragging--after--BorderColor: var(--pf-v5-c-droppable--m-drag-outside--after--BorderColor);
11310
11310
  }
11311
11311
 
11312
- .pf-v5-c-dual-list-selector {
11312
+ :where(:root), :where(.pf-v5-c-dual-list-selector) {
11313
11313
  --pf-v5-c-dual-list-selector__header--GridArea: pane-header;
11314
11314
  --pf-v5-c-dual-list-selector__tools--GridArea: pane-tools;
11315
11315
  --pf-v5-c-dual-list-selector__status--GridArea: pane-status;
@@ -11321,54 +11321,55 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11321
11321
  --pf-v5-c-dual-list-selector--m-chosen__menu--GridArea: pane-menu-c;
11322
11322
  --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--min: 12.5rem;
11323
11323
  --pf-v5-c-dual-list-selector--GridTemplateColumns--pane--MinMax--max: 28.125rem;
11324
- --pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-v5-global--spacer--sm);
11325
- --pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-v5-global--FontWeight--bold);
11326
- --pf-v5-c-dual-list-selector__tools--MarginBottom: var(--pf-v5-global--spacer--md);
11327
- --pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-v5-global--spacer--sm);
11328
- --pf-v5-c-dual-list-selector__menu--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
11329
- --pf-v5-c-dual-list-selector__menu--BorderColor: var(--pf-v5-global--BorderColor--100);
11324
+ --pf-v5-c-dual-list-selector__header--MarginBottom: var(--pf-t--global--spacer--sm);
11325
+ --pf-v5-c-dual-list-selector__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
11326
+ --pf-v5-c-dual-list-selector__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
11327
+ --pf-v5-c-dual-list-selector__tools--MarginBottom: var(--pf-t--global--spacer--md);
11328
+ --pf-v5-c-dual-list-selector__tools-filter--tools-actions--MarginLeft: var(--pf-t--global--spacer--sm);
11329
+ --pf-v5-c-dual-list-selector__menu--BorderWidth: var(--pf-t--global--border--width--regular);
11330
+ --pf-v5-c-dual-list-selector__menu--BorderColor: var(--pf-t--global--border--color--default);
11331
+ --pf-v5-c-dual-list-selector__menu--BorderRadius: var(--pf-t--global--border--radius--small);
11330
11332
  --pf-v5-c-dual-list-selector__menu--MinHeight: 12.5rem;
11331
11333
  --pf-v5-c-dual-list-selector__menu--MaxHeight: 20rem;
11332
- --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-v5-global--FontSize--sm);
11333
- --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: transparent;
11334
- --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
11335
- --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
11336
- --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
11337
- --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
11334
+ --pf-v5-c-dual-list-selector__menu--MarginBlockStart: var(--pf-t--global--spacer--md);
11335
+ --pf-v5-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
11336
+ --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
11337
+ --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
11338
+ --pf-v5-c-dual-list-selector__list-item-row--BorderRadius: var(--pf-t--global--border--radius--tiny);
11339
+ --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
11340
+ --pf-v5-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11338
11341
  --pf-v5-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
11339
- --pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-v5-global--spacer--sm);
11340
- --pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-v5-global--spacer--md);
11341
- --pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-v5-global--spacer--sm);
11342
- --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-v5-global--spacer--md);
11343
- --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft: 0;
11344
- --pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-global--spacer--sm) + var(--pf-v5-c-dual-list-selector__list-item-row--FontSize));
11345
- --pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-v5-global--spacer--md));
11346
- --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-v5-global--spacer--xs);
11347
- --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-global--Color--100);
11348
- --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-v5-global--active-color--100);
11349
- --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight: var(--pf-v5-global--FontWeight--bold);
11350
- --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-v5-global--disabled-color--100);
11351
- --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-v5-global--spacer--sm);
11352
- --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-v5-global--FontSize--sm);
11353
- --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-v5-global--Color--200);
11354
- --pf-v5-c-dual-list-selector__controls--PaddingRight: var(--pf-v5-global--spacer--md);
11355
- --pf-v5-c-dual-list-selector__controls--PaddingLeft: var(--pf-v5-global--spacer--md);
11356
- --pf-v5-c-dual-list-selector__item-toggle--PaddingTop: var(--pf-v5-global--spacer--sm);
11357
- --pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
11358
- --pf-v5-c-dual-list-selector__item-toggle--PaddingBottom: var(--pf-v5-global--spacer--sm);
11359
- --pf-v5-c-dual-list-selector__item-toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
11360
- --pf-v5-c-dual-list-selector__item-toggle--MarginTop: calc(var(--pf-v5-global--spacer--sm) * -1);
11361
- --pf-v5-c-dual-list-selector__item-toggle--MarginBottom: calc(var(--pf-v5-global--spacer--sm) * -1);
11342
+ --pf-v5-c-dual-list-selector__item--PaddingTop: var(--pf-t--global--spacer--sm);
11343
+ --pf-v5-c-dual-list-selector__item--PaddingRight: var(--pf-t--global--spacer--md);
11344
+ --pf-v5-c-dual-list-selector__item--PaddingBottom: var(--pf-t--global--spacer--sm);
11345
+ --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-t--global--spacer--md);
11346
+ --pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft: var(--pf-t--global--spacer--md);
11347
+ --pf-v5-c-dual-list-selector__item--indent--base: calc(var(--pf-t--global--spacer--md) + var(--pf-t--global--spacer--sm) + var(--pf-v5-c-dual-list-selector__list-item-row--FontSize));
11348
+ --pf-v5-c-dual-list-selector__item--nested-indent--base: calc(var(--pf-v5-c-dual-list-selector__item--indent--base) - var(--pf-t--global--spacer--md));
11349
+ --pf-v5-c-dual-list-selector__draggable--item--PaddingLeft: var(--pf-t--global--spacer--xs);
11350
+ --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-t--global--text--color--subtle);
11351
+ --pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color: var(--pf-t--global--text--color--regular);
11352
+ --pf-v5-c-dual-list-selector__list-item--m-disabled__item-text--Color: var(--pf-t--global--background--color--disabled--default);
11353
+ --pf-v5-c-dual-list-selector__status--MarginBottom: var(--pf-t--global--spacer--sm);
11354
+ --pf-v5-c-dual-list-selector__status-text--FontSize: var(--pf-t--global--font--size--sm);
11355
+ --pf-v5-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
11356
+ --pf-v5-c-dual-list-selector__controls--PaddingRight: var(--pf-t--global--spacer--md);
11357
+ --pf-v5-c-dual-list-selector__controls--PaddingLeft: var(--pf-t--global--spacer--md);
11358
+ --pf-v5-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--sm);
11359
+ --pf-v5-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
11360
+ --pf-v5-c-dual-list-selector__item-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
11362
11361
  --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: 0;
11363
11362
  --pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX: -100%;
11364
- --pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-v5-global--spacer--sm);
11365
- --pf-v5-c-dual-list-selector__item-count--Marginleft: var(--pf-v5-global--spacer--sm);
11366
- --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-v5-global--disabled-color--200);
11363
+ --pf-v5-c-dual-list-selector__item-check--MarginRight: var(--pf-t--global--spacer--sm);
11364
+ --pf-v5-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
11367
11365
  --pf-v5-c-dual-list-selector__item-toggle-icon--Rotate: 0;
11368
11366
  --pf-v5-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
11369
11367
  --pf-v5-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-v5-global--Transition);
11370
11368
  --pf-v5-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
11371
- --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-v5-global--disabled-color--200);
11369
+ --pf-v5-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--background--color--disabled--default);
11370
+ }
11371
+
11372
+ .pf-v5-c-dual-list-selector {
11372
11373
  display: grid;
11373
11374
  grid-template-areas: "pane-header . pane-header-c" "pane-tools . pane-tools-c" "pane-status . pane-status-c" "pane-menu controls pane-menu-c";
11374
11375
  grid-template-rows: repeat(3, auto) auto;
@@ -11391,6 +11392,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11391
11392
  }
11392
11393
 
11393
11394
  .pf-v5-c-dual-list-selector__title-text {
11395
+ font-size: var(--pf-v5-c-dual-list-selector__title-text--FontSize);
11394
11396
  font-weight: var(--pf-v5-c-dual-list-selector__title-text--FontWeight);
11395
11397
  }
11396
11398
 
@@ -11427,8 +11429,10 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11427
11429
  grid-area: var(--pf-v5-c-dual-list-selector__menu--GridArea);
11428
11430
  min-height: var(--pf-v5-c-dual-list-selector__menu--MinHeight);
11429
11431
  max-height: var(--pf-v5-c-dual-list-selector__menu--MaxHeight);
11432
+ margin-block-start: var(--pf-v5-c-dual-list-selector__menu--MarginBlockStart);
11430
11433
  overflow: auto;
11431
11434
  border: var(--pf-v5-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v5-c-dual-list-selector__menu--BorderColor);
11435
+ border-radius: var(--pf-v5-c-dual-list-selector__menu--BorderRadius);
11432
11436
  }
11433
11437
 
11434
11438
  .pf-v5-c-dual-list-selector__list {
@@ -11443,7 +11447,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11443
11447
  .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
11444
11448
  transform: translateX(var(--pf-v5-c-dual-list-selector__list__list__item-toggle--TranslateX));
11445
11449
  position: absolute;
11446
- inset-block-start: 0;
11447
11450
  inset-inline-start: var(--pf-v5-c-dual-list-selector__list__list__item-toggle--Left);
11448
11451
  }
11449
11452
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__list .pf-v5-c-dual-list-selector__item-toggle {
@@ -11455,7 +11458,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11455
11458
  }
11456
11459
 
11457
11460
  .pf-v5-c-dual-list-selector__list-item:focus {
11458
- --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor);
11461
+ --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
11459
11462
  }
11460
11463
  .pf-v5-c-dual-list-selector__list-item.pf-m-expandable {
11461
11464
  --pf-v5-c-dual-list-selector__item--PaddingLeft: var(--pf-v5-c-dual-list-selector__item--m-expandable--PaddingLeft);
@@ -11473,6 +11476,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11473
11476
  display: flex;
11474
11477
  font-size: var(--pf-v5-c-dual-list-selector__list-item-row--FontSize);
11475
11478
  background-color: var(--pf-v5-c-dual-list-selector__list-item-row--BackgroundColor);
11479
+ border-radius: var(--pf-v5-c-dual-list-selector__list-item-row--BorderRadius);
11476
11480
  }
11477
11481
  .pf-v5-c-dual-list-selector__list-item-row:hover {
11478
11482
  --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
@@ -11484,6 +11488,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11484
11488
  --pf-v5-c-dual-list-selector__item-text--Color: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--Color);
11485
11489
  font-weight: var(--pf-v5-c-dual-list-selector__list-item-row--m-selected__text--FontWeight);
11486
11490
  }
11491
+ .pf-v5-c-dual-list-selector__list-item-row.pf-m-selected:hover {
11492
+ --pf-v5-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor);
11493
+ }
11487
11494
  .pf-v5-c-dual-list-selector__list-item-row.pf-m-check {
11488
11495
  --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
11489
11496
  }
@@ -11524,6 +11531,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11524
11531
  padding-inline-start: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
11525
11532
  padding-inline-end: var(--pf-v5-c-dual-list-selector__item--PaddingRight);
11526
11533
  cursor: pointer;
11534
+ outline-offset: -2px;
11527
11535
  }
11528
11536
 
11529
11537
  .pf-v5-c-dual-list-selector__item-count {
@@ -11542,10 +11550,16 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11542
11550
  }
11543
11551
 
11544
11552
  .pf-v5-c-dual-list-selector__controls {
11553
+ display: flex;
11554
+ flex-direction: column;
11545
11555
  grid-area: var(--pf-v5-c-dual-list-selector__controls--GridArea);
11556
+ gap: var(--pf-v5-c-dual-list-selector__controls--Gap);
11557
+ align-items: center;
11546
11558
  align-self: center;
11559
+ justify-content: center;
11547
11560
  padding-inline-start: var(--pf-v5-c-dual-list-selector__controls--PaddingLeft);
11548
11561
  padding-inline-end: var(--pf-v5-c-dual-list-selector__controls--PaddingRight);
11562
+ margin-block-start: var(--pf-v5-c-dual-list-selector__controls--MarginBlockStart);
11549
11563
  }
11550
11564
 
11551
11565
  :where(.pf-v5-m-dir-rtl, [dir=rtl]) :is(.pf-v5-c-dual-list-selector__controls-item, .pf-v5-c-dual-list-selector__item-toggle-icon) {
@@ -11622,16 +11636,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
11622
11636
  --pf-v5-c-dual-list-selector__list__list__item-toggle--Left: var(--pf-v5-c-dual-list-selector__item--PaddingLeft);
11623
11637
  }
11624
11638
 
11625
- :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header .pf-v5-c-button, :where(.pf-v5-theme-dark) .pf-v5-c-log-viewer.pf-m-dark .pf-v5-c-log-viewer__main .pf-v5-c-button {
11626
- --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
11627
- }
11628
-
11629
- :where(.pf-v5-theme-dark) .pf-v5-c-dual-list-selector {
11630
- --pf-v5-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
11631
- --pf-v5-c-dual-list-selector__list-item-row--focus-within--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
11632
- --pf-v5-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
11633
- }
11634
-
11635
11639
  :root,
11636
11640
  [data-theme=pf-v5-c-toolbar] {
11637
11641
  --pf-v5-c-toolbar--RowGap: var(--pf-t--global--spacer--sm);