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

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 (10) hide show
  1. package/components/ExpandableSection/expandable-section.css +6 -2
  2. package/components/ExpandableSection/expandable-section.scss +7 -3
  3. package/components/Slider/slider.css +9 -0
  4. package/components/Slider/slider.scss +9 -0
  5. package/components/_index.css +15 -2
  6. package/package.json +2 -2
  7. package/patternfly-no-globals.css +15 -2
  8. package/patternfly.css +15 -2
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/components/ExpandableSection/expandable-section.css CHANGED
@@ -19,6 +19,7 @@
19
19
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
20
20
  --pf-v6-c-expandable-section__content--Opacity: 0;
21
21
  --pf-v6-c-expandable-section__content--TranslateY: 0;
22
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
22
23
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
23
24
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
24
25
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -66,6 +67,7 @@
66
67
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
67
68
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
68
69
  --pf-v6-c-expandable-section__content--Visibility: auto;
70
+ --pf-v6-c-expandable-section__content--Overflow: visible;
69
71
  --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
70
72
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
71
73
  gap: var(--pf-v6-c-expandable-section--Gap);
@@ -101,6 +103,7 @@
101
103
  }
102
104
  .pf-v6-c-expandable-section.pf-m-truncate {
103
105
  --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
106
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
104
107
  }
105
108
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
106
109
  display: -webkit-box;
@@ -127,13 +130,14 @@
127
130
  .pf-v6-c-expandable-section__content {
128
131
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
129
132
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
130
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
133
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
131
134
  }
132
135
  .pf-v6-c-expandable-section__content:where([hidden]) {
133
136
  display: revert;
134
137
  }
135
- .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
138
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
136
139
  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
140
+ overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
137
141
  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
138
142
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
139
143
  transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
package/components/ExpandableSection/expandable-section.scss CHANGED
@@ -23,6 +23,7 @@
23
23
  --#{$expandable-section}__content--TransitionDelay--hide: var(--#{$expandable-section}__content--TransitionDuration--fade);
24
24
  --#{$expandable-section}__content--Opacity: 0;
25
25
  --#{$expandable-section}__content--TranslateY: 0;
26
+ --#{$expandable-section}__content--PaddingInlineStart: 0;
26
27
  --#{$expandable-section}--m-expand-top__content--TranslateY: 0;
27
28
  --#{$expandable-section}--m-expand-bottom__content--TranslateY: 0;
28
29
  --#{$expandable-section}--m-expanded__content--Opacity: 1;
@@ -79,6 +80,7 @@
79
80
  --#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
80
81
  --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
81
82
  --#{$expandable-section}__content--Visibility: auto;
83
+ --#{$expandable-section}__content--Overflow: visible;
82
84
  --#{$expandable-section}__content--MaxHeight: 99999px;
83
85
  --#{$expandable-section}__content--TransitionDelay--hide: 0s;
84
86
 
@@ -128,6 +130,7 @@
128
130
 
129
131
  &.pf-m-truncate {
130
132
  --#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
133
+ --#{$expandable-section}__content--TransitionDelay--hide: 0s;
131
134
 
132
135
  &:not(.pf-m-expanded) .#{$expandable-section}__content {
133
136
  // stylelint-disable
@@ -156,15 +159,16 @@
156
159
 
157
160
  .#{$expandable-section}__content {
158
161
  max-width: var(--#{$expandable-section}__content--MaxWidth);
159
- padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
160
- padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
162
+ padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0); // TODO remove in breaking change
163
+ padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart);
161
164
 
162
165
  &:where([hidden]) {
163
166
  display: revert;
164
167
  }
165
168
 
166
- .#{$expandable-section}:where(:not(.pf-m-truncate)) & {
169
+ .#{$expandable-section}:where(:not(.pf-m-truncate)) > & {
167
170
  max-height: var(--#{$expandable-section}__content--MaxHeight, 0);
171
+ overflow: var(--#{$expandable-section}__content--Overflow, hidden);
168
172
  visibility: var(--#{$expandable-section}__content--Visibility, hidden);
169
173
  opacity: var(--#{$expandable-section}__content--Opacity);
170
174
  transition-delay: 0s, 0s, var(--#{$expandable-section}__content--TransitionDelay--hide, 0s), var(--#{$expandable-section}__content--TransitionDelay--hide, 0s);
package/components/Slider/slider.css CHANGED
@@ -6,6 +6,8 @@
6
6
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
7
7
  --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
8
8
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
9
+ --pf-v6-c-slider__rail-track--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
10
+ --pf-v6-c-slider__rail-track--before--BorderColor: transparent;
9
11
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
10
12
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
11
13
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
@@ -15,6 +17,8 @@
15
17
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
16
18
  --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
17
19
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
20
+ --pf-v6-c-slider__step-tick--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
21
+ --pf-v6-c-slider__step-tick--BorderColor: transparent;
18
22
  --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
19
23
  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
20
24
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
@@ -30,6 +34,8 @@
30
34
  --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
31
35
  --pf-v6-c-slider__thumb--TranslateX: -50%;
32
36
  --pf-v6-c-slider__thumb--TranslateY: -50%;
37
+ --pf-v6-c-slider__thumb--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
38
+ --pf-v6-c-slider__thumb--BorderColor: transparent;
33
39
  --pf-v6-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
34
40
  --pf-v6-c-slider__thumb--BoxShadow--base:
35
41
  0 0 0 2px var(--pf-t--global--background--color--primary--default),
@@ -99,6 +105,7 @@
99
105
  inset: 0;
100
106
  content: "";
101
107
  background: linear-gradient(to var(--pf-v6-c-slider__rail-track--before--fill--direction), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v6-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
108
+ border: var(--pf-v6-c-slider__rail-track--before--BorderWidth) solid var(--pf-v6-c-slider__rail-track--before--BorderColor);
102
109
  border-radius: var(--pf-v6-c-slider__rail-track--before--BorderRadius);
103
110
  }
104
111
 
@@ -134,6 +141,7 @@
134
141
  width: var(--pf-v6-c-slider__step-tick--Width);
135
142
  height: var(--pf-v6-c-slider__step-tick--Height);
136
143
  background-color: var(--pf-v6-c-slider__step-tick--BackgroundColor);
144
+ border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
137
145
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
138
146
  }
139
147
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
@@ -159,6 +167,7 @@
159
167
  height: var(--pf-v6-c-slider__thumb--Height);
160
168
  cursor: pointer;
161
169
  background-color: var(--pf-v6-c-slider__thumb--BackgroundColor);
170
+ border: var(--pf-v6-c-slider__thumb--BorderWidth) solid var(--pf-v6-c-slider__thumb--BorderColor);
162
171
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
163
172
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
164
173
  }
package/components/Slider/slider.scss CHANGED
@@ -10,6 +10,8 @@
10
10
  --#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
11
11
  --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12
12
  --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
13
+ --#{$slider}__rail-track--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14
+ --#{$slider}__rail-track--before--BorderColor: transparent;
13
15
  --#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
14
16
  --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
15
17
 
@@ -23,6 +25,8 @@
23
25
  --#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
24
26
  --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
25
27
  --#{$slider}__step-tick--TranslateX: -50%;
28
+ --#{$slider}__step-tick--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
29
+ --#{$slider}__step-tick--BorderColor: transparent;
26
30
  --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
27
31
  --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
28
32
  --#{$slider}__step--first-child__step-tick--TranslateX: 0;
@@ -42,6 +46,8 @@
42
46
  --#{$slider}__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
43
47
  --#{$slider}__thumb--TranslateX: -50%;
44
48
  --#{$slider}__thumb--TranslateY: -50%;
49
+ --#{$slider}__thumb--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
50
+ --#{$slider}__thumb--BorderColor: transparent;
45
51
  --#{$slider}__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
46
52
  --#{$slider}__thumb--BoxShadow--base:
47
53
  0 0 0 2px var(--pf-t--global--background--color--primary--default),
@@ -127,6 +133,7 @@
127
133
  var(--#{$slider}__rail-track--before--fill--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop),
128
134
  var(--#{$slider}__rail-track--before--base--BackgroundColor) var(--#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop)
129
135
  );
136
+ border: var(--#{$slider}__rail-track--before--BorderWidth) solid var(--#{$slider}__rail-track--before--BorderColor);
130
137
  border-radius: var(--#{$slider}__rail-track--before--BorderRadius);
131
138
  }
132
139
  }
@@ -171,6 +178,7 @@
171
178
  width: var(--#{$slider}__step-tick--Width);
172
179
  height: var(--#{$slider}__step-tick--Height);
173
180
  background-color: var(--#{$slider}__step-tick--BackgroundColor);
181
+ border: var(--#{$slider}__step-tick--BorderWidth) solid var(--#{$slider}__step-tick--BorderColor);
174
182
  border-radius: var(--#{$slider}__step-tick--BorderRadius);
175
183
  }
176
184
 
@@ -200,6 +208,7 @@
200
208
  height: var(--#{$slider}__thumb--Height);
201
209
  cursor: pointer;
202
210
  background-color: var(--#{$slider}__thumb--BackgroundColor);
211
+ border: var(--#{$slider}__thumb--BorderWidth) solid var(--#{$slider}__thumb--BorderColor);
203
212
  border-radius: var(--#{$slider}__thumb--BorderRadius);
204
213
  box-shadow: var(--#{$slider}__thumb--BoxShadow);
205
214
 
package/components/_index.css CHANGED
@@ -6694,6 +6694,7 @@ ul) {
6694
6694
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6695
6695
  --pf-v6-c-expandable-section__content--Opacity: 0;
6696
6696
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6697
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
6697
6698
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6698
6699
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6699
6700
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -6741,6 +6742,7 @@ ul) {
6741
6742
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6742
6743
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6743
6744
  --pf-v6-c-expandable-section__content--Visibility: auto;
6745
+ --pf-v6-c-expandable-section__content--Overflow: visible;
6744
6746
  --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
6745
6747
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
6746
6748
  gap: var(--pf-v6-c-expandable-section--Gap);
@@ -6776,6 +6778,7 @@ ul) {
6776
6778
  }
6777
6779
  .pf-v6-c-expandable-section.pf-m-truncate {
6778
6780
  --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
6781
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
6779
6782
  }
6780
6783
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
6781
6784
  display: -webkit-box;
@@ -6802,13 +6805,14 @@ ul) {
6802
6805
  .pf-v6-c-expandable-section__content {
6803
6806
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
6804
6807
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
6805
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6808
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
6806
6809
  }
6807
6810
  .pf-v6-c-expandable-section__content:where([hidden]) {
6808
6811
  display: revert;
6809
6812
  }
6810
- .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
6813
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
6811
6814
  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
6815
+ overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
6812
6816
  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
6813
6817
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
6814
6818
  transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
@@ -15439,6 +15443,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15439
15443
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
15440
15444
  --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
15441
15445
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
15446
+ --pf-v6-c-slider__rail-track--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15447
+ --pf-v6-c-slider__rail-track--before--BorderColor: transparent;
15442
15448
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
15443
15449
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
15444
15450
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
@@ -15448,6 +15454,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15448
15454
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
15449
15455
  --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
15450
15456
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
15457
+ --pf-v6-c-slider__step-tick--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15458
+ --pf-v6-c-slider__step-tick--BorderColor: transparent;
15451
15459
  --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
15452
15460
  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
15453
15461
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
@@ -15463,6 +15471,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15463
15471
  --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
15464
15472
  --pf-v6-c-slider__thumb--TranslateX: -50%;
15465
15473
  --pf-v6-c-slider__thumb--TranslateY: -50%;
15474
+ --pf-v6-c-slider__thumb--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15475
+ --pf-v6-c-slider__thumb--BorderColor: transparent;
15466
15476
  --pf-v6-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
15467
15477
  --pf-v6-c-slider__thumb--BoxShadow--base:
15468
15478
  0 0 0 2px var(--pf-t--global--background--color--primary--default),
@@ -15532,6 +15542,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15532
15542
  inset: 0;
15533
15543
  content: "";
15534
15544
  background: linear-gradient(to var(--pf-v6-c-slider__rail-track--before--fill--direction), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v6-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
15545
+ border: var(--pf-v6-c-slider__rail-track--before--BorderWidth) solid var(--pf-v6-c-slider__rail-track--before--BorderColor);
15535
15546
  border-radius: var(--pf-v6-c-slider__rail-track--before--BorderRadius);
15536
15547
  }
15537
15548
 
@@ -15567,6 +15578,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15567
15578
  width: var(--pf-v6-c-slider__step-tick--Width);
15568
15579
  height: var(--pf-v6-c-slider__step-tick--Height);
15569
15580
  background-color: var(--pf-v6-c-slider__step-tick--BackgroundColor);
15581
+ border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
15570
15582
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
15571
15583
  }
15572
15584
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
@@ -15592,6 +15604,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15592
15604
  height: var(--pf-v6-c-slider__thumb--Height);
15593
15605
  cursor: pointer;
15594
15606
  background-color: var(--pf-v6-c-slider__thumb--BackgroundColor);
15607
+ border: var(--pf-v6-c-slider__thumb--BorderWidth) solid var(--pf-v6-c-slider__thumb--BorderColor);
15595
15608
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
15596
15609
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
15597
15610
  }
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.72",
4
+ "version": "6.3.0-prerelease.74",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
@@ -51,7 +51,7 @@
51
51
  "@commitlint/config-conventional": "^19.1.0",
52
52
  "@fortawesome/fontawesome": "^1.1.8",
53
53
  "@octokit/rest": "^20.1.0",
54
- "@patternfly/documentation-framework": "6.22.7",
54
+ "@patternfly/documentation-framework": "6.22.8",
55
55
  "@patternfly/patternfly-a11y": "5.1.0",
56
56
  "@patternfly/react-code-editor": "6.3.1",
57
57
  "@patternfly/react-core": "6.3.1",
package/patternfly-no-globals.css CHANGED
@@ -15361,6 +15361,7 @@ ul) {
15361
15361
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
15362
15362
  --pf-v6-c-expandable-section__content--Opacity: 0;
15363
15363
  --pf-v6-c-expandable-section__content--TranslateY: 0;
15364
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
15364
15365
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
15365
15366
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
15366
15367
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -15408,6 +15409,7 @@ ul) {
15408
15409
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
15409
15410
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
15410
15411
  --pf-v6-c-expandable-section__content--Visibility: auto;
15412
+ --pf-v6-c-expandable-section__content--Overflow: visible;
15411
15413
  --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
15412
15414
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
15413
15415
  gap: var(--pf-v6-c-expandable-section--Gap);
@@ -15443,6 +15445,7 @@ ul) {
15443
15445
  }
15444
15446
  .pf-v6-c-expandable-section.pf-m-truncate {
15445
15447
  --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
15448
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
15446
15449
  }
15447
15450
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
15448
15451
  display: -webkit-box;
@@ -15469,13 +15472,14 @@ ul) {
15469
15472
  .pf-v6-c-expandable-section__content {
15470
15473
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
15471
15474
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
15472
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
15475
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
15473
15476
  }
15474
15477
  .pf-v6-c-expandable-section__content:where([hidden]) {
15475
15478
  display: revert;
15476
15479
  }
15477
- .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
15480
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
15478
15481
  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
15482
+ overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
15479
15483
  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
15480
15484
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
15481
15485
  transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
@@ -24106,6 +24110,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24106
24110
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
24107
24111
  --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
24108
24112
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
24113
+ --pf-v6-c-slider__rail-track--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24114
+ --pf-v6-c-slider__rail-track--before--BorderColor: transparent;
24109
24115
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
24110
24116
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
24111
24117
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
@@ -24115,6 +24121,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24115
24121
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
24116
24122
  --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
24117
24123
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
24124
+ --pf-v6-c-slider__step-tick--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24125
+ --pf-v6-c-slider__step-tick--BorderColor: transparent;
24118
24126
  --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
24119
24127
  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
24120
24128
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
@@ -24130,6 +24138,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24130
24138
  --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
24131
24139
  --pf-v6-c-slider__thumb--TranslateX: -50%;
24132
24140
  --pf-v6-c-slider__thumb--TranslateY: -50%;
24141
+ --pf-v6-c-slider__thumb--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24142
+ --pf-v6-c-slider__thumb--BorderColor: transparent;
24133
24143
  --pf-v6-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
24134
24144
  --pf-v6-c-slider__thumb--BoxShadow--base:
24135
24145
  0 0 0 2px var(--pf-t--global--background--color--primary--default),
@@ -24199,6 +24209,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24199
24209
  inset: 0;
24200
24210
  content: "";
24201
24211
  background: linear-gradient(to var(--pf-v6-c-slider__rail-track--before--fill--direction), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v6-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
24212
+ border: var(--pf-v6-c-slider__rail-track--before--BorderWidth) solid var(--pf-v6-c-slider__rail-track--before--BorderColor);
24202
24213
  border-radius: var(--pf-v6-c-slider__rail-track--before--BorderRadius);
24203
24214
  }
24204
24215
 
@@ -24234,6 +24245,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24234
24245
  width: var(--pf-v6-c-slider__step-tick--Width);
24235
24246
  height: var(--pf-v6-c-slider__step-tick--Height);
24236
24247
  background-color: var(--pf-v6-c-slider__step-tick--BackgroundColor);
24248
+ border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
24237
24249
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
24238
24250
  }
24239
24251
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
@@ -24259,6 +24271,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24259
24271
  height: var(--pf-v6-c-slider__thumb--Height);
24260
24272
  cursor: pointer;
24261
24273
  background-color: var(--pf-v6-c-slider__thumb--BackgroundColor);
24274
+ border: var(--pf-v6-c-slider__thumb--BorderWidth) solid var(--pf-v6-c-slider__thumb--BorderColor);
24262
24275
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
24263
24276
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
24264
24277
  }
package/patternfly.css CHANGED
@@ -15501,6 +15501,7 @@ ul) {
15501
15501
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
15502
15502
  --pf-v6-c-expandable-section__content--Opacity: 0;
15503
15503
  --pf-v6-c-expandable-section__content--TranslateY: 0;
15504
+ --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
15504
15505
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
15505
15506
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
15506
15507
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -15548,6 +15549,7 @@ ul) {
15548
15549
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
15549
15550
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
15550
15551
  --pf-v6-c-expandable-section__content--Visibility: auto;
15552
+ --pf-v6-c-expandable-section__content--Overflow: visible;
15551
15553
  --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
15552
15554
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
15553
15555
  gap: var(--pf-v6-c-expandable-section--Gap);
@@ -15583,6 +15585,7 @@ ul) {
15583
15585
  }
15584
15586
  .pf-v6-c-expandable-section.pf-m-truncate {
15585
15587
  --pf-v6-c-expandable-section--Gap: var(--pf-v6-c-expandable-section--m-truncate--Gap);
15588
+ --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
15586
15589
  }
15587
15590
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
15588
15591
  display: -webkit-box;
@@ -15609,13 +15612,14 @@ ul) {
15609
15612
  .pf-v6-c-expandable-section__content {
15610
15613
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
15611
15614
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
15612
- padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
15615
+ padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart);
15613
15616
  }
15614
15617
  .pf-v6-c-expandable-section__content:where([hidden]) {
15615
15618
  display: revert;
15616
15619
  }
15617
- .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
15620
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) > .pf-v6-c-expandable-section__content {
15618
15621
  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
15622
+ overflow: var(--pf-v6-c-expandable-section__content--Overflow, hidden);
15619
15623
  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
15620
15624
  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
15621
15625
  transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
@@ -24246,6 +24250,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24246
24250
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
24247
24251
  --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
24248
24252
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
24253
+ --pf-v6-c-slider__rail-track--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24254
+ --pf-v6-c-slider__rail-track--before--BorderColor: transparent;
24249
24255
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
24250
24256
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
24251
24257
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
@@ -24255,6 +24261,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24255
24261
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
24256
24262
  --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
24257
24263
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
24264
+ --pf-v6-c-slider__step-tick--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24265
+ --pf-v6-c-slider__step-tick--BorderColor: transparent;
24258
24266
  --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
24259
24267
  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
24260
24268
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
@@ -24270,6 +24278,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24270
24278
  --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
24271
24279
  --pf-v6-c-slider__thumb--TranslateX: -50%;
24272
24280
  --pf-v6-c-slider__thumb--TranslateY: -50%;
24281
+ --pf-v6-c-slider__thumb--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
24282
+ --pf-v6-c-slider__thumb--BorderColor: transparent;
24273
24283
  --pf-v6-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
24274
24284
  --pf-v6-c-slider__thumb--BoxShadow--base:
24275
24285
  0 0 0 2px var(--pf-t--global--background--color--primary--default),
@@ -24339,6 +24349,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24339
24349
  inset: 0;
24340
24350
  content: "";
24341
24351
  background: linear-gradient(to var(--pf-v6-c-slider__rail-track--before--fill--direction), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v6-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
24352
+ border: var(--pf-v6-c-slider__rail-track--before--BorderWidth) solid var(--pf-v6-c-slider__rail-track--before--BorderColor);
24342
24353
  border-radius: var(--pf-v6-c-slider__rail-track--before--BorderRadius);
24343
24354
  }
24344
24355
 
@@ -24374,6 +24385,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24374
24385
  width: var(--pf-v6-c-slider__step-tick--Width);
24375
24386
  height: var(--pf-v6-c-slider__step-tick--Height);
24376
24387
  background-color: var(--pf-v6-c-slider__step-tick--BackgroundColor);
24388
+ border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
24377
24389
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
24378
24390
  }
24379
24391
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
@@ -24399,6 +24411,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24399
24411
  height: var(--pf-v6-c-slider__thumb--Height);
24400
24412
  cursor: pointer;
24401
24413
  background-color: var(--pf-v6-c-slider__thumb--BackgroundColor);
24414
+ border: var(--pf-v6-c-slider__thumb--BorderWidth) solid var(--pf-v6-c-slider__thumb--BorderColor);
24402
24415
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
24403
24416
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
24404
24417
  }