@patternfly/patternfly 6.3.0-prerelease.30 → 6.3.0-prerelease.32

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 (18) hide show
  1. package/components/InputGroup/input-group.css +80 -0
  2. package/components/InputGroup/input-group.scss +95 -0
  3. package/components/Page/page.css +17 -3
  4. package/components/Page/page.scss +15 -3
  5. package/components/_index.css +97 -3
  6. package/docs/components/Button/examples/Button.md +4 -1
  7. package/docs/components/CodeBlock/examples/CodeBlock.md +1 -1
  8. package/docs/components/ExpandableSection/examples/ExpandableSection.md +6 -6
  9. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  10. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  11. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  12. package/docs/components/Slider/examples/Slider.md +2 -2
  13. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  14. package/package.json +1 -1
  15. package/patternfly-no-globals.css +97 -3
  16. package/patternfly.css +97 -3
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/components/InputGroup/input-group.css CHANGED
@@ -19,6 +19,30 @@
19
19
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
20
20
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
21
21
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
22
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
24
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
25
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
26
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
27
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
28
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
29
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
30
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
31
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
32
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
33
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
34
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
35
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
36
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
37
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
38
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
39
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
40
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
41
+ }
42
+ @media (prefers-reduced-motion: no-preference) {
43
+ .pf-v6-c-input-group {
44
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
45
+ }
22
46
  }
23
47
 
24
48
  .pf-v6-c-input-group {
@@ -26,6 +50,62 @@
26
50
  gap: var(--pf-v6-c-input-group--Gap);
27
51
  width: 100%;
28
52
  }
53
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
54
+ --pf-v6-c-input-group--Gap: 0;
55
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
56
+ }
57
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
58
+ flex-grow: 1;
59
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
60
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
61
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
62
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
63
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
64
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
65
+ transition-property: opacity, scale, visibility, max-width;
66
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
67
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
68
+ }
69
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
70
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
71
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
72
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
73
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
74
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
75
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
76
+ transition-property: opacity, visibility, max-width;
77
+ }
78
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
79
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
80
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
81
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
82
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
83
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
84
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
85
+ transition-property: opacity, visibility, max-width;
86
+ }
87
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
88
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
89
+ }
90
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
91
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
92
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
93
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
94
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
95
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
96
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
97
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
98
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
99
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
100
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
101
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
102
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
103
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
104
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
105
+ }
106
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
107
+ transition-delay: 0s;
108
+ }
29
109
 
30
110
  .pf-v6-c-input-group__item {
31
111
  position: relative;
package/components/InputGroup/input-group.scss CHANGED
@@ -31,12 +31,107 @@
31
31
  // Input group text, disabled variant
32
32
  --#{$input-group}__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
33
33
  --#{$input-group}__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
34
+
35
+ // Input group search expanded
36
+ --#{$input-group}__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
37
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
38
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
39
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
40
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
41
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--fade);
42
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--collapse--slide);
43
+ --#{$input-group}__item--m-search-text-input--ScaleX: 1;
44
+ --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start: 100%;
45
+ --#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end: 0;
46
+ --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-end);
47
+ --#{$input-group}__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
48
+ --#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade: 0s;
49
+ --#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
50
+ --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--expand--fade);
51
+ --#{$input-group}__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
52
+ --#{$input-group}__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
53
+ --#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
54
+ --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--collapse--fade);
55
+
56
+ @media (prefers-reduced-motion: no-preference) {
57
+ --#{$input-group}__item--m-search-text-input--ScaleX: .7;
58
+ }
34
59
  }
35
60
 
36
61
  .#{$input-group} {
37
62
  display: flex;
38
63
  gap: var(--#{$input-group}--Gap);
39
64
  width: 100%;
65
+
66
+ &.pf-m-search-expandable {
67
+ &:not(.pf-m-expanded) {
68
+ --#{$input-group}--Gap: 0;
69
+
70
+ transition: gap 0s var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
71
+ }
72
+
73
+ .#{$input-group}__item {
74
+ &.pf-m-search-input {
75
+ flex-grow: 1;
76
+ max-width: var(--#{$input-group}__item--m-search-text-input--MaxWidth, 0);
77
+ visibility: var(--#{$input-group}__item--m-search-text-input--Visibility, hidden);
78
+ opacity: var(--#{$input-group}__item--m-search-text-input--Opacity, 0);
79
+ transition-delay: 0s, 0s, var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade);
80
+ transition-timing-function: var(--#{$input-group}__item--m-search-text-input--TransitionTimingFunction);
81
+ transition-duration: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--fade), var(--#{$input-group}__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
82
+ transition-property: opacity, scale, visibility, max-width;
83
+ transform-origin: var(--#{$input-group}__item--m-search-text-input--TransformOriginX) center;
84
+ scale: var(--#{$input-group}__item--m-search-text-input--ScaleX) 1;
85
+ }
86
+
87
+ // the expand button (magnifying glass)
88
+ &.pf-m-search-expand {
89
+ max-width: var(--#{$input-group}__item--m-search-expand--MaxWidth, 100%);
90
+ visibility: var(--#{$input-group}__item--m-search-expand--Visibility, visible);
91
+ opacity: var(--#{$input-group}__item--m-search-expand--Opacity, 1);
92
+ transition-delay: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
93
+ transition-timing-function: var(--#{$input-group}__item--m-search-expand--TransitionTimingFunction);
94
+ transition-duration: var(--#{$input-group}__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
95
+ transition-property: opacity, visibility, max-width;
96
+ }
97
+
98
+ // other input group items adjacent to the search input that are shown when expanded
99
+ &.pf-m-search-action {
100
+ max-width: var(--#{$input-group}__item--m-search-action--MaxWidth, 0);
101
+ visibility: var(--#{$input-group}__item--m-search-action--Visibility, hidden);
102
+ opacity: var(--#{$input-group}__item--m-search-action--Opacity, 0);
103
+ transition-delay: 0s, var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), var(--#{$input-group}__item--m-search-action--TransitionDuration--fade);
104
+ transition-timing-function: var(--#{$input-group}__item--m-search-action--TransitionTimingFunction);
105
+ transition-duration: var(--#{$input-group}__item--m-search-action--TransitionDuration--fade), 0s, 0s;
106
+ transition-property: opacity, visibility, max-width;
107
+ }
108
+ }
109
+
110
+ &.pf-m-expand-start {
111
+ --#{$input-group}__item--m-search-text-input--TransformOriginX: var(--#{$input-group}__item--m-search-text-input--TransformOriginX--expand-start);
112
+ }
113
+
114
+ &.pf-m-expanded {
115
+ --#{$input-group}__item--m-search-text-input--MaxWidth: 100%;
116
+ --#{$input-group}__item--m-search-text-input--Visibility: visible;
117
+ --#{$input-group}__item--m-search-text-input--Opacity: 1;
118
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--fade: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--fade);
119
+ --#{$input-group}__item--m-search-text-input--TransitionDuration--slide: var(--#{$input-group}__item--m-search-text-input--TransitionDuration--expand--slide);
120
+ --#{$input-group}__item--m-search-text-input--ScaleX: 1;
121
+ --#{$input-group}__item--m-search-action--MaxWidth: 100%;
122
+ --#{$input-group}__item--m-search-action--Visibility: visible;
123
+ --#{$input-group}__item--m-search-action--Opacity: 1;
124
+ --#{$input-group}__item--m-search-action--TransitionDuration--fade: var(--#{$input-group}__item--m-search-action--TransitionDuration--expand--fade);
125
+ --#{$input-group}__item--m-search-expand--MaxWidth: 0;
126
+ --#{$input-group}__item--m-search-expand--Visibility: hidden;
127
+ --#{$input-group}__item--m-search-expand--Opacity: 0;
128
+ --#{$input-group}__item--m-search-expand--TransitionDuration--fade: var(--#{$input-group}__item--m-search-expand--TransitionDuration--collapse--fade);
129
+
130
+ .#{$input-group}__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
131
+ transition-delay: 0s;
132
+ }
133
+ }
134
+ }
40
135
  }
41
136
 
42
137
  .#{$input-group}__item {
package/components/Page/page.css CHANGED
@@ -8,9 +8,13 @@
8
8
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
9
9
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
10
10
  --pf-v6-c-page__sidebar--BoxShadow: none;
11
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12
- --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11
+ --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
13
+ --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
13
14
  --pf-v6-c-page__sidebar--TranslateX: -100%;
15
+ --pf-v6-c-page__sidebar--Opacity: 0;
16
+ --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
17
+ --pf-v6-c-page__sidebar--xl--Opacity: 1;
14
18
  --pf-v6-c-page__sidebar--TranslateZ: 0;
15
19
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
16
20
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -88,9 +92,17 @@
88
92
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
89
93
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
90
94
  }
95
+ @media screen and (prefers-reduced-motion: no-preference) {
96
+ .pf-v6-c-page {
97
+ --pf-v6-c-page__sidebar--Opacity: 1;
98
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
99
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
100
+ }
101
+ }
91
102
  @media screen and (min-width: 75rem) {
92
103
  .pf-v6-c-page {
93
104
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
105
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
94
106
  }
95
107
  }
96
108
 
@@ -184,7 +196,8 @@
184
196
  overflow-y: auto;
185
197
  -webkit-overflow-scrolling: touch;
186
198
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
187
- transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
199
+ opacity: var(--pf-v6-c-page__sidebar--Opacity);
200
+ transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
188
201
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
189
202
  }
190
203
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -193,6 +206,7 @@
193
206
 
194
207
  .pf-v6-c-page__sidebar.pf-m-expanded {
195
208
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
209
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
196
210
  box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
197
211
  }
198
212
  @media screen and (min-width: 75rem) {
package/components/Page/page.scss CHANGED
@@ -21,9 +21,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
21
21
  --#{$page}__sidebar--BoxShadow: none;
22
22
 
23
23
  // TODO Reduced Motion default needed
24
- --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
25
- --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24
+ --#{$page}__sidebar--TransitionProperty: opacity;
25
+ --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
26
+ --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
26
27
  --#{$page}__sidebar--TranslateX: -100%;
28
+ --#{$page}__sidebar--Opacity: 0;
29
+ --#{$page}__sidebar--m-expanded--Opacity: 1;
30
+ --#{$page}__sidebar--xl--Opacity: 1;
27
31
  --#{$page}__sidebar--TranslateZ: 0;
28
32
  --#{$page}__sidebar--m-expanded--TranslateX: 0;
29
33
  --#{$page}__sidebar--xl--TranslateX: 0;
@@ -32,6 +36,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
32
36
  --#{$page}__sidebar--PaddingInlineStart: 0;
33
37
  --#{$page}__sidebar--PaddingInlineEnd: 0;
34
38
 
39
+ @media screen and (prefers-reduced-motion: no-preference) {
40
+ --#{$page}__sidebar--Opacity: 1;
41
+ --#{$page}__sidebar--TransitionProperty: transform;
42
+ --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
43
+ }
35
44
 
36
45
  // Sidebar header
37
46
  --#{$page}__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -54,6 +63,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
54
63
 
55
64
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
56
65
  --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
66
+ --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--xl--Opacity);
57
67
  }
58
68
 
59
69
  // Container for the main content area (grid area)
@@ -209,7 +219,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
209
219
  overflow-y: auto;
210
220
  -webkit-overflow-scrolling: touch;
211
221
  background-color: var(--#{$page}__sidebar--BackgroundColor);
212
- transition: transform var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
222
+ opacity: var(--#{$page}__sidebar--Opacity);
223
+ transition: var(--#{$page}__sidebar--TransitionProperty) var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
213
224
 
214
225
  @include pf-v6-bidirectional-style(
215
226
  $prop: transform,
@@ -221,6 +232,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
221
232
  // Expanded nav
222
233
  &.pf-m-expanded {
223
234
  --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--m-expanded--TranslateX);
235
+ --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--m-expanded--Opacity);
224
236
 
225
237
  box-shadow: var(--#{$page}__sidebar--BoxShadow);
226
238
 
package/components/_index.css CHANGED
@@ -8189,6 +8189,30 @@ ul) {
8189
8189
  --pf-v6-c-input-group__text--Color: var(--pf-t--global--text--color--regular);
8190
8190
  --pf-v6-c-input-group__item--m-disabled__text--Color: var(--pf-t--global--text--color--on-disabled);
8191
8191
  --pf-v6-c-input-group__item--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
8192
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
8193
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
8194
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
8195
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
8196
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
8197
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--fade);
8198
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--collapse--slide);
8199
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
8200
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start: 100%;
8201
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end: 0;
8202
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-end);
8203
+ --pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction:var(--pf-t--global--motion--timing-function--default);
8204
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade: 0s;
8205
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade: 0s;
8206
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--expand--fade);
8207
+ --pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
8208
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
8209
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
8210
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--collapse--fade);
8211
+ }
8212
+ @media (prefers-reduced-motion: no-preference) {
8213
+ .pf-v6-c-input-group {
8214
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: .7;
8215
+ }
8192
8216
  }
8193
8217
 
8194
8218
  .pf-v6-c-input-group {
@@ -8196,6 +8220,62 @@ ul) {
8196
8220
  gap: var(--pf-v6-c-input-group--Gap);
8197
8221
  width: 100%;
8198
8222
  }
8223
+ .pf-v6-c-input-group.pf-m-search-expandable:not(.pf-m-expanded) {
8224
+ --pf-v6-c-input-group--Gap: 0;
8225
+ transition: gap 0s var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
8226
+ }
8227
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-input {
8228
+ flex-grow: 1;
8229
+ max-width: var(--pf-v6-c-input-group__item--m-search-text-input--MaxWidth, 0);
8230
+ visibility: var(--pf-v6-c-input-group__item--m-search-text-input--Visibility, hidden);
8231
+ opacity: var(--pf-v6-c-input-group__item--m-search-text-input--Opacity, 0);
8232
+ transition-delay: 0s, 0s, var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade);
8233
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionTimingFunction);
8234
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide), 0s, 0s;
8235
+ transition-property: opacity, scale, visibility, max-width;
8236
+ transform-origin: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX) center;
8237
+ scale: var(--pf-v6-c-input-group__item--m-search-text-input--ScaleX) 1;
8238
+ }
8239
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-expand {
8240
+ max-width: var(--pf-v6-c-input-group__item--m-search-expand--MaxWidth, 100%);
8241
+ visibility: var(--pf-v6-c-input-group__item--m-search-expand--Visibility, visible);
8242
+ opacity: var(--pf-v6-c-input-group__item--m-search-expand--Opacity, 1);
8243
+ transition-delay: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
8244
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-expand--TransitionTimingFunction);
8245
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade), 0s, 0s;
8246
+ transition-property: opacity, visibility, max-width;
8247
+ }
8248
+ .pf-v6-c-input-group.pf-m-search-expandable .pf-v6-c-input-group__item.pf-m-search-action {
8249
+ max-width: var(--pf-v6-c-input-group__item--m-search-action--MaxWidth, 0);
8250
+ visibility: var(--pf-v6-c-input-group__item--m-search-action--Visibility, hidden);
8251
+ opacity: var(--pf-v6-c-input-group__item--m-search-action--Opacity, 0);
8252
+ transition-delay: 0s, var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade);
8253
+ transition-timing-function: var(--pf-v6-c-input-group__item--m-search-action--TransitionTimingFunction);
8254
+ transition-duration: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade), 0s, 0s;
8255
+ transition-property: opacity, visibility, max-width;
8256
+ }
8257
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expand-start {
8258
+ --pf-v6-c-input-group__item--m-search-text-input--TransformOriginX: var(--pf-v6-c-input-group__item--m-search-text-input--TransformOriginX--expand-start);
8259
+ }
8260
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded {
8261
+ --pf-v6-c-input-group__item--m-search-text-input--MaxWidth: 100%;
8262
+ --pf-v6-c-input-group__item--m-search-text-input--Visibility: visible;
8263
+ --pf-v6-c-input-group__item--m-search-text-input--Opacity: 1;
8264
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--fade);
8265
+ --pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--slide: var(--pf-v6-c-input-group__item--m-search-text-input--TransitionDuration--expand--slide);
8266
+ --pf-v6-c-input-group__item--m-search-text-input--ScaleX: 1;
8267
+ --pf-v6-c-input-group__item--m-search-action--MaxWidth: 100%;
8268
+ --pf-v6-c-input-group__item--m-search-action--Visibility: visible;
8269
+ --pf-v6-c-input-group__item--m-search-action--Opacity: 1;
8270
+ --pf-v6-c-input-group__item--m-search-action--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-action--TransitionDuration--expand--fade);
8271
+ --pf-v6-c-input-group__item--m-search-expand--MaxWidth: 0;
8272
+ --pf-v6-c-input-group__item--m-search-expand--Visibility: hidden;
8273
+ --pf-v6-c-input-group__item--m-search-expand--Opacity: 0;
8274
+ --pf-v6-c-input-group__item--m-search-expand--TransitionDuration--fade: var(--pf-v6-c-input-group__item--m-search-expand--TransitionDuration--collapse--fade);
8275
+ }
8276
+ .pf-v6-c-input-group.pf-m-search-expandable.pf-m-expanded .pf-v6-c-input-group__item:is(.pf-m-search-input, .pf-m-search-expand, .pf-m-search-action) {
8277
+ transition-delay: 0s;
8278
+ }
8199
8279
 
8200
8280
  .pf-v6-c-input-group__item {
8201
8281
  position: relative;
@@ -12211,9 +12291,13 @@ ul.pf-v6-c-list {
12211
12291
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
12212
12292
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12213
12293
  --pf-v6-c-page__sidebar--BoxShadow: none;
12214
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12215
- --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12294
+ --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12295
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12296
+ --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12216
12297
  --pf-v6-c-page__sidebar--TranslateX: -100%;
12298
+ --pf-v6-c-page__sidebar--Opacity: 0;
12299
+ --pf-v6-c-page__sidebar--m-expanded--Opacity: 1;
12300
+ --pf-v6-c-page__sidebar--xl--Opacity: 1;
12217
12301
  --pf-v6-c-page__sidebar--TranslateZ: 0;
12218
12302
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
12219
12303
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
@@ -12291,9 +12375,17 @@ ul.pf-v6-c-list {
12291
12375
  --pf-v6-c-page__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
12292
12376
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12293
12377
  }
12378
+ @media screen and (prefers-reduced-motion: no-preference) {
12379
+ .pf-v6-c-page {
12380
+ --pf-v6-c-page__sidebar--Opacity: 1;
12381
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
12382
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12383
+ }
12384
+ }
12294
12385
  @media screen and (min-width: 75rem) {
12295
12386
  .pf-v6-c-page {
12296
12387
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
12388
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
12297
12389
  }
12298
12390
  }
12299
12391
 
@@ -12387,7 +12479,8 @@ ul.pf-v6-c-list {
12387
12479
  overflow-y: auto;
12388
12480
  -webkit-overflow-scrolling: touch;
12389
12481
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
12390
- transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
12482
+ opacity: var(--pf-v6-c-page__sidebar--Opacity);
12483
+ transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
12391
12484
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
12392
12485
  }
12393
12486
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -12396,6 +12489,7 @@ ul.pf-v6-c-list {
12396
12489
 
12397
12490
  .pf-v6-c-page__sidebar.pf-m-expanded {
12398
12491
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--m-expanded--TranslateX);
12492
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--m-expanded--Opacity);
12399
12493
  box-shadow: var(--pf-v6-c-page__sidebar--BoxShadow);
12400
12494
  }
12401
12495
  @media screen and (min-width: 75rem) {
package/docs/components/Button/examples/Button.md CHANGED
@@ -2116,6 +2116,7 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2116
2116
  <button
2117
2117
  class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2118
2118
  type="button"
2119
+ aria-expanded="false"
2119
2120
  aria-label="Hamburger"
2120
2121
  >
2121
2122
  <span class="pf-v6-c-button__icon">
@@ -2135,6 +2136,7 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2135
2136
  <button
2136
2137
  class="pf-v6-c-button pf-m-expand pf-m-hamburger pf-m-plain"
2137
2138
  type="button"
2139
+ aria-expanded="false"
2138
2140
  aria-label="Hamburger"
2139
2141
  >
2140
2142
  <span class="pf-v6-c-button__icon">
@@ -2152,8 +2154,9 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2152
2154
  </span>
2153
2155
  </button>
2154
2156
  <button
2155
- class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-plain"
2157
+ class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-expanded pf-m-plain"
2156
2158
  type="button"
2159
+ aria-expanded="true"
2157
2160
  aria-label="Hamburger"
2158
2161
  >
2159
2162
  <span class="pf-v6-c-button__icon">
package/docs/components/CodeBlock/examples/CodeBlock.md CHANGED
@@ -169,7 +169,7 @@ name: azure-sample-repo<div
169
169
  <button
170
170
  class="pf-v6-c-button pf-m-link"
171
171
  type="button"
172
- aria-expanded="true"
172
+ aria-expanded
173
173
  aria-controls="code-block-expandable-expanded-content"
174
174
  >
175
175
  <span class="pf-v6-c-button__icon pf-m-start">
package/docs/components/ExpandableSection/examples/ExpandableSection.md CHANGED
@@ -31,7 +31,7 @@ cssPrefix: pf-v6-c-expandable-section
31
31
  ```html
32
32
  <div class="pf-v6-c-expandable-section pf-m-expanded">
33
33
  <div class="pf-v6-c-expandable-section__toggle">
34
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
34
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
35
35
  <span class="pf-v6-c-button__icon pf-m-start">
36
36
  <span class="pf-v6-c-expandable-section__toggle-icon">
37
37
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -52,7 +52,7 @@ cssPrefix: pf-v6-c-expandable-section
52
52
  ```html
53
53
  <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-indented">
54
54
  <div class="pf-v6-c-expandable-section__toggle">
55
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
55
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
56
56
  <span class="pf-v6-c-button__icon pf-m-start">
57
57
  <span class="pf-v6-c-expandable-section__toggle-icon">
58
58
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -97,7 +97,7 @@ cssPrefix: pf-v6-c-expandable-section
97
97
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width"
98
98
  >
99
99
  <div class="pf-v6-c-expandable-section__toggle">
100
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
100
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
101
101
  <span class="pf-v6-c-button__icon pf-m-start">
102
102
  <span class="pf-v6-c-expandable-section__toggle-icon">
103
103
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -120,7 +120,7 @@ cssPrefix: pf-v6-c-expandable-section
120
120
  class="pf-v6-c-expandable-section pf-m-expanded pf-m-display-lg pf-m-limit-width pf-m-indented"
121
121
  >
122
122
  <div class="pf-v6-c-expandable-section__toggle">
123
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded="true">
123
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
124
124
  <span class="pf-v6-c-button__icon pf-m-start">
125
125
  <span class="pf-v6-c-expandable-section__toggle-icon">
126
126
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -155,7 +155,7 @@ cssPrefix: pf-v6-c-expandable-section
155
155
  <button
156
156
  class="pf-v6-c-button pf-m-link"
157
157
  type="button"
158
- aria-expanded="true"
158
+ aria-expanded
159
159
  aria-controls="detached-toggle-content"
160
160
  >
161
161
  <span class="pf-v6-c-button__icon pf-m-start">
@@ -201,7 +201,7 @@ cssPrefix: pf-v6-c-expandable-section
201
201
  <button
202
202
  class="pf-v6-c-button pf-m-inline pf-m-link"
203
203
  type="button"
204
- aria-expanded="true"
204
+ aria-expanded
205
205
  >
206
206
  <span class="pf-v6-c-button__text">Show less</span>
207
207
  </button>
package/docs/components/InputGroup/examples/InputGroup.md CHANGED
@@ -252,7 +252,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
252
252
  />
253
253
  </span>
254
254
  </div>
255
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-plain">
255
+ <div class="pf-v6-c-input-group__item pf-m-plain pf-m-box">
256
256
  <span class="pf-v6-c-input-group__text">%</span>
257
257
  </div>
258
258
  </div>
@@ -280,3 +280,7 @@ When using the `.pf-v6-c-input-group` always ensure labels are used outside the
280
280
  | `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
281
281
  | `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. |
282
282
  | `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |
283
+ | `.pf-m-search-expandable` | `.pf-v6-c-input-group` | Modifies an input group to be an expandable search input. **Note:** The expandable search input can be found in the [search input](/components/search-input/) component docs for react and [text input group](/components/text-input-group/html#search-input-group-expandable) component docs for core. |
284
+ | `.pf-m-search-input` | `.pf-v6-c-input-group__item` | Identifies the text input an expandable search input. |
285
+ | `.pf-m-search-expand` | `.pf-v6-c-input-group__item` | Identifies the expand button in an expandable search input. |
286
+ | `.pf-m-search-action` | `.pf-v6-c-input-group__item` | Identifies actions adjacent to the search input when an expandable search input is expanded. |
package/docs/components/JumpLinks/examples/JumpLinks.md CHANGED
@@ -513,7 +513,7 @@ cssPrefix: pf-v6-c-jump-links
513
513
  <button
514
514
  class="pf-v6-c-button pf-m-plain"
515
515
  type="button"
516
- aria-expanded="true"
516
+ aria-expanded
517
517
  aria-label="Toggle jump links"
518
518
  >
519
519
  <span class="pf-v6-c-button__icon pf-m-start">
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md CHANGED
@@ -346,11 +346,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
346
346
  <div class="pf-v6-c-multiple-file-upload__status">
347
347
  <div class="pf-v6-c-expandable-section pf-m-expanded">
348
348
  <div class="pf-v6-c-expandable-section__toggle">
349
- <button
350
- class="pf-v6-c-button pf-m-link"
351
- type="button"
352
- aria-expanded="true"
353
- >
349
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
354
350
  <span class="pf-v6-c-button__icon pf-m-start">
355
351
  <span class="pf-v6-c-expandable-section__toggle-icon">
356
352
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -557,11 +553,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
557
553
  <div class="pf-v6-c-multiple-file-upload__status">
558
554
  <div class="pf-v6-c-expandable-section pf-m-expanded">
559
555
  <div class="pf-v6-c-expandable-section__toggle">
560
- <button
561
- class="pf-v6-c-button pf-m-link"
562
- type="button"
563
- aria-expanded="true"
564
- >
556
+ <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
565
557
  <span class="pf-v6-c-button__icon pf-m-start">
566
558
  <span class="pf-v6-c-expandable-section__toggle-icon">
567
559
  <i class="fas fa-angle-right" aria-hidden="true"></i>
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -427,7 +427,7 @@ cssPrefix: pf-v6-c-slider
427
427
  />
428
428
  </span>
429
429
  </div>
430
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
430
+ <div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
431
431
  <span class="pf-v6-c-input-group__text">%</span>
432
432
  </div>
433
433
  </div>
@@ -632,7 +632,7 @@ cssPrefix: pf-v6-c-slider
632
632
  />
633
633
  </span>
634
634
  </div>
635
- <div class="pf-v6-c-input-group__item pf-m-box pf-m-disabled">
635
+ <div class="pf-v6-c-input-group__item pf-m-disabled pf-m-box">
636
636
  <span class="pf-v6-c-input-group__text">%</span>
637
637
  </div>
638
638
  </div>