@patternfly/react-styles 6.3.0-prerelease.1 → 6.3.0-prerelease.2

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 (31) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/assets/images/icon-help.hbs +3 -0
  3. package/css/assets/images/icon-outlined-star.hbs +3 -0
  4. package/css/assets/images/icon-star.hbs +3 -0
  5. package/css/components/Accordion/accordion.css +71 -1
  6. package/css/components/Alert/alert-group.css +52 -31
  7. package/css/components/Alert/alert-group.d.ts +4 -1
  8. package/css/components/Alert/alert-group.js +4 -1
  9. package/css/components/Alert/alert-group.mjs +4 -1
  10. package/css/components/Button/button.css +27 -0
  11. package/css/components/Button/button.d.ts +3 -0
  12. package/css/components/Button/button.js +3 -0
  13. package/css/components/Button/button.mjs +3 -0
  14. package/css/components/ExpandableSection/expandable-section.css +46 -0
  15. package/css/components/MenuToggle/menu-toggle.css +8 -4
  16. package/css/components/Skeleton/skeleton.css +22 -2
  17. package/css/components/Table/table.css +33 -0
  18. package/css/components/Timestamp/timestamp.css +4 -0
  19. package/css/components/Timestamp/timestamp.d.ts +2 -1
  20. package/css/components/Timestamp/timestamp.js +2 -1
  21. package/css/components/Timestamp/timestamp.mjs +2 -1
  22. package/css/components/TreeView/tree-view.css +33 -0
  23. package/css/components/TreeView/tree-view.d.ts +1 -0
  24. package/css/components/TreeView/tree-view.js +1 -0
  25. package/css/components/TreeView/tree-view.mjs +1 -0
  26. package/css/components/Truncate/truncate.css +1 -0
  27. package/css/components/_index.css +297 -38
  28. package/css/components/_index.d.ts +7 -0
  29. package/css/components/_index.js +7 -0
  30. package/css/components/_index.mjs +7 -0
  31. package/package.json +3 -3
@@ -205,6 +205,7 @@
205
205
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
206
206
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
207
207
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
208
+ --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
208
209
  --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
209
210
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
210
211
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -222,6 +223,24 @@
222
223
  --pf-v6-c-accordion__expandable-content--Color: var(--pf-t--global--text--color--regular);
223
224
  --pf-v6-c-accordion__expandable-content--FontSize: var(--pf-t--global--font--size--body--default);
224
225
  --pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight: 9.375rem;
226
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
227
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
228
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--collapse--fade);
229
+ --pf-v6-c-accordion__item--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
230
+ --pf-v6-c-accordion__item--before--Opacity: 0;
231
+ --pf-v6-c-accordion__item--m-expanded--before--Opacity: 1;
232
+ --pf-v6-c-accordion__item--m-expanded--before--TranslateY: 0;
233
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: 0s;
234
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
235
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: 0s;
236
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
237
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide);
238
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--fade);
239
+ --pf-v6-c-accordion__expandable-content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
240
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
241
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
242
+ --pf-v6-c-accordion__expandable-content--TranslateY: 0;
243
+ --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
225
244
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
226
245
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
227
246
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -241,6 +260,16 @@
241
260
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
242
261
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
243
262
  }
263
+ @media screen and (prefers-reduced-motion: no-preference) {
264
+ .pf-v6-c-accordion {
265
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
266
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
267
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
268
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
269
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
270
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
271
+ }
272
+ }
244
273
 
245
274
  .pf-v6-c-accordion {
246
275
  display: flex;
@@ -274,18 +303,39 @@
274
303
  }
275
304
 
276
305
  .pf-v6-c-accordion__item {
306
+ position: relative;
307
+ }
308
+ .pf-v6-c-accordion__item::before {
309
+ position: absolute;
310
+ inset: 0;
311
+ pointer-events: none;
312
+ content: "";
313
+ background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
277
314
  border-radius: var(--pf-v6-c-accordion__item--BorderRadius);
315
+ opacity: var(--pf-v6-c-accordion__item--before--Opacity);
316
+ transition-timing-function: var(--pf-v6-c-accordion__item--before--TransitionTimingFunction);
317
+ transition-duration: var(--pf-v6-c-accordion__item--before--TransitionDuration--fade);
318
+ transition-property: opacity;
278
319
  }
279
320
  .pf-v6-c-accordion__item.pf-m-expanded {
280
321
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd);
281
322
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight);
282
- background-color: var(--pf-v6-c-accordion__item--m-expanded--BackgroundColor);
323
+ --pf-v6-c-accordion__item--before--TransitionDuration--slide: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--slide);
324
+ --pf-v6-c-accordion__item--before--TransitionDuration--fade: var(--pf-v6-c-accordion__item--before--TransitionDuration--expand--fade);
325
+ --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
326
+ --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
327
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
328
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
329
+ --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
330
+ --pf-v6-c-accordion__expandable-content--TranslateY: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY);
283
331
  }
284
332
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__toggle-icon {
285
333
  transform: rotate(var(--pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate));
286
334
  }
287
335
 
288
336
  .pf-v6-c-accordion__toggle {
337
+ position: relative;
338
+ z-index: var(--pf-v6-c-accordion__toggle--ZIndex);
289
339
  display: flex;
290
340
  column-gap: var(--pf-v6-c-accordion__toggle--ColumnGap);
291
341
  align-items: center;
@@ -321,7 +371,12 @@
321
371
  scale: -1 1;
322
372
  }
323
373
 
374
+ .pf-v6-c-accordion__expandable-content:where([hidden]) {
375
+ display: revert;
376
+ }
377
+
324
378
  .pf-v6-c-accordion__expandable-content {
379
+ display: none;
325
380
  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
326
381
  margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
327
382
  margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
@@ -329,11 +384,26 @@
329
384
  color: var(--pf-v6-c-accordion__expandable-content--Color);
330
385
  background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
331
386
  border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
387
+ opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
388
+ transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
389
+ transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
390
+ transition-property: opacity, translate, display;
391
+ transition-behavior: allow-discrete;
392
+ translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
332
393
  }
333
394
  .pf-v6-c-accordion__expandable-content.pf-m-fixed {
334
395
  max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
335
396
  overflow-y: auto;
336
397
  }
398
+ .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
399
+ display: revert;
400
+ }
401
+ @starting-style {
402
+ .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
403
+ --pf-v6-c-accordion__expandable-content--Opacity: 0;
404
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
405
+ }
406
+ }
337
407
 
338
408
  .pf-v6-c-accordion__expandable-content-body {
339
409
  padding-block-start: var(--pf-v6-c-accordion__expandable-content-body--PaddingBlockStart);
@@ -597,27 +667,45 @@
597
667
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
598
668
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
599
669
  0s;
600
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
601
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
602
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
603
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
604
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
605
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
606
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
607
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
608
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
609
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
610
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
611
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
612
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
613
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
614
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
615
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
616
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
617
- --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
618
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
619
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
620
- var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
670
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
671
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
672
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
673
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
674
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
675
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial;
676
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
677
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
678
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
679
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
680
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
681
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
682
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
683
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
684
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
685
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
686
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
687
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
688
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
689
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
690
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
691
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
692
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
693
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
694
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
695
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
696
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
697
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
698
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
699
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
700
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
701
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
702
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all
703
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration)
704
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
705
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration);
706
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
707
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
708
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
621
709
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
622
710
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
623
711
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -677,40 +765,43 @@
677
765
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
678
766
  }
679
767
  }
680
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
768
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child, .pf-v6-c-alert-group__item.pf-m-incoming:first-child {
681
769
  grid-template-rows: 0fr;
682
770
  margin-block: 0;
683
771
  overflow: hidden;
684
772
  opacity: 0;
685
773
  transform: translateY(-100%);
686
774
  }
687
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
775
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-incoming:first-child .pf-v6-c-alert {
688
776
  min-height: 0;
689
777
  padding-block-start: 0;
690
778
  padding-block-end: 0;
691
779
  border-width: 0;
692
780
  }
693
- .pf-v6-c-alert-group__item.pf-m-offstage-right {
781
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
694
782
  grid-template-rows: 0fr;
695
783
  margin-block: 0;
696
784
  overflow: hidden;
697
785
  opacity: 0;
698
- transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
786
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default)), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default));
699
787
  }
700
- .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
788
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
701
789
  min-height: 0;
702
790
  padding-block-start: 0;
703
791
  padding-block-end: 0;
704
792
  border-width: 0;
705
- transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
793
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDelay--default));
706
794
  }
707
795
  @media screen and (prefers-reduced-motion: no-preference) {
708
- .pf-v6-c-alert-group__item.pf-m-offstage-right {
709
- transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
796
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
797
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform)), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity)), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block)), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows)) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows));
710
798
  transform: translateX(100%);
711
799
  }
712
- .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
713
- transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
800
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
801
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
802
+ }
803
+ .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert, .pf-v6-c-alert-group__item.pf-m-outgoing .pf-v6-c-alert {
804
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition, var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition));
714
805
  }
715
806
  }
716
807
  .pf-v6-c-alert-group__item:hover {
@@ -1681,6 +1772,11 @@ button.pf-v6-c-breadcrumb__link {
1681
1772
  --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
1682
1773
  --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
1683
1774
  --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
1775
+ --pf-v6-c-button__icon--favorite--Opacity: 1;
1776
+ --pf-v6-c-button__icon--favorited--Opacity: 0;
1777
+ --pf-v6-c-button--m-favorited__icon--favorite--Opacity: 0;
1778
+ --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
1779
+ --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1684
1780
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1685
1781
  --pf-v6-c-button__progress--Opacity: 0;
1686
1782
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1991,6 +2087,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1991
2087
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1992
2088
  }
1993
2089
  .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
2090
+ display: grid;
1994
2091
  transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1995
2092
  transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1996
2093
  transition-property: color;
@@ -1998,6 +2095,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1998
2095
  .pf-v6-c-button.pf-m-favorited {
1999
2096
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2000
2097
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2098
+ --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
2099
+ --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
2001
2100
  }
2002
2101
  .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
2003
2102
  animation-name: pf-v6-c-button-icon-favorited;
@@ -2077,6 +2176,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2077
2176
  --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
2078
2177
  }
2079
2178
 
2179
+ .pf-v6-c-button__icon-favorite,
2180
+ .pf-v6-c-button__icon-favorited {
2181
+ grid-area: 1/1/1/1;
2182
+ transition-duration: var(--pf-v6-c-button__icon--favorite--TransitionDuration);
2183
+ transition-property: opacity;
2184
+ }
2185
+
2186
+ .pf-v6-c-button__icon-favorite {
2187
+ opacity: var(--pf-v6-c-button__icon--favorite--Opacity);
2188
+ }
2189
+
2190
+ .pf-v6-c-button__icon-favorited {
2191
+ opacity: var(--pf-v6-c-button__icon--favorited--Opacity);
2192
+ }
2193
+
2080
2194
  .pf-v6-c-button__progress {
2081
2195
  position: absolute;
2082
2196
  inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
@@ -2089,6 +2203,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2089
2203
  --pf-v6-c-spinner--Color: currentcolor;
2090
2204
  }
2091
2205
 
2206
+ .pf-v6-c-button__text {
2207
+ text-decoration: inherit;
2208
+ }
2209
+
2092
2210
  .pf-v6-c-button__count {
2093
2211
  display: inline-flex;
2094
2212
  align-items: center;
@@ -6297,6 +6415,17 @@ ul) {
6297
6415
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6298
6416
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
6299
6417
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
6418
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
6419
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
6420
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
6421
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
6422
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
6423
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6424
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6425
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6426
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
6427
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6428
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
6300
6429
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6301
6430
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6302
6431
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6308,10 +6437,18 @@ ul) {
6308
6437
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6309
6438
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6310
6439
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
6440
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6311
6441
  --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
6312
6442
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6313
6443
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
6314
6444
  }
6445
+ @media screen and (prefers-reduced-motion: no-preference) {
6446
+ .pf-v6-c-expandable-section {
6447
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6448
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6449
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6450
+ }
6451
+ }
6315
6452
 
6316
6453
  .pf-v6-c-expandable-section {
6317
6454
  display: flex;
@@ -6322,6 +6459,11 @@ ul) {
6322
6459
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
6323
6460
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
6324
6461
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
6462
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
6463
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
6464
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6465
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6466
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
6325
6467
  }
6326
6468
  .pf-v6-c-expandable-section.pf-m-limit-width {
6327
6469
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -6334,6 +6476,7 @@ ul) {
6334
6476
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
6335
6477
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6336
6478
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
6479
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
6337
6480
  }
6338
6481
  .pf-v6-c-expandable-section.pf-m-indented {
6339
6482
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -6368,6 +6511,27 @@ ul) {
6368
6511
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
6369
6512
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6370
6513
  }
6514
+ .pf-v6-c-expandable-section__content:where([hidden]) {
6515
+ display: revert;
6516
+ }
6517
+ .pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
6518
+ display: none;
6519
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
6520
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
6521
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6522
+ transition-property: opacity, translate, display;
6523
+ transition-behavior: allow-discrete;
6524
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
6525
+ }
6526
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
6527
+ display: revert;
6528
+ }
6529
+ @starting-style {
6530
+ .pf-v6-c-expandable-section.pf-m-expanded .pf-v6-c-expandable-section__content {
6531
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6532
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6533
+ }
6534
+ }
6371
6535
 
6372
6536
  .pf-v6-c-file-upload {
6373
6537
  --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -10666,16 +10830,20 @@ ul.pf-v6-c-list {
10666
10830
  flex-wrap: nowrap;
10667
10831
  }
10668
10832
 
10669
- .pf-v6-c-menu-toggle__icon {
10670
- flex-shrink: 0;
10671
- }
10672
10833
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
10673
10834
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
10674
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
10835
+ .pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
10675
10836
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
10676
10837
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
10677
10838
  }
10678
10839
 
10840
+ .pf-v6-c-menu-toggle__icon {
10841
+ flex-shrink: 0;
10842
+ }
10843
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
10844
+ vertical-align: middle;
10845
+ }
10846
+
10679
10847
  .pf-v6-c-menu-toggle__controls {
10680
10848
  display: flex;
10681
10849
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
@@ -14347,8 +14515,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14347
14515
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
14348
14516
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
14349
14517
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14350
- --pf-v6-c-skeleton--after--TranslateX: -100%;
14351
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
14518
+ --pf-v6-c-skeleton--after--TranslateX: 0;
14519
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
14352
14520
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
14353
14521
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
14354
14522
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -14380,6 +14548,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14380
14548
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
14381
14549
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
14382
14550
  }
14551
+ @media screen and (prefers-reduced-motion: no-preference) {
14552
+ .pf-v6-c-skeleton {
14553
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
14554
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
14555
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14556
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
14557
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
14558
+ }
14559
+ }
14383
14560
 
14384
14561
  .pf-v6-c-skeleton {
14385
14562
  position: relative;
@@ -14500,6 +14677,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14500
14677
  transform: translateX(100%);
14501
14678
  }
14502
14679
  }
14680
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
14681
+ 0% {
14682
+ opacity: 0.25;
14683
+ }
14684
+ 60% {
14685
+ opacity: 1;
14686
+ }
14687
+ 100% {
14688
+ opacity: 0.25;
14689
+ }
14690
+ }
14503
14691
  .pf-v6-c-skip-to-content {
14504
14692
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
14505
14693
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
@@ -16655,6 +16843,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16655
16843
  --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16656
16844
  --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16657
16845
  --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16846
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
16847
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
16848
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
16849
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
16850
+ --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
16851
+ --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
16852
+ --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
16853
+ --pf-v6-c-table__expandable-row--Opacity: 0;
16854
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
16855
+ --pf-v6-c-table__expandable-row--TranslateY: 0;
16856
+ --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
16658
16857
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
16659
16858
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
16660
16859
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -16715,6 +16914,13 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16715
16914
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
16716
16915
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
16717
16916
  }
16917
+ @media screen and (prefers-reduced-motion: no-preference) {
16918
+ .pf-v6-c-table {
16919
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
16920
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
16921
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
16922
+ }
16923
+ }
16718
16924
 
16719
16925
  .pf-v6-c-table {
16720
16926
  width: 100%;
@@ -17283,6 +17489,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17283
17489
  .pf-v6-c-table__expandable-row {
17284
17490
  position: relative;
17285
17491
  border-block-end: 0 solid transparent;
17492
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17493
+ transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
17494
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
17495
+ transition-property: opacity, translate, display;
17496
+ transition-behavior: allow-discrete;
17497
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17286
17498
  }
17287
17499
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
17288
17500
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
@@ -17311,6 +17523,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17311
17523
  .pf-v6-c-table__expandable-row.pf-m-expanded {
17312
17524
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
17313
17525
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
17526
+ opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
17527
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
17528
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
17529
+ }
17530
+ @starting-style {
17531
+ .pf-v6-c-table__expandable-row.pf-m-expanded {
17532
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17533
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17534
+ }
17314
17535
  }
17315
17536
  .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
17316
17537
  display: none;
@@ -19551,6 +19772,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19551
19772
  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
19552
19773
  }
19553
19774
 
19775
+ .pf-v6-c-timestamp__text {
19776
+ text-decoration: inherit;
19777
+ }
19778
+
19554
19779
  .pf-v6-c-title {
19555
19780
  --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
19556
19781
  --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -21825,6 +22050,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21825
22050
  grid-auto-flow: column;
21826
22051
  align-items: baseline;
21827
22052
  min-width: var(--pf-v6-c-truncate--MinWidth);
22053
+ text-decoration: inherit;
21828
22054
  }
21829
22055
  .pf-v6-c-truncate.pf-m-fixed {
21830
22056
  display: inline;
@@ -21921,6 +22147,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21921
22147
  --pf-v6-c-tree-view__node-container--Display: contents;
21922
22148
  --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
21923
22149
  --pf-v6-c-tree-view__node-content--Overflow: visible;
22150
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
22151
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
22152
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
22153
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
22154
+ --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
22155
+ --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
22156
+ --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22157
+ --pf-v6-c-tree-view__list--Opacity: 0;
22158
+ --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
22159
+ --pf-v6-c-tree-view__list--TranslateY: 0;
22160
+ --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
21924
22161
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
21925
22162
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
21926
22163
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -21936,6 +22173,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21936
22173
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
21937
22174
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
21938
22175
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
22176
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
22177
+ --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
21939
22178
  --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
21940
22179
  --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
21941
22180
  --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -22011,6 +22250,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22011
22250
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
22012
22251
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
22013
22252
  }
22253
+ @media screen and (prefers-reduced-motion: no-preference) {
22254
+ .pf-v6-c-tree-view {
22255
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
22256
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
22257
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
22258
+ }
22259
+ }
22014
22260
 
22015
22261
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
22016
22262
  position: relative;
@@ -22126,12 +22372,20 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22126
22372
  display: inline-block;
22127
22373
  min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
22128
22374
  text-align: center;
22375
+ transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
22129
22376
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
22130
22377
  }
22131
22378
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
22132
22379
  scale: -1 1;
22133
22380
  }
22134
22381
 
22382
+ .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
22383
+ opacity: var(--pf-v6-c-tree-view__list--Opacity);
22384
+ transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
22385
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
22386
+ transition-property: opacity, translate;
22387
+ translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
22388
+ }
22135
22389
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
22136
22390
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
22137
22391
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -22140,6 +22394,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22140
22394
  --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
22141
22395
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
22142
22396
  }
22397
+ .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
22398
+ opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
22399
+ transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide);
22400
+ translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
22401
+ }
22143
22402
 
22144
22403
  .pf-v6-c-tree-view__node,
22145
22404
  .pf-v6-c-tree-view__node-container {