@patternfly/patternfly 6.3.0-prerelease.75 → 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 (13) hide show
  1. package/components/Divider/divider.css +2 -0
  2. package/components/Divider/divider.scss +2 -0
  3. package/components/Progress/progress.css +9 -0
  4. package/components/Progress/progress.scss +11 -0
  5. package/components/Switch/switch.css +7 -1
  6. package/components/Switch/switch.scss +7 -1
  7. package/components/_index.css +18 -1
  8. package/docs/demos/CardView/examples/CardView.md +81 -85
  9. package/package.json +1 -1
  10. package/patternfly-no-globals.css +18 -1
  11. package/patternfly.css +18 -1
  12. package/patternfly.min.css +1 -1
  13. 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/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
@@ -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.75",
4
+ "version": "6.3.0-prerelease.76",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -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%);
package/patternfly.css CHANGED
@@ -14247,6 +14247,8 @@ ul) {
14247
14247
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
14248
14248
  content: "";
14249
14249
  background-color: var(--pf-v6-c-divider--Color);
14250
+ border-block-start: var(--pf-v6-c-divider--Size) solid transparent;
14251
+ border-inline-start: var(--pf-v6-c-divider--Size) solid transparent;
14250
14252
  }
14251
14253
  .pf-v6-c-divider.pf-m-horizontal {
14252
14254
  flex-direction: row;
@@ -22732,6 +22734,8 @@ ul.pf-v6-c-list {
22732
22734
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
22733
22735
  --pf-v6-c-progress__indicator--Height: var(--pf-v6-c-progress__bar--Height);
22734
22736
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
22737
+ --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
22738
+ --pf-v6-c-progress__indicator--BorderColor: transparent;
22735
22739
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
22736
22740
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
22737
22741
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -22902,6 +22906,13 @@ ul.pf-v6-c-list {
22902
22906
  height: var(--pf-v6-c-progress__indicator--Height);
22903
22907
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
22904
22908
  }
22909
+ .pf-v6-c-progress__indicator::before {
22910
+ position: absolute;
22911
+ inset: 0;
22912
+ content: "";
22913
+ border: var(--pf-v6-c-progress__indicator--BorderWidth) solid var(--pf-v6-c-progress__indicator--BorderColor);
22914
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
22915
+ }
22905
22916
 
22906
22917
  .pf-v6-c-progress__helper-text {
22907
22918
  grid-row: 3/4;
@@ -24565,11 +24576,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24565
24576
  --pf-v6-c-switch--Height: auto;
24566
24577
  --pf-v6-c-switch__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
24567
24578
  --pf-v6-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v6-c-switch__toggle-icon--Offset));
24568
- --pf-v6-c-switch__input--checked__toggle--BorderWidth: 0;
24579
+ --pf-v6-c-switch__input--checked__toggle--BorderColor: transparent;
24580
+ --pf-v6-c-switch__input--checked__toggle--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24569
24581
  --pf-v6-c-switch__input--checked__label--Color: var(--pf-t--global--text--color--regular);
24570
24582
  --pf-v6-c-switch__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
24571
24583
  --pf-v6-c-switch__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
24572
24584
  --pf-v6-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
24585
+ --pf-v6-c-switch__input--disabled__toggle--BorderColor: var(--pf-t--global--border--color--high-contrast);
24573
24586
  --pf-v6-c-switch__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
24574
24587
  --pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
24575
24588
  --pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
@@ -24584,6 +24597,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24584
24597
  --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
24585
24598
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
24586
24599
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
24600
+ --pf-v6-c-switch__toggle--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24587
24601
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
24588
24602
  --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24589
24603
  --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
@@ -24625,6 +24639,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24625
24639
  }
24626
24640
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle {
24627
24641
  --pf-v6-c-switch__toggle--BorderWidth: var(--pf-v6-c-switch__input--checked__toggle--BorderWidth);
24642
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--checked__toggle--BorderColor);
24628
24643
  background-color: var(--pf-v6-c-switch__input--checked__toggle--BackgroundColor);
24629
24644
  }
24630
24645
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
@@ -24650,6 +24665,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24650
24665
  }
24651
24666
  .pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle {
24652
24667
  --pf-v6-c-switch__toggle-icon--Color: var(--pf-v6-c-switch__input--disabled__toggle-icon--Color);
24668
+ --pf-v6-c-switch__toggle--BorderColor: var(--pf-v6-c-switch__input--disabled__toggle--BorderColor);
24653
24669
  cursor: not-allowed;
24654
24670
  background-color: var(--pf-v6-c-switch__input--disabled__toggle--BackgroundColor);
24655
24671
  }
@@ -24674,6 +24690,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24674
24690
  height: var(--pf-v6-c-switch__toggle--before--Height);
24675
24691
  content: "";
24676
24692
  background-color: var(--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor);
24693
+ border: var(--pf-v6-c-switch__toggle--before--BorderWidth) solid transparent;
24677
24694
  border-radius: var(--pf-v6-c-switch__toggle--before--BorderRadius);
24678
24695
  transition: var(--pf-v6-c-switch__toggle--before--Transition);
24679
24696
  transform: translateY(-50%);