@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.11

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 (49) hide show
  1. package/README.md +1 -1
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/components/Alert/alert-group.css +52 -31
  4. package/components/Alert/alert-group.scss +77 -46
  5. package/components/CodeEditor/code-editor.css +3 -0
  6. package/components/CodeEditor/code-editor.scss +3 -1
  7. package/components/Drawer/drawer.css +28 -14
  8. package/components/Drawer/drawer.scss +28 -9
  9. package/components/ExpandableSection/expandable-section.css +30 -0
  10. package/components/ExpandableSection/expandable-section.scss +30 -0
  11. package/components/MenuToggle/menu-toggle.css +8 -4
  12. package/components/MenuToggle/menu-toggle.scss +15 -3
  13. package/components/Page/page.css +4 -3
  14. package/components/Page/page.scss +4 -2
  15. package/components/Skeleton/skeleton.css +22 -2
  16. package/components/Skeleton/skeleton.scss +25 -3
  17. package/components/Tabs/tabs.css +65 -0
  18. package/components/Tabs/tabs.scss +77 -0
  19. package/components/Truncate/truncate.css +5 -0
  20. package/components/Truncate/truncate.scss +6 -0
  21. package/components/_index.css +216 -54
  22. package/docs/components/Button/examples/Button.md +13 -1
  23. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  24. package/docs/components/Divider/examples/Divider.md +1 -1
  25. package/docs/components/Drawer/examples/Drawer.md +4 -0
  26. package/docs/components/Form/examples/Form.md +156 -12
  27. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
  28. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  29. package/docs/components/Page/examples/Page.md +1 -0
  30. package/docs/components/Table/examples/Table.md +30 -6
  31. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  32. package/docs/components/Truncate/examples/Truncate.md +53 -10
  33. package/docs/demos/Card/examples/Card.md +57 -0
  34. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  35. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  36. package/docs/demos/Form/examples/BasicForms.md +130 -10
  37. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  38. package/docs/demos/Modal/examples/Modal.md +39 -3
  39. package/docs/demos/Nav/examples/Nav.md +2 -2
  40. package/docs/demos/Page/examples/Page.md +355 -0
  41. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  42. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  43. package/docs/demos/Table/examples/Table.md +67 -23
  44. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  45. package/package.json +6 -6
  46. package/patternfly-no-globals.css +216 -54
  47. package/patternfly.css +216 -54
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
@@ -597,27 +597,45 @@
597
597
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
598
598
  var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
599
599
  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);
600
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
601
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
602
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
603
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
604
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--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--opacity--default: initial;
606
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
607
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
608
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
609
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
610
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
611
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
612
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
613
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
614
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
615
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
616
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
617
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
618
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
619
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
620
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
621
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
622
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
623
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
624
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
625
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
626
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
627
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
628
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
629
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
630
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
631
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
632
+ --pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--Transition: all
633
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration)
634
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
635
+ var(--pf-v6-c-alert-group--m-toast__item--m-outgoing--c-alert--TransitionDuration);
636
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
637
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
638
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: initial;
621
639
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
622
640
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
623
641
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -677,40 +695,43 @@
677
695
  transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
678
696
  }
679
697
  }
680
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
698
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child, .pf-v6-c-alert-group__item.pf-m-incoming:first-child {
681
699
  grid-template-rows: 0fr;
682
700
  margin-block: 0;
683
701
  overflow: hidden;
684
702
  opacity: 0;
685
703
  transform: translateY(-100%);
686
704
  }
687
- .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
705
+ .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
706
  min-height: 0;
689
707
  padding-block-start: 0;
690
708
  padding-block-end: 0;
691
709
  border-width: 0;
692
710
  }
693
- .pf-v6-c-alert-group__item.pf-m-offstage-right {
711
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
694
712
  grid-template-rows: 0fr;
695
713
  margin-block: 0;
696
714
  overflow: hidden;
697
715
  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);
716
+ 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
717
  }
700
- .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
718
+ .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
719
  min-height: 0;
702
720
  padding-block-start: 0;
703
721
  padding-block-end: 0;
704
722
  border-width: 0;
705
- transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
723
+ 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
724
  }
707
725
  @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);
726
+ .pf-v6-c-alert-group__item.pf-m-offstage-right, .pf-v6-c-alert-group__item.pf-m-outgoing {
727
+ 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
728
  transform: translateX(100%);
711
729
  }
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);
730
+ :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 {
731
+ transform: translateX(calc(100% * var(--pf-v6-global--inverse--multiplier)));
732
+ }
733
+ .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 {
734
+ 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
735
  }
715
736
  }
716
737
  .pf-v6-c-alert-group__item:hover {
@@ -3051,6 +3072,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3051
3072
  .pf-v6-c-code-editor__main .monaco-editor {
3052
3073
  background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
3053
3074
  }
3075
+ .pf-v6-c-code-editor__main a.label-name {
3076
+ text-decoration-line: none;
3077
+ }
3054
3078
 
3055
3079
  .pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
3056
3080
  border-block-start-width: 0;
@@ -5307,9 +5331,15 @@ ul) {
5307
5331
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5308
5332
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5309
5333
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5334
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5335
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
5336
+ --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
5310
5337
  --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5311
- --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
5312
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5338
+ --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
5339
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
5340
+ --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5341
+ --pf-v6-c-drawer__panel--Opacity: 0;
5342
+ --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
5313
5343
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5314
5344
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5315
5345
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -5399,6 +5429,17 @@ ul) {
5399
5429
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
5400
5430
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
5401
5431
  }
5432
+ @media screen and (prefers-reduced-motion: no-preference) {
5433
+ .pf-v6-c-drawer {
5434
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
5435
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
5436
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
5437
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5438
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
5439
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
5440
+ --pf-v6-c-drawer__panel--Opacity: 1;
5441
+ }
5442
+ }
5402
5443
  @media screen and (min-width: 75rem) {
5403
5444
  .pf-v6-c-drawer {
5404
5445
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -5446,8 +5487,13 @@ ul) {
5446
5487
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
5447
5488
  flex-direction: column;
5448
5489
  }
5490
+ .pf-v6-c-drawer.pf-m-expanded {
5491
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
5492
+ }
5449
5493
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5450
5494
  transform: translateX(-100%);
5495
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
5496
+ visibility: visible;
5451
5497
  }
5452
5498
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5453
5499
  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -5520,8 +5566,11 @@ ul) {
5520
5566
  order: 1;
5521
5567
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
5522
5568
  overflow: auto;
5569
+ visibility: hidden;
5523
5570
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
5524
5571
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5572
+ opacity: var(--pf-v6-c-drawer__panel--Opacity);
5573
+ transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
5525
5574
  transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
5526
5575
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
5527
5576
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -5578,17 +5627,6 @@ ul) {
5578
5627
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
5579
5628
  }
5580
5629
 
5581
- @keyframes pf-remove-tab-focus {
5582
- to {
5583
- visibility: hidden;
5584
- }
5585
- }
5586
- .pf-v6-c-drawer__panel[hidden] {
5587
- animation-name: pf-remove-tab-focus;
5588
- animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
5589
- animation-fill-mode: forwards;
5590
- }
5591
-
5592
5630
  .pf-v6-c-drawer__head {
5593
5631
  display: grid;
5594
5632
  grid-template-columns: auto;
@@ -5696,7 +5734,7 @@ ul) {
5696
5734
  .pf-v6-c-drawer {
5697
5735
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
5698
5736
  }
5699
- .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5737
+ .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5700
5738
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
5701
5739
  }
5702
5740
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
@@ -6280,6 +6318,17 @@ ul) {
6280
6318
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6281
6319
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
6282
6320
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
6321
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
6322
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
6323
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
6324
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
6325
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
6326
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
6327
+ --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6328
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6329
+ --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6330
+ --pf-v6-c-expandable-section__content--TranslateY: 0;
6331
+ --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
6283
6332
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6284
6333
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6285
6334
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6291,10 +6340,18 @@ ul) {
6291
6340
  --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
6292
6341
  --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
6293
6342
  --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
6343
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
6294
6344
  --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));
6295
6345
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
6296
6346
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
6297
6347
  }
6348
+ @media screen and (prefers-reduced-motion: no-preference) {
6349
+ .pf-v6-c-expandable-section {
6350
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
6351
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
6352
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
6353
+ }
6354
+ }
6298
6355
 
6299
6356
  .pf-v6-c-expandable-section {
6300
6357
  display: flex;
@@ -6305,6 +6362,11 @@ ul) {
6305
6362
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
6306
6363
  --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);
6307
6364
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
6365
+ --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
6366
+ --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
6367
+ --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6368
+ --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6369
+ --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
6308
6370
  }
6309
6371
  .pf-v6-c-expandable-section.pf-m-limit-width {
6310
6372
  --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -6317,6 +6379,7 @@ ul) {
6317
6379
  background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
6318
6380
  border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
6319
6381
  border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
6382
+ transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
6320
6383
  }
6321
6384
  .pf-v6-c-expandable-section.pf-m-indented {
6322
6385
  --pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
@@ -6350,6 +6413,11 @@ ul) {
6350
6413
  max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
6351
6414
  padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
6352
6415
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6416
+ opacity: var(--pf-v6-c-expandable-section__content--Opacity);
6417
+ transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
6418
+ transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide);
6419
+ transition-property: opacity, translate;
6420
+ translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
6353
6421
  }
6354
6422
 
6355
6423
  .pf-v6-c-file-upload {
@@ -10649,16 +10717,20 @@ ul.pf-v6-c-list {
10649
10717
  flex-wrap: nowrap;
10650
10718
  }
10651
10719
 
10652
- .pf-v6-c-menu-toggle__icon {
10653
- flex-shrink: 0;
10654
- }
10655
10720
  .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
10656
10721
  .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
10657
- .pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
10722
+ .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 {
10658
10723
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
10659
10724
  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
10660
10725
  }
10661
10726
 
10727
+ .pf-v6-c-menu-toggle__icon {
10728
+ flex-shrink: 0;
10729
+ }
10730
+ .pf-v6-c-menu-toggle__icon :where(picture, img) {
10731
+ vertical-align: middle;
10732
+ }
10733
+
10662
10734
  .pf-v6-c-menu-toggle__controls {
10663
10735
  display: flex;
10664
10736
  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
@@ -11748,8 +11820,9 @@ ul.pf-v6-c-list {
11748
11820
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
11749
11821
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11750
11822
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11751
- --pf-v6-c-page__sidebar--Width: 18.125rem;
11752
- --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11823
+ --pf-v6-c-page__sidebar--Width--base: 18.125rem;
11824
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
11825
+ --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
11753
11826
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11754
11827
  --pf-v6-c-page__sidebar--BoxShadow: none;
11755
11828
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -12177,7 +12250,7 @@ ul.pf-v6-c-list {
12177
12250
  -webkit-overflow-scrolling: touch;
12178
12251
  }
12179
12252
  @media screen and (min-width: 75rem) {
12180
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12253
+ .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12181
12254
  .pf-v6-c-masthead + .pf-v6-c-page__drawer,
12182
12255
  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
12183
12256
  --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
@@ -14329,8 +14402,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14329
14402
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
14330
14403
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
14331
14404
  --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14332
- --pf-v6-c-skeleton--after--TranslateX: -100%;
14333
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
14405
+ --pf-v6-c-skeleton--after--TranslateX: 0;
14406
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
14334
14407
  --pf-v6-c-skeleton--after--AnimationDuration: 3s;
14335
14408
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
14336
14409
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -14362,6 +14435,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14362
14435
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
14363
14436
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
14364
14437
  }
14438
+ @media screen and (prefers-reduced-motion: no-preference) {
14439
+ .pf-v6-c-skeleton {
14440
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
14441
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
14442
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
14443
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
14444
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
14445
+ }
14446
+ }
14365
14447
 
14366
14448
  .pf-v6-c-skeleton {
14367
14449
  position: relative;
@@ -14482,6 +14564,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14482
14564
  transform: translateX(100%);
14483
14565
  }
14484
14566
  }
14567
+ @keyframes pf-v6-c-skeleton-loading-reduced-motion {
14568
+ 0% {
14569
+ opacity: 0.25;
14570
+ }
14571
+ 60% {
14572
+ opacity: 1;
14573
+ }
14574
+ 100% {
14575
+ opacity: 0.25;
14576
+ }
14577
+ }
14485
14578
  .pf-v6-c-skip-to-content {
14486
14579
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
14487
14580
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
@@ -18317,6 +18410,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18317
18410
  }
18318
18411
  }
18319
18412
 
18413
+ @property --pf-v6-c-tabs--link-accent--length {
18414
+ syntax: "<length>";
18415
+ inherits: true;
18416
+ initial-value: 0px;
18417
+ }
18418
+ @property --pf-v6-c-tabs--link-accent--start {
18419
+ syntax: "<length>";
18420
+ inherits: true;
18421
+ initial-value: 0px;
18422
+ }
18320
18423
  .pf-v6-c-tabs {
18321
18424
  --pf-v6-c-tabs--inset: 0;
18322
18425
  --pf-v6-c-tabs--Width: auto;
@@ -18378,6 +18481,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18378
18481
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
18379
18482
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
18380
18483
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
18484
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
18485
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
18381
18486
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
18382
18487
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
18383
18488
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -18402,6 +18507,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18402
18507
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
18403
18508
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
18404
18509
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
18510
+ --pf-v6-c-tabs--link-accent--start: 0;
18511
+ --pf-v6-c-tabs--link-accent--length: auto;
18512
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
18513
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
18514
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
18515
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
18516
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
18517
+ --pf-v6-c-tabs--link-accent--Width: initial;
18518
+ --pf-v6-c-tabs--link-accent--Height: 0;
18519
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18520
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
18521
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
18522
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
18523
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
18524
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
18525
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
18526
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
18527
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18528
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
18529
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18405
18530
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18406
18531
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18407
18532
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -18559,6 +18684,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18559
18684
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
18560
18685
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
18561
18686
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
18687
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
18688
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
18689
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
18690
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
18691
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
18692
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
18693
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
18562
18694
  display: inline-flex;
18563
18695
  flex-direction: column;
18564
18696
  height: 100%;
@@ -18821,6 +18953,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18821
18953
  text-decoration-line: none;
18822
18954
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
18823
18955
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
18956
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
18824
18957
  }
18825
18958
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
18826
18959
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -19133,6 +19266,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19133
19266
  }
19134
19267
  }
19135
19268
 
19269
+ @media (prefers-reduced-motion: no-preference) {
19270
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
19271
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
19272
+ content: revert;
19273
+ }
19274
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
19275
+ position: absolute;
19276
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
19277
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
19278
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
19279
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
19280
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
19281
+ content: "";
19282
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
19283
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
19284
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
19285
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
19286
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
19287
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
19288
+ }
19289
+ .pf-v6-c-tabs.pf-m-initializing-accent {
19290
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
19291
+ }
19292
+ }
19136
19293
  .pf-v6-c-text-input-group {
19137
19294
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
19138
19295
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
@@ -21744,6 +21901,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21744
21901
  align-items: baseline;
21745
21902
  min-width: var(--pf-v6-c-truncate--MinWidth);
21746
21903
  }
21904
+ .pf-v6-c-truncate.pf-m-fixed {
21905
+ display: inline;
21906
+ align-items: revert;
21907
+ min-width: revert;
21908
+ }
21747
21909
 
21748
21910
  .pf-v6-c-truncate__start,
21749
21911
  .pf-v6-c-truncate__end {
@@ -1906,7 +1906,19 @@ For when a plain/icon button is placed inline with text
1906
1906
  aria-label="More info"
1907
1907
  >
1908
1908
  <span class="pf-v6-c-button__icon">
1909
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1909
+ <svg
1910
+ class="pf-v6-svg"
1911
+ viewBox="0 0 1024 1024"
1912
+ fill="currentColor"
1913
+ aria-hidden="true"
1914
+ role="img"
1915
+ width="1em"
1916
+ height="1em"
1917
+ >
1918
+ <path
1919
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
1920
+ />
1921
+ </svg>
1910
1922
  </span>
1911
1923
  </button>
1912
1924
  .
@@ -255,7 +255,19 @@ cssPrefix: pf-v6-c-code-editor
255
255
  <div class="pf-v6-c-code-editor__keyboard-shortcuts">
256
256
  <button class="pf-v6-c-button pf-m-link" type="button">
257
257
  <span class="pf-v6-c-button__icon pf-m-start">
258
- <i class="fas fa-question-circle" aria-hidden="true"></i>
258
+ <svg
259
+ class="pf-v6-svg"
260
+ viewBox="0 0 1024 1024"
261
+ fill="currentColor"
262
+ aria-hidden="true"
263
+ role="img"
264
+ width="1em"
265
+ height="1em"
266
+ >
267
+ <path
268
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
269
+ />
270
+ </svg>
259
271
  </span>
260
272
  <span class="pf-v6-c-button__text">View shortcuts</span>
261
273
  </button>
@@ -402,7 +414,19 @@ This is an extra container used in React to prevent event propagation if upload
402
414
  <div class="pf-v6-c-code-editor__keyboard-shortcuts">
403
415
  <button class="pf-v6-c-button pf-m-link" type="button">
404
416
  <span class="pf-v6-c-button__icon pf-m-start">
405
- <i class="fas fa-question-circle" aria-hidden="true"></i>
417
+ <svg
418
+ class="pf-v6-svg"
419
+ viewBox="0 0 1024 1024"
420
+ fill="currentColor"
421
+ aria-hidden="true"
422
+ role="img"
423
+ width="1em"
424
+ height="1em"
425
+ >
426
+ <path
427
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
428
+ />
429
+ </svg>
406
430
  </span>
407
431
  <span class="pf-v6-c-button__text">View shortcuts</span>
408
432
  </button>
@@ -18,7 +18,7 @@ cssPrefix: pf-v6-c-divider
18
18
  ```html
19
19
  <ul role="list">
20
20
  <li>List item one</li>
21
- <li class="pf-v6-c-divider" role="separator"></li>
21
+ <li class="pf-v6-c-divider" role="presentation"></li>
22
22
  <li>List item two</li>
23
23
  </ul>
24
24
 
@@ -550,6 +550,7 @@ cssPrefix: pf-v6-c-drawer
550
550
  class="pf-v6-c-drawer__splitter pf-m-vertical"
551
551
  role="separator"
552
552
  tabindex="0"
553
+ aria-valuenow="50"
553
554
  aria-orientation="vertical"
554
555
  >
555
556
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -597,6 +598,7 @@ cssPrefix: pf-v6-c-drawer
597
598
  class="pf-v6-c-drawer__splitter pf-m-vertical"
598
599
  role="separator"
599
600
  tabindex="0"
601
+ aria-valuenow="50"
600
602
  aria-orientation="vertical"
601
603
  >
602
604
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -647,6 +649,7 @@ cssPrefix: pf-v6-c-drawer
647
649
  class="pf-v6-c-drawer__splitter"
648
650
  role="separator"
649
651
  tabindex="0"
652
+ aria-valuenow="50"
650
653
  aria-orientation="horizontal"
651
654
  >
652
655
  <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -694,6 +697,7 @@ cssPrefix: pf-v6-c-drawer
694
697
  class="pf-v6-c-drawer__splitter pf-m-vertical"
695
698
  role="separator"
696
699
  tabindex="0"
700
+ aria-valuenow="50"
697
701
  aria-orientation="vertical"
698
702
  >
699
703
  <div class="pf-v6-c-drawer__splitter-handle"></div>