@patternfly/patternfly 6.3.0-prerelease.50 → 6.3.0-prerelease.52

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 (11) hide show
  1. package/README.md +3 -1
  2. package/components/Accordion/accordion.css +19 -15
  3. package/components/Accordion/accordion.scss +19 -18
  4. package/components/_index.css +19 -15
  5. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -29
  6. package/docs/components/TextInputGroup/examples/TextInputGroup.md +100 -49
  7. package/package.json +8 -4
  8. package/patternfly-no-globals.css +19 -15
  9. package/patternfly.css +19 -15
  10. package/patternfly.min.css +1 -1
  11. package/patternfly.min.css.map +1 -1
package/README.md CHANGED
@@ -16,11 +16,13 @@ Any of the files above are meant for use in consuming the library. The recommend
16
16
 
17
17
  ## Development
18
18
 
19
- **PatternFly Development requires Node v18.0.0 or greater**
19
+ **PatternFly Development requires Node v20.18.3 or greater**
20
20
 
21
21
  To setup the PatternFly development environment:
22
22
 
23
23
  - clone the project
24
+ - ensure you have Node.js v20.18.3 or greater installed
25
+ - enable corepack: `corepack enable`
24
26
  - run `yarn install` from the project root
25
27
  - run `yarn start`
26
28
  - open your browser to `http://localhost:8001`
package/components/Accordion/accordion.css CHANGED
@@ -21,15 +21,22 @@
21
21
  --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22
22
  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
23
23
  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
24
+ --pf-v6-c-accordion__toggle-icon--Rotate: 0;
24
25
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
25
26
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
26
- --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
27
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
27
28
  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
28
29
  --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29
30
  --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
30
31
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
31
32
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
33
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0;
32
34
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
35
+ --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
36
+ --pf-v6-c-accordion__expandable-content--Visibility: hidden;
37
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
38
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
39
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
33
40
  --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
34
41
  --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
35
42
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
@@ -127,6 +134,7 @@
127
134
  .pf-v6-c-accordion__item.pf-m-expanded {
128
135
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
129
136
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
137
+ --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate);
130
138
  --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
131
139
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
132
140
  --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
@@ -135,9 +143,11 @@
135
143
  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
136
144
  --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
137
145
  --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
138
- }
139
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
140
- transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
146
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd);
147
+ --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight);
148
+ --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
149
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
150
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
141
151
  }
142
152
 
143
153
  .pf-v6-c-accordion__toggle {
@@ -173,6 +183,7 @@
173
183
 
174
184
  .pf-v6-c-accordion__toggle-icon {
175
185
  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
186
+ transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
176
187
  }
177
188
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
178
189
  scale: -1 1;
@@ -183,12 +194,13 @@
183
194
  }
184
195
 
185
196
  .pf-v6-c-accordion__expandable-content {
186
- max-height: 0;
197
+ max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
198
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
187
199
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
188
200
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
189
201
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
190
202
  color: var(--pf-v6-c-accordion__expandable-content--Color);
191
- visibility: hidden;
203
+ visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
192
204
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
193
205
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
194
206
  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
@@ -199,17 +211,9 @@
199
211
  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
200
212
  }
201
213
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
214
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
202
215
  overflow-y: auto;
203
216
  }
204
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
205
- max-height: 99999px;
206
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
207
- visibility: revert;
208
- transition-delay: 0s;
209
- }
210
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
211
- max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
212
- }
213
217
 
214
218
  .pf-v6-c-accordion__expandable-content-body {
215
219
  padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);
package/components/Accordion/accordion.scss CHANGED
@@ -35,17 +35,24 @@
35
35
  --#{$accordion}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
36
36
  --#{$accordion}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
37
37
  --#{$accordion}__toggle-icon--Transition: transform var(--#{$accordion}__toggle-icon--TransitionDuration) var(--#{$accordion}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
38
+ --#{$accordion}__toggle-icon--Rotate: 0;
38
39
  --#{$accordion}__toggle--m-expanded__toggle-icon--Rotate: 90deg;
39
40
 
40
41
  // accordion expandable content
41
42
  --#{$accordion}__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
42
- --#{$accordion}__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
43
+ --#{$accordion}__expandable-content--MarginBlockEnd: 0;
43
44
  --#{$accordion}__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
44
45
  --#{$accordion}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
45
46
  --#{$accordion}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
46
47
  --#{$accordion}__expandable-content--Color: var(--pf-t--global--text--color--regular);
47
48
  --#{$accordion}__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
49
+ --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: 0;
48
50
  --#{$accordion}__expandable-content--m-fixed--MaxHeight: #{pf-size-prem(150px)};
51
+ --#{$accordion}__expandable-content--MaxHeight: 0;
52
+ --#{$accordion}__expandable-content--Visibility: hidden;
53
+ --#{$accordion}__item--m-expanded__expandable-content--Visibility: visible;
54
+ --#{$accordion}__item--m-expanded__expandable-content--MaxHeight: 99999px;
55
+ --#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
49
56
 
50
57
  // expand animation
51
58
  --#{$accordion}__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
@@ -155,6 +162,7 @@
155
162
  &.pf-m-expanded {
156
163
  --#{$accordion}__toggle--PaddingBlockEnd: var(--#{$accordion}__toggle--m-expanded--PaddingBlockEnd);
157
164
  --#{$accordion}__toggle-text--FontWeight: var(--#{$accordion}__toggle--m-expanded__toggle-text--FontWeight);
165
+ --#{$accordion}__toggle-icon--Rotate: var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate);
158
166
  --#{$accordion}__item--before--TransitionDuration--slide: var(--#{$accordion}__item--before--TransitionDuration--expand--slide);
159
167
  --#{$accordion}__item--before--TransitionDuration--fade: var(--#{$accordion}__item--before--TransitionDuration--expand--fade);
160
168
  --#{$accordion}__item--before--Opacity: var(--#{$accordion}__item--m-expanded--before--Opacity);
@@ -163,10 +171,11 @@
163
171
  --#{$accordion}__expandable-content--TransitionDuration--fade: var(--#{$accordion}__expandable-content--TransitionDuration--expand--fade);
164
172
  --#{$accordion}__expandable-content--Opacity: var(--#{$accordion}__item--m-expanded__expandable-content--Opacity);
165
173
  --#{$accordion}__expandable-content--TranslateY: var(--#{$accordion}__item--m-expanded__expandable-content--TranslateY);
166
-
167
- .#{$accordion}__toggle-icon {
168
- transform: rotate(var(--#{$accordion}__toggle--m-expanded__toggle-icon--Rotate));
169
- }
174
+ --#{$accordion}__expandable-content--MarginBlockEnd: var(--#{$accordion}__item--m-expanded__expandable-content--MarginBlockEnd);
175
+ --#{$accordion}__expandable-content--MaxHeight: var(--#{$accordion}__item--m-expanded__expandable-content--MaxHeight);
176
+ --#{$accordion}__expandable-content--Visibility: var(--#{$accordion}__item--m-expanded__expandable-content--Visibility);
177
+ --#{$accordion}__expandable-content--TransitionDuration--fade: 0s;
178
+ --#{$accordion}__expandable-content--m-fixed--MaxHeight--base: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
170
179
  }
171
180
  }
172
181
 
@@ -205,6 +214,7 @@
205
214
  @include pf-v6-mirror-inline-on-rtl;
206
215
 
207
216
  transition: var(--#{$accordion}__toggle-icon--Transition); // TODO remove shorthand property in breaking change
217
+ transform: rotate(var(--#{$accordion}__toggle-icon--Rotate));
208
218
  }
209
219
 
210
220
  .#{$accordion}__expandable-content:where([hidden]) {
@@ -212,12 +222,13 @@
212
222
  }
213
223
 
214
224
  .#{$accordion}__expandable-content {
215
- max-height: 0;
225
+ max-height: var(--#{$accordion}__expandable-content--MaxHeight);
226
+ margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
216
227
  margin-inline-start: var(--#{$accordion}__expandable-content--MarginInlineStart);
217
228
  margin-inline-end: var(--#{$accordion}__expandable-content--MarginInlineEnd);
218
229
  font-size: var(--#{$accordion}__expandable-content--FontSize);
219
230
  color: var(--#{$accordion}__expandable-content--Color);
220
- visibility: hidden;
231
+ visibility: var(--#{$accordion}__expandable-content--Visibility);
221
232
  background-color: var(--#{$accordion}__expandable-content--BackgroundColor);
222
233
  border-radius: var(--#{$accordion}__expandable-content--BorderRadius);
223
234
  opacity: var(--#{$accordion}__expandable-content--Opacity);
@@ -228,19 +239,9 @@
228
239
  translate: 0 var(--#{$accordion}__expandable-content--TranslateY);
229
240
 
230
241
  &.pf-m-fixed {
242
+ max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight--base);
231
243
  overflow-y: auto;
232
244
  }
233
-
234
- .#{$accordion}__item.pf-m-expanded & {
235
- max-height: 99999px;
236
- margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
237
- visibility: revert;
238
- transition-delay: 0s;
239
-
240
- &.pf-m-fixed {
241
- max-height: var(--#{$accordion}__expandable-content--m-fixed--MaxHeight);
242
- }
243
- }
244
245
  }
245
246
 
246
247
  .#{$accordion}__expandable-content-body {
package/components/_index.css CHANGED
@@ -214,15 +214,22 @@
214
214
  --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
215
215
  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
216
216
  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
217
+ --pf-v6-c-accordion__toggle-icon--Rotate: 0;
217
218
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
218
219
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
219
- --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
220
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: 0;
220
221
  --pf-v6-c-accordion__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
221
222
  --pf-v6-c-accordion__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
222
223
  --pf-v6-c-accordion__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
223
224
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
224
225
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
226
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: 0;
225
227
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
228
+ --pf-v6-c-accordion__expandable-content--MaxHeight: 0;
229
+ --pf-v6-c-accordion__expandable-content--Visibility: hidden;
230
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility: visible;
231
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight: 99999px;
232
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
226
233
  --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
227
234
  --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
228
235
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
@@ -320,6 +327,7 @@
320
327
  .pf-v6-c-accordion__item.pf-m-expanded {
321
328
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
322
329
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
330
+ --pf-v6-c-accordion__toggle-icon--Rotate: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate);
323
331
  --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
324
332
  --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
325
333
  --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
@@ -328,9 +336,11 @@
328
336
  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
329
337
  --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
330
338
  --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
331
- }
332
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
333
- transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
339
+ --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MarginBlockEnd);
340
+ --pf-v6-c-accordion__expandable-content--MaxHeight: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--MaxHeight);
341
+ --pf-v6-c-accordion__expandable-content--Visibility: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Visibility);
342
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: 0s;
343
+ --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
334
344
  }
335
345
 
336
346
  .pf-v6-c-accordion__toggle {
@@ -366,6 +376,7 @@
366
376
 
367
377
  .pf-v6-c-accordion__toggle-icon {
368
378
  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
379
+ transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
369
380
  }
370
381
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
371
382
  scale: -1 1;
@@ -376,12 +387,13 @@
376
387
  }
377
388
 
378
389
  .pf-v6-c-accordion__expandable-content {
379
- max-height: 0;
390
+ max-height: var(--pf-v6-c-accordion__expandable-content--MaxHeight);
391
+ margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
380
392
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
381
393
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
382
394
  font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
383
395
  color: var(--pf-v6-c-accordion__expandable-content--Color);
384
- visibility: hidden;
396
+ visibility: var(--pf-v6-c-accordion__expandable-content--Visibility);
385
397
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
386
398
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
387
399
  opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
@@ -392,17 +404,9 @@
392
404
  translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
393
405
  }
394
406
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
407
+ max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight--base);
395
408
  overflow-y: auto;
396
409
  }
397
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
398
- max-height: 99999px;
399
- margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
400
- visibility: revert;
401
- transition-delay: 0s;
402
- }
403
- .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
404
- max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
405
- }
406
410
 
407
411
  .pf-v6-c-accordion__expandable-content-body {
408
412
  padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -21,8 +21,7 @@ cssPrefix: pf-v6-c-clipboard-copy
21
21
  class="pf-v6-c-button pf-m-control"
22
22
  id="basic-editable-copy-button"
23
23
  type="button"
24
- aria-labelledby="basic-editable-copy-button basic-editable-text-input"
25
- aria-label="Copy to clipboard"
24
+ aria-label="Copy to clipboard basic editable example"
26
25
  >
27
26
  <span class="pf-v6-c-button__icon">
28
27
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -46,8 +45,7 @@ cssPrefix: pf-v6-c-clipboard-copy
46
45
  class="pf-v6-c-button pf-m-control"
47
46
  id="basic-readonly-copy-button"
48
47
  type="button"
49
- aria-labelledby="basic-readonly-copy-button basic-readonly-text-input"
50
- aria-label="Copy to clipboard"
48
+ aria-label="Copy to clipboard basic read-only example"
51
49
  >
52
50
  <span class="pf-v6-c-button__icon">
53
51
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -67,8 +65,9 @@ cssPrefix: pf-v6-c-clipboard-copy
67
65
  <button
68
66
  class="pf-v6-c-button pf-m-control"
69
67
  type="button"
68
+ aria-expanded="false"
70
69
  id="expandable-not-expanded-editable-toggle"
71
- aria-labelledby="expandable-not-expanded-editable-toggle expandable-not-expanded-editable-text-input"
70
+ aria-label="Toggle unexpanded editable example"
72
71
  aria-controls="expandable-not-expanded-editable-content"
73
72
  >
74
73
  <span class="pf-v6-c-button__icon">
@@ -88,9 +87,8 @@ cssPrefix: pf-v6-c-clipboard-copy
88
87
  <button
89
88
  class="pf-v6-c-button pf-m-control"
90
89
  type="button"
91
- aria-label="Copy to clipboard"
90
+ aria-label="Copy to clipboard unexpanded editable example"
92
91
  id="expandable-not-expanded-editable-copy-button"
93
- aria-labelledby="expandable-not-expanded-editable-copy-button expandable-not-expanded-editable-text-input"
94
92
  >
95
93
  <span class="pf-v6-c-button__icon">
96
94
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -111,7 +109,7 @@ cssPrefix: pf-v6-c-clipboard-copy
111
109
  type="button"
112
110
  aria-expanded="true"
113
111
  id="expandable-expanded-editable-toggle"
114
- aria-labelledby="expandable-expanded-editable-toggle expandable-expanded-editable-text-input"
112
+ aria-label="Toggle expanded editable example"
115
113
  aria-controls="expandable-expanded-editable-content"
116
114
  >
117
115
  <span class="pf-v6-c-button__icon">
@@ -132,9 +130,8 @@ cssPrefix: pf-v6-c-clipboard-copy
132
130
  <button
133
131
  class="pf-v6-c-button pf-m-control"
134
132
  type="button"
135
- aria-label="Copy to clipboard"
133
+ aria-label="Copy to clipboard expanded editable example"
136
134
  id="expandable-expanded-editable-copy-button"
137
- aria-labelledby="expandable-expanded-editable-copy-button expandable-expanded-editable-text-input"
138
135
  >
139
136
  <span class="pf-v6-c-button__icon">
140
137
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -154,8 +151,9 @@ cssPrefix: pf-v6-c-clipboard-copy
154
151
  <button
155
152
  class="pf-v6-c-button pf-m-control"
156
153
  type="button"
154
+ aria-expanded="false"
157
155
  id="expandable-not-expanded-readonly-toggle"
158
- aria-labelledby="expandable-not-expanded-readonly-toggle expandable-not-expanded-readonly-text-input"
156
+ aria-label="Toggle read-only unexpanded example"
159
157
  aria-controls="expandable-not-expanded-readonly-content"
160
158
  >
161
159
  <span class="pf-v6-c-button__icon">
@@ -176,9 +174,8 @@ cssPrefix: pf-v6-c-clipboard-copy
176
174
  <button
177
175
  class="pf-v6-c-button pf-m-control"
178
176
  type="button"
179
- aria-label="Copy to clipboard"
177
+ aria-label="Copy to clipboard read-only collapsed example"
180
178
  id="expandable-not-expanded-readonly-copy-button"
181
- aria-labelledby="expandable-not-expanded-readonly-copy-button expandable-not-expanded-readonly-text-input"
182
179
  >
183
180
  <span class="pf-v6-c-button__icon">
184
181
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -199,7 +196,7 @@ cssPrefix: pf-v6-c-clipboard-copy
199
196
  type="button"
200
197
  aria-expanded="true"
201
198
  id="expandable-expanded-readonly-toggle"
202
- aria-labelledby="expandable-expanded-readonly-toggle expandable-expanded-readonly-text-input"
199
+ aria-label="Toggle read-only expanded example"
203
200
  aria-controls="expandable-expanded-readonly-content"
204
201
  >
205
202
  <span class="pf-v6-c-button__icon">
@@ -220,9 +217,8 @@ cssPrefix: pf-v6-c-clipboard-copy
220
217
  <button
221
218
  class="pf-v6-c-button pf-m-control"
222
219
  type="button"
223
- aria-label="Copy to clipboard"
220
+ aria-label="Copy to clipboard read-only expanded example"
224
221
  id="expandable-expanded-readonly-copy-button"
225
- aria-labelledby="expandable-expanded-readonly-copy-button expandable-expanded-readonly-text-input"
226
222
  >
227
223
  <span class="pf-v6-c-button__icon">
228
224
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -241,8 +237,9 @@ cssPrefix: pf-v6-c-clipboard-copy
241
237
  <button
242
238
  class="pf-v6-c-button pf-m-control"
243
239
  type="button"
240
+ aria-expanded="false"
244
241
  id="expandable-not-expanded-code-toggle"
245
- aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input"
242
+ aria-label="Toggle code unexpanded example"
246
243
  aria-controls="expandable-not-expanded-code-content"
247
244
  >
248
245
  <span class="pf-v6-c-button__icon">
@@ -263,9 +260,8 @@ cssPrefix: pf-v6-c-clipboard-copy
263
260
  <button
264
261
  class="pf-v6-c-button pf-m-control"
265
262
  type="button"
266
- aria-label="Copy to clipboard"
263
+ aria-label="Copy to clipboard code unexpanded example"
267
264
  id="expandable-not-expanded-code-copy-button"
268
- aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
269
265
  >
270
266
  <span class="pf-v6-c-button__icon">
271
267
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -299,7 +295,7 @@ cssPrefix: pf-v6-c-clipboard-copy
299
295
  type="button"
300
296
  aria-expanded="true"
301
297
  id="expandable-expanded-code-toggle"
302
- aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input"
298
+ aria-label="Toggle code expanded example"
303
299
  aria-controls="expandable-expanded-code-content"
304
300
  >
305
301
  <span class="pf-v6-c-button__icon">
@@ -321,9 +317,8 @@ cssPrefix: pf-v6-c-clipboard-copy
321
317
  <button
322
318
  class="pf-v6-c-button pf-m-control"
323
319
  type="button"
324
- aria-label="Copy to clipboard"
320
+ aria-label="Copy to clipboard code expanded example"
325
321
  id="expandable-expanded-code-copy-button"
326
- aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
327
322
  >
328
323
  <span class="pf-v6-c-button__icon">
329
324
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -362,7 +357,7 @@ cssPrefix: pf-v6-c-clipboard-copy
362
357
  <button
363
358
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
364
359
  type="button"
365
- aria-label="Copy to clipboard"
360
+ aria-label="Copy to clipboard inline compact example"
366
361
  >
367
362
  <span class="pf-v6-c-button__icon">
368
363
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -384,7 +379,7 @@ cssPrefix: pf-v6-c-clipboard-copy
384
379
  <button
385
380
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
386
381
  type="button"
387
- aria-label="Copy to clipboard"
382
+ aria-label="Copy to clipboard inline compact code example"
388
383
  >
389
384
  <span class="pf-v6-c-button__icon">
390
385
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -406,7 +401,7 @@ cssPrefix: pf-v6-c-clipboard-copy
406
401
  <button
407
402
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
408
403
  type="button"
409
- aria-label="Copy to clipboard"
404
+ aria-label="Copy to clipboard inline compact with additional action example"
410
405
  >
411
406
  <span class="pf-v6-c-button__icon">
412
407
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -442,7 +437,7 @@ cssPrefix: pf-v6-c-clipboard-copy
442
437
  <button
443
438
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
444
439
  type="button"
445
- aria-label="Copy to clipboard"
440
+ aria-label="Copy to clipboard basic inline compact example"
446
441
  >
447
442
  <span class="pf-v6-c-button__icon">
448
443
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -467,7 +462,7 @@ cssPrefix: pf-v6-c-clipboard-copy
467
462
  <button
468
463
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
469
464
  type="button"
470
- aria-label="Copy to clipboard"
465
+ aria-label="Copy to clipboard long inline compact example"
471
466
  >
472
467
  <span class="pf-v6-c-button__icon">
473
468
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -491,7 +486,7 @@ cssPrefix: pf-v6-c-clipboard-copy
491
486
  <button
492
487
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
493
488
  type="button"
494
- aria-label="Copy to clipboard"
489
+ aria-label="Copy to clipboard long block compact example"
495
490
  >
496
491
  <span class="pf-v6-c-button__icon">
497
492
  <i class="fas fa-copy" aria-hidden="true"></i>
@@ -519,7 +514,7 @@ cssPrefix: pf-v6-c-clipboard-copy
519
514
  <button
520
515
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
521
516
  type="button"
522
- aria-label="Copy to clipboard"
517
+ aria-label="Copy to clipboard inline compact with truncation example"
523
518
  >
524
519
  <span class="pf-v6-c-button__icon">
525
520
  <i class="fas fa-copy" aria-hidden="true"></i>