@patternfly/patternfly 6.3.0-prerelease.74 → 6.3.0-prerelease.76

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 (15) hide show
  1. package/components/Divider/divider.css +2 -0
  2. package/components/Divider/divider.scss +2 -0
  3. package/components/DualListSelector/dual-list-selector.css +2 -2
  4. package/components/DualListSelector/dual-list-selector.scss +2 -2
  5. package/components/Progress/progress.css +9 -0
  6. package/components/Progress/progress.scss +11 -0
  7. package/components/Switch/switch.css +7 -1
  8. package/components/Switch/switch.scss +7 -1
  9. package/components/_index.css +20 -3
  10. package/docs/demos/CardView/examples/CardView.md +81 -85
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +20 -3
  13. package/patternfly.css +20 -3
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/Divider/divider.css CHANGED
@@ -66,6 +66,8 @@
66
66
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
67
67
  content: "";
68
68
  background-color: var(--pf-v6-c-divider--Color);
69
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
70
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
69
71
  }
70
72
  .pf-v6-c-divider.pf-m-horizontal {
71
73
  flex-direction: row;
package/components/Divider/divider.scss CHANGED
@@ -43,6 +43,8 @@ $pf-v6-c-divider--spacer-map: build-spacer-map("none", "xs", "sm", "md", "lg", "
43
43
  flex-basis: var(--#{$divider}--before--FlexBasis);
44
44
  content: "";
45
45
  background-color: var(--#{$divider}--Color);
46
+ border-block-start: var(--#{$divider}--Size) solid transparent;
47
+ border-inline-start: var(--#{$divider}--Size) solid transparent;
46
48
  }
47
49
 
48
50
  // - Divider horizontal
package/components/DualListSelector/dual-list-selector.css CHANGED
@@ -245,7 +245,7 @@
245
245
 
246
246
  .pf-v6-c-dual-list-selector__item,
247
247
  .pf-v6-c-dual-list-selector__item-main {
248
- flex-basis: 100%;
248
+ flex-grow: 1;
249
249
  }
250
250
 
251
251
  .pf-v6-c-dual-list-selector__draggable {
@@ -264,7 +264,7 @@
264
264
 
265
265
  .pf-v6-c-dual-list-selector__item {
266
266
  position: relative;
267
- width: 100%;
267
+ min-width: 0;
268
268
  padding-block-start: var(--pf-v6-c-dual-list-selector__item--PaddingBlockStart);
269
269
  padding-block-end: var(--pf-v6-c-dual-list-selector__item--PaddingBlockEnd);
270
270
  padding-inline-start: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
package/components/DualListSelector/dual-list-selector.scss CHANGED
@@ -312,7 +312,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
312
312
 
313
313
  .#{$dual-list-selector}__item,
314
314
  .#{$dual-list-selector}__item-main {
315
- flex-basis: 100%;
315
+ flex-grow: 1;
316
316
  }
317
317
 
318
318
  .#{$dual-list-selector}__draggable {
@@ -335,7 +335,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
335
335
 
336
336
  .#{$dual-list-selector}__item {
337
337
  position: relative;
338
- width: 100%;
338
+ min-width: 0;
339
339
  padding-block-start: var(--#{$dual-list-selector}__item--PaddingBlockStart);
340
340
  padding-block-end: var(--#{$dual-list-selector}__item--PaddingBlockEnd);
341
341
  padding-inline-start: var(--#{$dual-list-selector}__item--PaddingInlineStart);
package/components/Progress/progress.css CHANGED
@@ -10,6 +10,8 @@
10
10
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
11
11
  --pf-v6-c-progress__indicator--Height: var(--pf-v6-c-progress__bar--Height);
12
12
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
13
+ --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
14
+ --pf-v6-c-progress__indicator--BorderColor: transparent;
13
15
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
14
16
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
15
17
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -180,6 +182,13 @@
180
182
  height: var(--pf-v6-c-progress__indicator--Height);
181
183
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
182
184
  }
185
+ .pf-v6-c-progress__indicator::before {
186
+ position: absolute;
187
+ inset: 0;
188
+ content: "";
189
+ border: var(--pf-v6-c-progress__indicator--BorderWidth) solid var(--pf-v6-c-progress__indicator--BorderColor);
190
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
191
+ }
183
192
 
184
193
  .pf-v6-c-progress__helper-text {
185
194
  grid-row: 3/4;
package/components/Progress/progress.scss CHANGED
@@ -15,6 +15,8 @@
15
15
  --#{$progress}__status-icon--Color: var(--pf-t--global--icon--color--regular);
16
16
  --#{$progress}__indicator--Height: var(--#{$progress}__bar--Height);
17
17
  --#{$progress}__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
18
+ --#{$progress}__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
19
+ --#{$progress}__indicator--BorderColor: transparent;
18
20
  --#{$progress}__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--#{$progress}--GridGap));
19
21
 
20
22
  // Modifier variables
@@ -220,6 +222,15 @@
220
222
  position: absolute; // position absolute to bring above the semi-transparent bar overlay
221
223
  height: var(--#{$progress}__indicator--Height);
222
224
  background-color: var(--#{$progress}__indicator--BackgroundColor);
225
+
226
+ // for forced colors mode
227
+ &::before {
228
+ position: absolute;
229
+ inset: 0;
230
+ content: "";
231
+ border: var(--#{$progress}__indicator--BorderWidth) solid var(--#{$progress}__indicator--BorderColor);
232
+ border-radius: var(--#{$progress}__bar--BorderRadius);
233
+ }
223
234
  }
224
235
 
225
236
  .#{$progress}__helper-text {
package/components/Switch/switch.css CHANGED
@@ -10,11 +10,13 @@
10
10
  --pf-v6-c-switch--Height: auto;
11
11
  --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
12
12
  --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
13
- --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
13
+ --pf-v6-c-switch__input--checked__toggle--BorderColor: transparent;
14
+ --pf-v6-c-switch__input--checked__toggle--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14
15
  --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
15
16
  --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
16
17
  --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
17
18
  --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
19
+ --pf-v6-c-switch__input--disabled__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
18
20
  --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
19
21
  --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
20
22
  --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
@@ -29,6 +31,7 @@
29
31
  --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
30
32
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
31
33
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
34
+ --pf-v6-c-switch__toggle--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
32
35
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
33
36
  --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
34
37
  --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
@@ -70,6 +73,7 @@
70
73
  }
71
74
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
72
75
  --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
76
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--checked__toggle--BorderColor);
73
77
  background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
74
78
  }
75
79
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
@@ -95,6 +99,7 @@
95
99
  }
96
100
  .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
97
101
  --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
102
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--disabled__toggle--BorderColor);
98
103
  cursor: not-allowed;
99
104
  background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
100
105
  }
@@ -119,6 +124,7 @@
119
124
  height: var(--pf-v6-c-switch__toggle--before--Height);
120
125
  content: "";
121
126
  background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
127
+ border: var(--pf-v6-c-switch__toggle--before--BorderWidth) solid transparent;
122
128
  border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
123
129
  transition: var(--pf-v6-c-switch__toggle--before--Transition);
124
130
  transform: translateY(-50%);
package/components/Switch/switch.scss CHANGED
@@ -19,11 +19,13 @@
19
19
  // Switch input
20
20
  --#{$switch}__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
21
21
  --#{$switch}__input--checked__toggle--before--TranslateX: calc(100% + var(--#{$switch}__toggle-icon--Offset));
22
- --#{$switch}__input--checked__toggle--BorderWidth: 0;
22
+ --#{$switch}__input--checked__toggle--BorderColor: transparent;
23
+ --#{$switch}__input--checked__toggle--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
23
24
  --#{$switch}__input--checked__label--Color: var(--pf-t--global--text--color--regular);
24
25
  --#{$switch}__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
25
26
  --#{$switch}__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
26
27
  --#{$switch}__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
28
+ --#{$switch}__input--disabled__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
27
29
  --#{$switch}__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
28
30
  --#{$switch}__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
29
31
  --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
@@ -40,6 +42,7 @@
40
42
  --#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
41
43
  --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
42
44
  --#{$switch}__toggle--before--InsetInlineStart: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
45
+ --#{$switch}__toggle--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
43
46
  --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
44
47
  --#{$switch}__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
45
48
  --#{$switch}__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
@@ -88,6 +91,7 @@
88
91
 
89
92
  ~ .#{$switch}__toggle {
90
93
  --#{$switch}__toggle--BorderWidth: var(--#{$switch}__input--checked__toggle--BorderWidth);
94
+ --#{$switch}__toggle--BorderColor: var(--#{$switch}__input--checked__toggle--BorderColor);
91
95
 
92
96
  background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
93
97
 
@@ -125,6 +129,7 @@
125
129
 
126
130
  ~ .#{$switch}__toggle {
127
131
  --#{$switch}__toggle-icon--Color: var(--#{$switch}__input--disabled__toggle-icon--Color);
132
+ --#{$switch}__toggle--BorderColor: var(--#{$switch}__input--disabled__toggle--BorderColor);
128
133
 
129
134
  cursor: not-allowed;
130
135
  background-color: var(--#{$switch}__input--disabled__toggle--BackgroundColor);
@@ -153,6 +158,7 @@
153
158
  height: var(--#{$switch}__toggle--before--Height);
154
159
  content: "";
155
160
  background-color: var(--#{$switch}__input--not-checked__toggle--before--BackgroundColor);
161
+ border: var(--#{$switch}__toggle--before--BorderWidth) solid transparent; // for forced color mode
156
162
  border-radius: var(--#{$switch}__toggle--before--BorderRadius);
157
163
  transition: var(--#{$switch}__toggle--before--Transition); // TODO remove shorthand in breaking change
158
164
  transform: translateY(-50%);
package/components/_index.css CHANGED
@@ -5179,7 +5179,7 @@ ul) {
5179
5179
 
5180
5180
  .pf-v6-c-dual-list-selector__item,
5181
5181
  .pf-v6-c-dual-list-selector__item-main {
5182
- flex-basis: 100%;
5182
+ flex-grow: 1;
5183
5183
  }
5184
5184
 
5185
5185
  .pf-v6-c-dual-list-selector__draggable {
@@ -5198,7 +5198,7 @@ ul) {
5198
5198
 
5199
5199
  .pf-v6-c-dual-list-selector__item {
5200
5200
  position: relative;
5201
- width: 100%;
5201
+ min-width: 0;
5202
5202
  padding-block-start: var(--pf-v6-c-dual-list-selector__item--PaddingBlockStart);
5203
5203
  padding-block-end: var(--pf-v6-c-dual-list-selector__item--PaddingBlockEnd);
5204
5204
  padding-inline-start: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
@@ -5440,6 +5440,8 @@ ul) {
5440
5440
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
5441
5441
  content: "";
5442
5442
  background-color: var(--pf-v6-c-divider--Color);
5443
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
5444
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
5443
5445
  }
5444
5446
  .pf-v6-c-divider.pf-m-horizontal {
5445
5447
  flex-direction: row;
@@ -13925,6 +13927,8 @@ ul.pf-v6-c-list {
13925
13927
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
13926
13928
  --pf-v6-c-progress__indicator--Height: var(--pf-v6-c-progress__bar--Height);
13927
13929
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
13930
+ --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
13931
+ --pf-v6-c-progress__indicator--BorderColor: transparent;
13928
13932
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
13929
13933
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
13930
13934
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -14095,6 +14099,13 @@ ul.pf-v6-c-list {
14095
14099
  height: var(--pf-v6-c-progress__indicator--Height);
14096
14100
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
14097
14101
  }
14102
+ .pf-v6-c-progress__indicator::before {
14103
+ position: absolute;
14104
+ inset: 0;
14105
+ content: "";
14106
+ border: var(--pf-v6-c-progress__indicator--BorderWidth) solid var(--pf-v6-c-progress__indicator--BorderColor);
14107
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
14108
+ }
14098
14109
 
14099
14110
  .pf-v6-c-progress__helper-text {
14100
14111
  grid-row: 3/4;
@@ -15758,11 +15769,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15758
15769
  --pf-v6-c-switch--Height: auto;
15759
15770
  --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
15760
15771
  --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
15761
- --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
15772
+ --pf-v6-c-switch__input--checked__toggle--BorderColor: transparent;
15773
+ --pf-v6-c-switch__input--checked__toggle--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15762
15774
  --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
15763
15775
  --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
15764
15776
  --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
15765
15777
  --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
15778
+ --pf-v6-c-switch__input--disabled__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
15766
15779
  --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
15767
15780
  --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
15768
15781
  --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
@@ -15777,6 +15790,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15777
15790
  --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
15778
15791
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
15779
15792
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
15793
+ --pf-v6-c-switch__toggle--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15780
15794
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
15781
15795
  --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15782
15796
  --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
@@ -15818,6 +15832,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15818
15832
  }
15819
15833
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
15820
15834
  --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
15835
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--checked__toggle--BorderColor);
15821
15836
  background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
15822
15837
  }
15823
15838
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
@@ -15843,6 +15858,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15843
15858
  }
15844
15859
  .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
15845
15860
  --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
15861
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--disabled__toggle--BorderColor);
15846
15862
  cursor: not-allowed;
15847
15863
  background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
15848
15864
  }
@@ -15867,6 +15883,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15867
15883
  height: var(--pf-v6-c-switch__toggle--before--Height);
15868
15884
  content: "";
15869
15885
  background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
15886
+ border: var(--pf-v6-c-switch__toggle--before--BorderWidth) solid transparent;
15870
15887
  border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
15871
15888
  transition: var(--pf-v6-c-switch__toggle--before--Transition);
15872
15889
  transform: translateY(-50%);
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -1030,92 +1030,88 @@ section: patterns
1030
1030
  </div>
1031
1031
  </div>
1032
1032
  </section>
1033
- <section class="pf-v6-c-page__main-section pf-m-sticky-bottom">
1034
- <div class="pf-v6-c-page__main-body">
1035
- <div class="pf-v6-c-pagination pf-m-bottom">
1036
- <div class="pf-v6-c-pagination__page-menu">
1037
- <button
1038
- class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1039
- type="button"
1040
- aria-expanded="false"
1041
- aria-label="Menu toggle"
1042
- id="pagination-menu-toggle-bottom-example"
1043
- >
1044
- <span class="pf-v6-c-menu-toggle__text">
1045
- <b>1 - 10</b>&nbsp;of&nbsp;
1046
- <b>36</b>
1047
- </span>
1048
- <span class="pf-v6-c-menu-toggle__controls">
1049
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1050
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1051
- </span>
1052
- </span>
1053
- </button>
1054
- </div>
1055
- <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
1056
- <div class="pf-v6-c-pagination__nav-control pf-m-first">
1057
- <button
1058
- class="pf-v6-c-button pf-m-plain"
1059
- type="button"
1060
- disabled
1061
- aria-label="Go to first page"
1062
- >
1063
- <span class="pf-v6-c-button__icon">
1064
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1065
- </span>
1066
- </button>
1067
- </div>
1068
- <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1069
- <button
1070
- class="pf-v6-c-button pf-m-plain"
1071
- type="button"
1072
- disabled
1073
- aria-label="Go to previous page"
1074
- >
1075
- <span class="pf-v6-c-button__icon">
1076
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1077
- </span>
1078
- </button>
1079
- </div>
1080
- <div class="pf-v6-c-pagination__nav-page-select">
1081
- <span class="pf-v6-c-form-control">
1082
- <input
1083
- aria-label="Current page"
1084
- type="number"
1085
- min="1"
1086
- max="4"
1087
- value="1"
1088
- />
1089
- </span>
1090
- <span aria-hidden="true">of 4</span>
1091
- </div>
1092
- <div class="pf-v6-c-pagination__nav-control pf-m-next">
1093
- <button
1094
- class="pf-v6-c-button pf-m-plain"
1095
- type="button"
1096
- aria-label="Go to next page"
1097
- >
1098
- <span class="pf-v6-c-button__icon">
1099
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1100
- </span>
1101
- </button>
1102
- </div>
1103
- <div class="pf-v6-c-pagination__nav-control pf-m-last">
1104
- <button
1105
- class="pf-v6-c-button pf-m-plain"
1106
- type="button"
1107
- disabled
1108
- aria-label="Go to last page"
1109
- >
1110
- <span class="pf-v6-c-button__icon">
1111
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1112
- </span>
1113
- </button>
1114
- </div>
1115
- </nav>
1116
- </div>
1033
+ <div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
1034
+ <div class="pf-v6-c-pagination__page-menu">
1035
+ <button
1036
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1037
+ type="button"
1038
+ aria-expanded="false"
1039
+ aria-label="Menu toggle"
1040
+ id="pagination-menu-toggle-bottom-example"
1041
+ >
1042
+ <span class="pf-v6-c-menu-toggle__text">
1043
+ <b>1 - 10</b>&nbsp;of&nbsp;
1044
+ <b>36</b>
1045
+ </span>
1046
+ <span class="pf-v6-c-menu-toggle__controls">
1047
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1048
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1049
+ </span>
1050
+ </span>
1051
+ </button>
1117
1052
  </div>
1118
- </section>
1053
+ <nav class="pf-v6-c-pagination__nav" aria-label="Pagination">
1054
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
1055
+ <button
1056
+ class="pf-v6-c-button pf-m-plain"
1057
+ type="button"
1058
+ disabled
1059
+ aria-label="Go to first page"
1060
+ >
1061
+ <span class="pf-v6-c-button__icon">
1062
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1063
+ </span>
1064
+ </button>
1065
+ </div>
1066
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
1067
+ <button
1068
+ class="pf-v6-c-button pf-m-plain"
1069
+ type="button"
1070
+ disabled
1071
+ aria-label="Go to previous page"
1072
+ >
1073
+ <span class="pf-v6-c-button__icon">
1074
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1075
+ </span>
1076
+ </button>
1077
+ </div>
1078
+ <div class="pf-v6-c-pagination__nav-page-select">
1079
+ <span class="pf-v6-c-form-control">
1080
+ <input
1081
+ aria-label="Current page"
1082
+ type="number"
1083
+ min="1"
1084
+ max="4"
1085
+ value="1"
1086
+ />
1087
+ </span>
1088
+ <span aria-hidden="true">of 4</span>
1089
+ </div>
1090
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
1091
+ <button
1092
+ class="pf-v6-c-button pf-m-plain"
1093
+ type="button"
1094
+ aria-label="Go to next page"
1095
+ >
1096
+ <span class="pf-v6-c-button__icon">
1097
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1098
+ </span>
1099
+ </button>
1100
+ </div>
1101
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
1102
+ <button
1103
+ class="pf-v6-c-button pf-m-plain"
1104
+ type="button"
1105
+ disabled
1106
+ aria-label="Go to last page"
1107
+ >
1108
+ <span class="pf-v6-c-button__icon">
1109
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1110
+ </span>
1111
+ </button>
1112
+ </div>
1113
+ </nav>
1114
+ </div>
1119
1115
  </main>
1120
1116
  </div>
1121
1117
  </div>
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.3.0-prerelease.74",
4
+ "version": "6.3.0-prerelease.76",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -13846,7 +13846,7 @@ ul) {
13846
13846
 
13847
13847
  .pf-v6-c-dual-list-selector__item,
13848
13848
  .pf-v6-c-dual-list-selector__item-main {
13849
- flex-basis: 100%;
13849
+ flex-grow: 1;
13850
13850
  }
13851
13851
 
13852
13852
  .pf-v6-c-dual-list-selector__draggable {
@@ -13865,7 +13865,7 @@ ul) {
13865
13865
 
13866
13866
  .pf-v6-c-dual-list-selector__item {
13867
13867
  position: relative;
13868
- width: 100%;
13868
+ min-width: 0;
13869
13869
  padding-block-start: var(--pf-v6-c-dual-list-selector__item--PaddingBlockStart);
13870
13870
  padding-block-end: var(--pf-v6-c-dual-list-selector__item--PaddingBlockEnd);
13871
13871
  padding-inline-start: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
@@ -14107,6 +14107,8 @@ ul) {
14107
14107
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
14108
14108
  content: "";
14109
14109
  background-color: var(--pf-v6-c-divider--Color);
14110
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
14111
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
14110
14112
  }
14111
14113
  .pf-v6-c-divider.pf-m-horizontal {
14112
14114
  flex-direction: row;
@@ -22592,6 +22594,8 @@ ul.pf-v6-c-list {
22592
22594
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
22593
22595
  --pf-v6-c-progress__indicator--Height: var(--pf-v6-c-progress__bar--Height);
22594
22596
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
22597
+ --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
22598
+ --pf-v6-c-progress__indicator--BorderColor: transparent;
22595
22599
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
22596
22600
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
22597
22601
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -22762,6 +22766,13 @@ ul.pf-v6-c-list {
22762
22766
  height: var(--pf-v6-c-progress__indicator--Height);
22763
22767
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
22764
22768
  }
22769
+ .pf-v6-c-progress__indicator::before {
22770
+ position: absolute;
22771
+ inset: 0;
22772
+ content: "";
22773
+ border: var(--pf-v6-c-progress__indicator--BorderWidth) solid var(--pf-v6-c-progress__indicator--BorderColor);
22774
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
22775
+ }
22765
22776
 
22766
22777
  .pf-v6-c-progress__helper-text {
22767
22778
  grid-row: 3/4;
@@ -24425,11 +24436,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24425
24436
  --pf-v6-c-switch--Height: auto;
24426
24437
  --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
24427
24438
  --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
24428
- --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
24439
+ --pf-v6-c-switch__input--checked__toggle--BorderColor: transparent;
24440
+ --pf-v6-c-switch__input--checked__toggle--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24429
24441
  --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
24430
24442
  --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
24431
24443
  --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
24432
24444
  --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
24445
+ --pf-v6-c-switch__input--disabled__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
24433
24446
  --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
24434
24447
  --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
24435
24448
  --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
@@ -24444,6 +24457,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24444
24457
  --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
24445
24458
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
24446
24459
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
24460
+ --pf-v6-c-switch__toggle--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24447
24461
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
24448
24462
  --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24449
24463
  --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
@@ -24485,6 +24499,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24485
24499
  }
24486
24500
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
24487
24501
  --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
24502
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--checked__toggle--BorderColor);
24488
24503
  background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
24489
24504
  }
24490
24505
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
@@ -24510,6 +24525,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24510
24525
  }
24511
24526
  .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
24512
24527
  --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
24528
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--disabled__toggle--BorderColor);
24513
24529
  cursor: not-allowed;
24514
24530
  background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
24515
24531
  }
@@ -24534,6 +24550,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24534
24550
  height: var(--pf-v6-c-switch__toggle--before--Height);
24535
24551
  content: "";
24536
24552
  background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
24553
+ border: var(--pf-v6-c-switch__toggle--before--BorderWidth) solid transparent;
24537
24554
  border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
24538
24555
  transition: var(--pf-v6-c-switch__toggle--before--Transition);
24539
24556
  transform: translateY(-50%);