@patternfly/patternfly 6.2.0-prerelease.9 → 6.3.0-prerelease.1

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 (81) hide show
  1. package/base/patternfly-variables.css +1 -1
  2. package/base/patternfly-variables.scss +1 -1
  3. package/components/Accordion/accordion.css +3 -1
  4. package/components/Accordion/accordion.scss +4 -2
  5. package/components/Alert/alert-group.css +52 -9
  6. package/components/Alert/alert-group.scss +116 -29
  7. package/components/Banner/banner.css +2 -2
  8. package/components/Banner/banner.scss +2 -2
  9. package/components/Button/button.css +41 -0
  10. package/components/Button/button.scss +52 -0
  11. package/components/Card/card.css +24 -2
  12. package/components/Card/card.scss +29 -2
  13. package/components/ClipboardCopy/clipboard-copy.css +6 -1
  14. package/components/ClipboardCopy/clipboard-copy.scss +8 -2
  15. package/components/DataList/data-list.css +3 -1
  16. package/components/DataList/data-list.scss +4 -2
  17. package/components/DescriptionList/description-list.css +1 -1
  18. package/components/DescriptionList/description-list.scss +1 -1
  19. package/components/DualListSelector/dual-list-selector.css +4 -2
  20. package/components/DualListSelector/dual-list-selector.scss +4 -2
  21. package/components/ExpandableSection/expandable-section.css +3 -1
  22. package/components/ExpandableSection/expandable-section.scss +4 -2
  23. package/components/Form/form.css +7 -5
  24. package/components/Form/form.scss +7 -5
  25. package/components/FormControl/form-control.css +109 -43
  26. package/components/FormControl/form-control.scss +139 -54
  27. package/components/HelperText/helper-text.css +13 -0
  28. package/components/HelperText/helper-text.scss +16 -1
  29. package/components/JumpLinks/jump-links.css +4 -2
  30. package/components/JumpLinks/jump-links.scss +4 -2
  31. package/components/Masthead/masthead.css +1 -1
  32. package/components/Masthead/masthead.scss +1 -1
  33. package/components/Menu/menu.css +4 -5
  34. package/components/Menu/menu.scss +2 -3
  35. package/components/MenuToggle/menu-toggle.css +42 -1
  36. package/components/MenuToggle/menu-toggle.scss +50 -1
  37. package/components/Nav/nav.css +41 -11
  38. package/components/Nav/nav.scss +52 -15
  39. package/components/NotificationDrawer/notification-drawer.css +3 -1
  40. package/components/NotificationDrawer/notification-drawer.scss +4 -2
  41. package/components/Page/page.css +16 -1
  42. package/components/Page/page.scss +17 -3
  43. package/components/Switch/switch.css +3 -1
  44. package/components/Switch/switch.scss +4 -2
  45. package/components/Table/table-grid.css +3 -1
  46. package/components/Table/table-grid.scss +4 -2
  47. package/components/Table/table.css +7 -5
  48. package/components/Table/table.scss +7 -4
  49. package/components/Tabs/tabs.css +6 -2
  50. package/components/Tabs/tabs.scss +8 -4
  51. package/components/Toolbar/toolbar.css +10 -3
  52. package/components/Toolbar/toolbar.scss +11 -3
  53. package/components/Wizard/wizard.css +4 -2
  54. package/components/Wizard/wizard.scss +4 -2
  55. package/components/_index.css +411 -104
  56. package/docs/components/Alert/examples/Alert.md +6 -0
  57. package/docs/components/Button/examples/Button.md +29 -0
  58. package/docs/components/Card/examples/Card.md +30 -0
  59. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +29 -0
  60. package/docs/components/DataList/examples/DataList.md +1 -1
  61. package/docs/components/Menu/examples/Menu.md +6 -6
  62. package/docs/components/Nav/examples/Navigation.md +3 -0
  63. package/docs/components/Table/examples/Table.md +14 -26
  64. package/docs/components/Tabs/examples/Tabs.md +145 -3
  65. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  66. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  67. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  68. package/docs/demos/Card/examples/Card.md +32 -24
  69. package/docs/demos/CardView/examples/CardView.md +2 -0
  70. package/docs/demos/Nav/examples/Nav.md +2 -0
  71. package/package.json +2 -2
  72. package/patternfly-base-no-globals.css +1 -1
  73. package/patternfly-base.css +1 -1
  74. package/patternfly-charts.css +3 -3
  75. package/patternfly-charts.scss +3 -3
  76. package/patternfly-no-globals.css +412 -105
  77. package/patternfly.css +412 -105
  78. package/patternfly.min.css +1 -1
  79. package/patternfly.min.css.map +1 -1
  80. package/sass-utilities/mixins.scss +8 -4
  81. package/docs/components/TabContent/examples/TabContent.md +0 -153
package/components/_index.css CHANGED
@@ -210,7 +210,9 @@
210
210
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
211
211
  --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
212
212
  --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
213
- --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
213
+ --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
214
+ --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
215
+ --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
214
216
  --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
215
217
  --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
216
218
  --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
@@ -574,6 +576,48 @@
574
576
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
575
577
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
576
578
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
579
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
580
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
581
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
582
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
583
+ 0s;
584
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
585
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
586
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
587
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
588
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
589
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
590
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
591
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
592
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
593
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
594
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
595
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
596
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
597
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
598
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
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);
577
621
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
578
622
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
579
623
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -622,25 +666,25 @@
622
666
  display: grid;
623
667
  grid-template-rows: 1fr;
624
668
  opacity: 1;
625
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
669
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
626
670
  transform: translateX(0) translateY(0);
627
671
  }
628
672
  @media screen and (prefers-reduced-motion: no-preference) {
629
673
  .pf-v6-c-alert-group__item {
630
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
674
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
631
675
  }
632
676
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
633
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
677
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
634
678
  }
635
679
  }
636
- .pf-v6-c-alert-group__item.pf-m-offstage-top {
680
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
637
681
  grid-template-rows: 0fr;
638
682
  margin-block: 0;
639
683
  overflow: hidden;
640
684
  opacity: 0;
641
685
  transform: translateY(-100%);
642
686
  }
643
- .pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
687
+ .pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
644
688
  min-height: 0;
645
689
  padding-block-start: 0;
646
690
  padding-block-end: 0;
@@ -651,21 +695,22 @@
651
695
  margin-block: 0;
652
696
  overflow: hidden;
653
697
  opacity: 0;
654
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
655
- transform: translateX(100%);
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);
656
699
  }
657
700
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
658
701
  min-height: 0;
659
702
  padding-block-start: 0;
660
703
  padding-block-end: 0;
661
704
  border-width: 0;
705
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
662
706
  }
663
707
  @media screen and (prefers-reduced-motion: no-preference) {
664
708
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
665
- transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
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);
710
+ transform: translateX(100%);
666
711
  }
667
712
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
668
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
713
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
669
714
  }
670
715
  }
671
716
  .pf-v6-c-alert-group__item:hover {
@@ -1207,8 +1252,8 @@
1207
1252
  cursor: not-allowed;
1208
1253
  }
1209
1254
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
1210
- --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
1211
- --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1255
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
1256
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1212
1257
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1213
1258
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1214
1259
  }
@@ -1628,6 +1673,14 @@ button.pf-v6-c-breadcrumb__link {
1628
1673
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
1629
1674
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1630
1675
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1676
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1677
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1678
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1679
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1680
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
1681
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
1682
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
1683
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
1631
1684
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1632
1685
  --pf-v6-c-button__progress--Opacity: 0;
1633
1686
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1937,6 +1990,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1937
1990
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
1938
1991
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1939
1992
  }
1993
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1994
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1995
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1996
+ transition-property: color;
1997
+ }
1998
+ .pf-v6-c-button.pf-m-favorited {
1999
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2000
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2001
+ }
2002
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
2003
+ animation-name: pf-v6-c-button-icon-favorited;
2004
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
2005
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
2006
+ }
1940
2007
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1941
2008
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1942
2009
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -1992,6 +2059,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1992
2059
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1993
2060
  opacity: 0;
1994
2061
  }
2062
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2063
+ animation-name: pf-v6-c-button-icon-notify;
2064
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2065
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2066
+ }
1995
2067
 
1996
2068
  .pf-v6-c-button__icon {
1997
2069
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -2022,6 +2094,19 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2022
2094
  align-items: center;
2023
2095
  }
2024
2096
 
2097
+ @keyframes pf-v6-c-button-icon-notify {
2098
+ 33% {
2099
+ transform: rotate(30deg);
2100
+ }
2101
+ 66% {
2102
+ transform: rotate(-60deg);
2103
+ }
2104
+ }
2105
+ @keyframes pf-v6-c-button-icon-favorited {
2106
+ 50% {
2107
+ transform: scale(1.5);
2108
+ }
2109
+ }
2025
2110
  .pf-v6-c-calendar-month {
2026
2111
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2027
2112
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -2244,6 +2329,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2244
2329
  --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
2245
2330
  --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
2246
2331
  --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
2332
+ --pf-v6-c-card__title-text--OverflowWrap: break-word;
2247
2333
  --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2248
2334
  --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
2249
2335
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -2252,12 +2338,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2252
2338
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
2253
2339
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2254
2340
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2341
+ --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
2342
+ --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
2255
2343
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2256
2344
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
2257
2345
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2258
2346
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2259
2347
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2260
- --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2348
+ --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2261
2349
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2262
2350
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2263
2351
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -2415,6 +2503,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2415
2503
  .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
2416
2504
  order: 2;
2417
2505
  }
2506
+ .pf-v6-c-card__header.pf-m-wrap {
2507
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
2508
+ gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
2509
+ }
2510
+ .pf-v6-c-card__header.pf-m-wrap,
2511
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2512
+ flex-wrap: wrap;
2513
+ row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
2514
+ }
2515
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2516
+ margin-inline-start: 0;
2517
+ }
2518
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
2519
+ margin-inline-end: auto;
2520
+ }
2418
2521
 
2419
2522
  .pf-v6-c-card__header-main {
2420
2523
  flex-grow: 1;
@@ -2430,18 +2533,22 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2430
2533
 
2431
2534
  .pf-v6-c-card__header-toggle-icon {
2432
2535
  display: inline-block;
2433
- transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2536
+ transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2537
+ transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
2538
+ transition-property: transform;
2434
2539
  }
2435
2540
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2436
2541
  scale: -1 1;
2437
2542
  }
2438
2543
 
2439
2544
  .pf-v6-c-card__title-text {
2545
+ overflow: auto;
2440
2546
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
2441
2547
  font-size: var(--pf-v6-c-card__title-text--FontSize);
2442
2548
  font-weight: var(--pf-v6-c-card__title-text--FontWeight);
2443
2549
  line-height: var(--pf-v6-c-card__title-text--LineHeight);
2444
2550
  color: var(--pf-v6-c-card__title-text--Color);
2551
+ overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2445
2552
  }
2446
2553
 
2447
2554
  .pf-v6-c-card__actions {
@@ -2641,7 +2748,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2641
2748
  }
2642
2749
 
2643
2750
  .pf-v6-c-clipboard-copy {
2644
- --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
2751
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
2752
+ --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2753
+ --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
2645
2754
  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
2646
2755
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
2647
2756
  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -2681,6 +2790,9 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2681
2790
  .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block {
2682
2791
  display: block;
2683
2792
  }
2793
+ .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
2794
+ display: inline-flex;
2795
+ }
2684
2796
 
2685
2797
  .pf-v6-c-clipboard-copy__group {
2686
2798
  display: flex;
@@ -3706,7 +3818,9 @@ ul) {
3706
3818
  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3707
3819
  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
3708
3820
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
3709
- --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
3821
+ --pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
3822
+ --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3823
+ --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction);
3710
3824
  --pf-v6-c-data-list__toggle-icon--Rotate: 0;
3711
3825
  --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
3712
3826
  --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;
@@ -4105,7 +4219,7 @@ ul) {
4105
4219
  --pf-v6-c-description-list__term--Display: inline;
4106
4220
  --pf-v6-c-description-list__term--sm--Display: flex;
4107
4221
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
4108
- --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
4222
+ --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
4109
4223
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
4110
4224
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
4111
4225
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -4542,7 +4656,7 @@ ul) {
4542
4656
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
4543
4657
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
4544
4658
  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
4545
- --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
4659
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
4546
4660
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4547
4661
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
4548
4662
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -4766,7 +4880,9 @@ ul) {
4766
4880
  min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
4767
4881
  color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
4768
4882
  text-align: center;
4769
- transition: transform var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration) var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
4883
+ transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
4884
+ transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
4885
+ transition-property: transform;
4770
4886
  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
4771
4887
  }
4772
4888
 
@@ -6157,7 +6273,9 @@ ul) {
6157
6273
  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
6158
6274
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
6159
6275
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
6160
- --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
6276
+ --pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6277
+ --pf-v6-c-expandable-section__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6278
+ --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
6161
6279
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
6162
6280
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
6163
6281
  --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
@@ -6303,16 +6421,16 @@ ul) {
6303
6421
  --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6304
6422
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
6305
6423
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
6306
- --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
6424
+ --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
6307
6425
  --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
6308
6426
  --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
6309
6427
  --pf-v6-c-form__label--hover--Cursor: pointer;
6310
6428
  --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
6311
6429
  --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6312
6430
  --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
6313
- --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
6431
+ --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
6314
6432
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
6315
- --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
6433
+ --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
6316
6434
  --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
6317
6435
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
6318
6436
  --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -6349,7 +6467,7 @@ ul) {
6349
6467
  --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
6350
6468
  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6351
6469
  --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6352
- --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
6470
+ --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
6353
6471
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6354
6472
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
6355
6473
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
@@ -6747,7 +6865,9 @@ ul) {
6747
6865
  display: inline-block;
6748
6866
  min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
6749
6867
  text-align: center;
6750
- transition: transform var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration) var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
6868
+ transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
6869
+ transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
6870
+ transition-property: transform;
6751
6871
  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
6752
6872
  }
6753
6873
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
@@ -6821,10 +6941,29 @@ ul) {
6821
6941
  --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
6822
6942
  --pf-v6-c-form-control--Width: 100%;
6823
6943
  --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
6824
- --pf-v6-c-form-control--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6825
- --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
6826
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6827
- --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6944
+ --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
6945
+ --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
6946
+ --pf-v6-c-form-control--PaddingInlineEnd--base: var(--pf-v6-c-form-control--inset--base);
6947
+ --pf-v6-c-form-control--PaddingInlineStart--base: var(--pf-v6-c-form-control--inset--base);
6948
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6949
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6950
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6951
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6952
+ --pf-v6-c-form-control__utilities--input--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
6953
+ --pf-v6-c-form-control__utilities--select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
6954
+ --pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd: var(--pf-v6-c-form-control__textarea--PaddingInlineEnd);
6955
+ --pf-v6-c-form-control__input--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6956
+ --pf-v6-c-form-control__input--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6957
+ --pf-v6-c-form-control__input--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6958
+ --pf-v6-c-form-control__input--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6959
+ --pf-v6-c-form-control__select--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6960
+ --pf-v6-c-form-control__select--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6961
+ --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6962
+ --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6963
+ --pf-v6-c-form-control__textarea--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart--base);
6964
+ --pf-v6-c-form-control__textarea--PaddingBlockEnd: var(--pf-v6-c-form-control--PaddingBlockEnd--base);
6965
+ --pf-v6-c-form-control__textarea--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
6966
+ --pf-v6-c-form-control__textarea--PaddingInlineStart: var(--pf-v6-c-form-control--PaddingInlineStart--base);
6828
6967
  --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
6829
6968
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
6830
6969
  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
@@ -6844,25 +6983,33 @@ ul) {
6844
6983
  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
6845
6984
  --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
6846
6985
  --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
6986
+ --pf-v6-c-form-control--icon--width: var(--pf-v6-c-form-control--FontSize);
6847
6987
  --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6848
6988
  --pf-v6-c-form-control--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
6849
- --pf-v6-c-form-control--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
6989
+ --pf-v6-c-form-control--m-success--PaddingInlineEnd: initial;
6990
+ --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: initial;
6991
+ --pf-v6-c-form-control__input--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6992
+ --pf-v6-c-form-control__select--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
6993
+ --pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
6850
6994
  --pf-v6-c-form-control--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6851
6995
  --pf-v6-c-form-control--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6852
- --pf-v6-c-form-control--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
6996
+ --pf-v6-c-form-control--m-warning--PaddingInlineEnd: initial;
6997
+ --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: initial;
6998
+ --pf-v6-c-form-control__input--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6999
+ --pf-v6-c-form-control__select--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
7000
+ --pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
6853
7001
  --pf-v6-c-form-control--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
6854
7002
  --pf-v6-c-form-control--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6855
- --pf-v6-c-form-control--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--ColumnGap));
7003
+ --pf-v6-c-form-control--m-error--PaddingInlineEnd: initial;
7004
+ --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: initial;
6856
7005
  --pf-v6-c-form-control--m-error--icon--width: var(--pf-v6-c-form-control--FontSize);
6857
- --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
7006
+ --pf-v6-c-form-control__input--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
7007
+ --pf-v6-c-form-control__select--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd));
7008
+ --pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd));
7009
+ --pf-v6-c-form-control--m-icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6858
7010
  --pf-v6-c-form-control--m-icon--icon--width: var(--pf-v6-c-form-control--FontSize);
6859
7011
  --pf-v6-c-form-control--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
6860
- --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--inset--base) + var(--pf-v6-c-form-control--m-error--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--m-icon--icon--spacer));
6861
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6862
- --pf-v6-c-form-control__select--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
6863
- --pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
6864
- --pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
6865
- --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
7012
+ --pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd: calc(var(--pf-v6-c-form-control--icon--width) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control--m-icon--icon--width) + var(--pf-v6-c-form-control--ColumnGap) + var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd));
6866
7013
  --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
6867
7014
  --pf-v6-c-form-control--textarea--Height: auto;
6868
7015
  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
@@ -6876,11 +7023,13 @@ ul) {
6876
7023
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
6877
7024
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
6878
7025
  --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
6879
- --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6880
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6881
- --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6882
- --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
7026
+ --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-v6-c-form-control--PaddingBlockStart);
7027
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--PaddingInlineEnd--base);
7028
+ --pf-v6-c-form-control__utilities--textarea--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7029
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineStart: 0;
7030
+ --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: 0;
6883
7031
  --pf-v6-c-form-control__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7032
+ --pf-v6-c-form-control__toggle-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
6884
7033
  --pf-v6-c-form-control--m-disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
6885
7034
  }
6886
7035
 
@@ -6921,12 +7070,11 @@ ul) {
6921
7070
  padding-inline-start: var(--pf-v6-c-form-control--PaddingInlineStart);
6922
7071
  padding-inline-end: var(--pf-v6-c-form-control--PaddingInlineEnd);
6923
7072
  color: var(--pf-v6-c-form-control--Color);
7073
+ appearance: none;
6924
7074
  background-color: transparent;
6925
7075
  border: none;
6926
7076
  border-radius: var(--pf-v6-c-form-control--BorderRadius);
6927
7077
  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
6928
- -moz-appearance: none;
6929
- -webkit-appearance: none;
6930
7078
  }
6931
7079
  .pf-v6-c-form-control > ::placeholder {
6932
7080
  color: var(--pf-v6-c-form-control--m-placeholder--Color);
@@ -6934,6 +7082,14 @@ ul) {
6934
7082
  .pf-v6-c-form-control > :is(input, select) {
6935
7083
  text-overflow: ellipsis;
6936
7084
  }
7085
+ .pf-v6-c-form-control:has(input) {
7086
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
7087
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
7088
+ --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__input--PaddingInlineStart);
7089
+ --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__input--PaddingInlineEnd);
7090
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--input--PaddingInlineEnd);
7091
+ }
7092
+
6937
7093
  .pf-v6-c-form-control.pf-m-textarea {
6938
7094
  padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
6939
7095
  padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
@@ -6943,14 +7099,20 @@ ul) {
6943
7099
  .pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error {
6944
7100
  --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap));
6945
7101
  }
7102
+ .pf-v6-c-form-control.pf-m-textarea:has(textarea) {
7103
+ --pf-v6-c-form-control--PaddingBlockStart: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
7104
+ --pf-v6-c-form-control--PaddingBlockEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
7105
+ --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
7106
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__textarea--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0px));
7107
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
7108
+ }
6946
7109
  .pf-v6-c-form-control.pf-m-textarea > textarea {
6947
- padding-block-start: calc(var(--pf-v6-c-form-control--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
6948
- padding-block-end: calc(var(--pf-v6-c-form-control--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
6949
- padding-inline-start: calc(var(--pf-v6-c-form-control--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
6950
- padding-inline-end: calc(var(--pf-v6-c-form-control--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0));
6951
7110
  outline-offset: 0;
6952
7111
  scrollbar-gutter: stable;
6953
7112
  }
7113
+ .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
7114
+ padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
7115
+ }
6954
7116
  .pf-v6-c-form-control.pf-m-readonly {
6955
7117
  --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
6956
7118
  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
@@ -6983,37 +7145,58 @@ ul) {
6983
7145
  cursor: not-allowed;
6984
7146
  }
6985
7147
  .pf-v6-c-form-control.pf-m-error {
6986
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
6987
7148
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
6988
7149
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
6989
7150
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
6990
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
6991
7151
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
6992
7152
  }
6993
- .pf-v6-c-form-control.pf-m-error.pf-m-icon {
6994
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7153
+ .pf-v6-c-form-control.pf-m-error > textarea {
7154
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
7155
+ }
7156
+ .pf-v6-c-form-control.pf-m-error > input {
7157
+ padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-error--PaddingInlineEnd));
7158
+ }
7159
+ .pf-v6-c-form-control.pf-m-error > select {
7160
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-error--PaddingInlineEnd));
7161
+ }
7162
+ .pf-v6-c-form-control.pf-m-error.pf-m-icon > :is(input) {
7163
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
6995
7164
  }
6996
7165
  .pf-v6-c-form-control.pf-m-success {
6997
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
6998
7166
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
6999
7167
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
7000
7168
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
7001
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
7002
7169
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
7003
7170
  }
7004
- .pf-v6-c-form-control.pf-m-success.pf-m-icon {
7005
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7171
+ .pf-v6-c-form-control.pf-m-success > textarea {
7172
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-success--PaddingInlineEnd));
7173
+ }
7174
+ .pf-v6-c-form-control.pf-m-success > input {
7175
+ padding-inline-end: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-success--PaddingInlineEnd));
7176
+ }
7177
+ .pf-v6-c-form-control.pf-m-success > select {
7178
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-success--PaddingInlineEnd));
7179
+ }
7180
+ .pf-v6-c-form-control.pf-m-success.pf-m-icon > :is(input) {
7181
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7006
7182
  }
7007
7183
  .pf-v6-c-form-control.pf-m-warning {
7008
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
7009
7184
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
7010
7185
  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
7011
7186
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
7012
- --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
7013
7187
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
7014
7188
  }
7015
- .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
7016
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7189
+ .pf-v6-c-form-control.pf-m-warning > textarea {
7190
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-warning--PaddingInlineEnd));
7191
+ }
7192
+ .pf-v6-c-form-control.pf-m-warning > input {
7193
+ padding-inline-end: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd, var(--pf-v6-c-form-control__input--m-warning--PaddingInlineEnd));
7194
+ }
7195
+ .pf-v6-c-form-control.pf-m-warning > select {
7196
+ padding-inline-end: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd, var(--pf-v6-c-form-control__select--m-warning--PaddingInlineEnd));
7197
+ }
7198
+ .pf-v6-c-form-control.pf-m-warning.pf-m-icon > :is(input) {
7199
+ padding-inline-end: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
7017
7200
  }
7018
7201
  .pf-v6-c-form-control:hover {
7019
7202
  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
@@ -7022,13 +7205,19 @@ ul) {
7022
7205
  .pf-v6-c-form-control.pf-m-icon {
7023
7206
  --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
7024
7207
  }
7025
- .pf-v6-c-form-control > select {
7026
- --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control__select--PaddingInlineEnd);
7208
+ .pf-v6-c-form-control:has(select) {
7209
+ --pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__select--PaddingBlockStart);
7210
+ --pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__select--PaddingBlockEnd);
7027
7211
  --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
7212
+ --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
7213
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7028
7214
  background-color: var(--pf-v6-c-form-control--BackgroundColor);
7029
7215
  }
7216
+ .pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
7217
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
7218
+ }
7030
7219
  @-moz-document url-prefix() {
7031
- .pf-v6-c-form-control > select {
7220
+ .pf-v6-c-form-control:has(select) {
7032
7221
  --pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) - 1px);
7033
7222
  --pf-v6-c-form-control--PaddingInlineStart: calc(var(--pf-v6-c-form-control__select--PaddingInlineStart) - 4px);
7034
7223
  }
@@ -7074,6 +7263,7 @@ ul) {
7074
7263
  grid-column: 3;
7075
7264
  padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
7076
7265
  padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
7266
+ font-size: var(--pf-v6-c-form-control__toggle-icon--FontSize);
7077
7267
  color: var(--pf-v6-c-form-control__toggle-icon--Color);
7078
7268
  pointer-events: none;
7079
7269
  }
@@ -7089,10 +7279,6 @@ ul) {
7089
7279
  pointer-events: none;
7090
7280
  }
7091
7281
 
7092
- select ~ .pf-v6-c-form-control__utilities {
7093
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
7094
- }
7095
-
7096
7282
  .pf-v6-c-hint {
7097
7283
  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
7098
7284
  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -7182,6 +7368,8 @@ select ~ .pf-v6-c-form-control__utilities {
7182
7368
  --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
7183
7369
  --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
7184
7370
  --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
7371
+ --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
7372
+ --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
7185
7373
  --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
7186
7374
  --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
7187
7375
  --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
@@ -7226,6 +7414,17 @@ select ~ .pf-v6-c-form-control__utilities {
7226
7414
  --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
7227
7415
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
7228
7416
  --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
7417
+ animation-name: pf-v6-c-helper-text-item-fade-in;
7418
+ animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
7419
+ animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
7420
+ }
7421
+ @keyframes pf-v6-c-helper-text-item-fade-in {
7422
+ from {
7423
+ opacity: 0;
7424
+ }
7425
+ to {
7426
+ opacity: 1;
7427
+ }
7229
7428
  }
7230
7429
  .pf-v6-c-helper-text__item.pf-m-dynamic {
7231
7430
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
@@ -7699,7 +7898,7 @@ label.pf-v6-c-input-group__text {
7699
7898
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
7700
7899
  --pf-v6-c-jump-links__toggle--Display: none;
7701
7900
  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7702
- --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
7901
+ --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
7703
7902
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7704
7903
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
7705
7904
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
@@ -7891,7 +8090,9 @@ label.pf-v6-c-input-group__text {
7891
8090
  .pf-v6-c-jump-links__toggle-icon {
7892
8091
  display: inline-block;
7893
8092
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
7894
- transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
8093
+ transition-timing-function: var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
8094
+ transition-duration: var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration);
8095
+ transition-property: transform;
7895
8096
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
7896
8097
  }
7897
8098
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
@@ -9055,7 +9256,7 @@ ul.pf-v6-c-list {
9055
9256
  grid-column-end: -1;
9056
9257
  row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
9057
9258
  column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
9058
- align-self: stretch;
9259
+ align-self: center;
9059
9260
  order: var(--pf-v6-c-masthead__content--Order);
9060
9261
  min-width: 0.25rem;
9061
9262
  }
@@ -9739,7 +9940,6 @@ ul.pf-v6-c-list {
9739
9940
  z-index: var(--pf-v6-c-menu--ZIndex);
9740
9941
  margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
9741
9942
  margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
9742
- overflow: hidden;
9743
9943
  }
9744
9944
  .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
9745
9945
  padding-block-start: var(--pf-v6-c-menu--RowGap);
@@ -9963,16 +10163,16 @@ ul.pf-v6-c-list {
9963
10163
  opacity: 0;
9964
10164
  }
9965
10165
 
9966
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
10166
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
9967
10167
  .pf-v6-c-menu__item-action.pf-m-favorited,
9968
10168
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
9969
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
10169
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
9970
10170
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9971
10171
  }
9972
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
10172
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
9973
10173
  .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
9974
10174
  .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
9975
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
10175
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
9976
10176
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9977
10177
  }
9978
10178
 
@@ -10102,7 +10302,7 @@ ul.pf-v6-c-list {
10102
10302
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
10103
10303
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
10104
10304
  --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
10105
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-v6-c-menu-toggle--BorderRadius);
10305
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
10106
10306
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
10107
10307
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
10108
10308
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -10117,12 +10317,16 @@ ul.pf-v6-c-list {
10117
10317
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
10118
10318
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
10119
10319
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
10320
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
10321
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
10120
10322
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10121
10323
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10122
10324
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
10123
10325
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
10124
10326
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
10125
10327
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
10328
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
10329
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
10126
10330
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
10127
10331
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
10128
10332
  }
@@ -10271,6 +10475,28 @@ ul.pf-v6-c-list {
10271
10475
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
10272
10476
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
10273
10477
  }
10478
+ @media screen and (prefers-reduced-motion: no-preference) {
10479
+ .pf-v6-c-menu-toggle.pf-m-danger {
10480
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
10481
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
10482
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
10483
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
10484
+ animation-fill-mode: both;
10485
+ }
10486
+ }
10487
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
10488
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
10489
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
10490
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
10491
+ }
10492
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
10493
+ from {
10494
+ opacity: 0;
10495
+ }
10496
+ to {
10497
+ opacity: 1;
10498
+ }
10499
+ }
10274
10500
  .pf-v6-c-menu-toggle.pf-m-placeholder {
10275
10501
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
10276
10502
  }
@@ -10286,6 +10512,21 @@ ul.pf-v6-c-list {
10286
10512
  pointer-events: none;
10287
10513
  }
10288
10514
 
10515
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
10516
+ syntax: "<length>";
10517
+ inherits: false;
10518
+ initial-value: 0;
10519
+ }
10520
+ @media (prefers-reduced-motion: no-preference) {
10521
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
10522
+ 33% {
10523
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
10524
+ }
10525
+ 66% {
10526
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
10527
+ }
10528
+ }
10529
+ }
10289
10530
  .pf-v6-c-menu-toggle.pf-m-split-button {
10290
10531
  --pf-v6-c-menu-toggle--Gap: 0;
10291
10532
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
@@ -10875,13 +11116,15 @@ ul.pf-v6-c-list {
10875
11116
  --pf-v6-c-nav__item--ScrollSnapAlign: end;
10876
11117
  --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
10877
11118
  --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
10878
- --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
10879
- --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
11119
+ --pf-v6-c-nav__section-title--PaddingBlockStart: 0;
11120
+ --pf-v6-c-nav__section-title--PaddingBlockEnd: 0;
10880
11121
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
10881
11122
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
10882
11123
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
10883
11124
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
10884
11125
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
11126
+ --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
11127
+ --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
10885
11128
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
10886
11129
  --pf-v6-c-nav__link--AlignItems: baseline;
10887
11130
  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -10892,10 +11135,19 @@ ul.pf-v6-c-list {
10892
11135
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
10893
11136
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
10894
11137
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
11138
+ --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default);
11139
+ --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
11140
+ --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short);
11141
+ --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
10895
11142
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
10896
11143
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
10897
11144
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
11145
+ --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11146
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
10898
11147
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11148
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--slide-in--default);
11149
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--slide-in--short);
11150
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
10899
11151
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
10900
11152
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
10901
11153
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -10989,25 +11241,41 @@ ul.pf-v6-c-list {
10989
11241
  .pf-v6-c-nav__list {
10990
11242
  row-gap: var(--pf-v6-c-nav__list--RowGap);
10991
11243
  column-gap: var(--pf-v6-c-nav__list--ColumnGap);
11244
+ min-height: 0;
10992
11245
  }
10993
11246
 
10994
11247
  .pf-v6-c-nav__subnav {
10995
11248
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11249
+ grid-template-rows: 1fr;
11250
+ min-height: 0;
11251
+ padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11252
+ padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
10996
11253
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11254
+ overflow-y: clip;
11255
+ transition-delay: 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
11256
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
11257
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
11258
+ transition-property: opacity, visibility, grid-template-rows, padding-block-start, padding-block-end;
11259
+ }
11260
+ .pf-v6-c-nav__subnav[hidden] {
11261
+ --pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
11262
+ --pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
11263
+ --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11264
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11265
+ display: grid;
11266
+ grid-template-rows: 0fr;
11267
+ visibility: hidden;
11268
+ opacity: 0;
10997
11269
  }
10998
11270
 
10999
11271
  .pf-v6-c-nav__item {
11000
- row-gap: var(--pf-v6-c-nav__item--RowGap);
11001
11272
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
11002
11273
  }
11003
11274
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
11004
11275
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
11005
11276
  }
11006
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
11007
- margin-block-end: var(--pf-v6-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v6-c-nav__item--RowGap));
11008
- }
11009
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v6-c-nav__item > .pf-v6-c-nav__link::before {
11010
- inset-block-start: calc(var(--pf-v6-c-nav__item--RowGap) * -1 - var(--pf-v6-c-nav__list--RowGap));
11277
+ .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
11278
+ margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
11011
11279
  }
11012
11280
 
11013
11281
  .pf-v6-c-nav__section {
@@ -11042,9 +11310,9 @@ ul.pf-v6-c-list {
11042
11310
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
11043
11311
  border: none;
11044
11312
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
11045
- }
11046
- .pf-v6-c-nav__link[aria-expanded=true]::before {
11047
- inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11313
+ transition-timing-function: var(--pf-v6-c-nav__link--TransitionTimingFunction--background-color), var(--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color);
11314
+ transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color);
11315
+ transition-property: background-color, color;
11048
11316
  }
11049
11317
  .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
11050
11318
  color: var(--pf-v6-c-nav__link--hover--Color);
@@ -11069,6 +11337,9 @@ ul.pf-v6-c-list {
11069
11337
 
11070
11338
  .pf-v6-c-nav__toggle-icon {
11071
11339
  display: inline-block;
11340
+ transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
11341
+ transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
11342
+ transition-property: transform;
11072
11343
  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
11073
11344
  }
11074
11345
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
@@ -11226,7 +11497,9 @@ ul.pf-v6-c-list {
11226
11497
  --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
11227
11498
  --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
11228
11499
  --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
11229
- --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
11500
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11501
+ --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
11502
+ --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
11230
11503
  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
11231
11504
  }
11232
11505
 
@@ -11508,12 +11781,18 @@ ul.pf-v6-c-list {
11508
11781
  --pf-v6-c-page__main-container--GridArea: main;
11509
11782
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
11510
11783
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
11784
+ --pf-v6-c-page__main-container--AlignSelf: start;
11511
11785
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11512
11786
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
11513
11787
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
11514
11788
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
11515
11789
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
11516
11790
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11791
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
11792
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
11793
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
11794
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
11795
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
11517
11796
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11518
11797
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11519
11798
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -11871,7 +12150,7 @@ ul.pf-v6-c-list {
11871
12150
  .pf-v6-c-page__main-container {
11872
12151
  display: flex;
11873
12152
  flex-direction: column;
11874
- align-self: start;
12153
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
11875
12154
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
11876
12155
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
11877
12156
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -11879,6 +12158,15 @@ ul.pf-v6-c-list {
11879
12158
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
11880
12159
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
11881
12160
  }
12161
+ @media screen and (max-width: calc(48rem - 1px)) {
12162
+ .pf-v6-c-page__main-container {
12163
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
12164
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12165
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12166
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
12167
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
12168
+ }
12169
+ }
11882
12170
 
11883
12171
  .pf-v6-c-page__main-container,
11884
12172
  .pf-v6-c-page__drawer {
@@ -14539,7 +14827,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14539
14827
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
14540
14828
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
14541
14829
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
14542
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
14830
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14831
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
14832
+ --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
14543
14833
  --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
14544
14834
  }
14545
14835
 
@@ -14754,7 +15044,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14754
15044
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
14755
15045
  --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
14756
15046
  --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart));
14757
- --pf-v6-c-table__toggle__icon--Transition: .2s ease-in 0s;
15047
+ --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
15048
+ --pf-v6-c-table__toggle__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
15049
+ --pf-v6-c-table__toggle__icon--Transition: transform var(--pf-v6-c-table__toggle__icon--TransitionDuration) var(--pf-v6-c-table__toggle__icon--TransitionTimingFunction);
14758
15050
  --pf-v6-c-table__toggle--m-expanded__icon--Rotate: 180deg;
14759
15051
  }
14760
15052
 
@@ -16321,7 +16613,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16321
16613
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16322
16614
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16323
16615
  --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
16324
- --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
16616
+ --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
16325
16617
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
16326
16618
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
16327
16619
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -16819,7 +17111,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16819
17111
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
16820
17112
  }
16821
17113
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
16822
- transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
17114
+ transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
17115
+ transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
17116
+ transition-property: transform;
16823
17117
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
16824
17118
  }
16825
17119
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
@@ -16854,13 +17148,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
16854
17148
  vertical-align: baseline;
16855
17149
  }
16856
17150
 
16857
- .pf-v6-c-table__favorite .pf-v6-c-button {
17151
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
16858
17152
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
16859
17153
  }
16860
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
17154
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
16861
17155
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16862
17156
  }
16863
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17157
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
16864
17158
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16865
17159
  }
16866
17160
 
@@ -18127,7 +18421,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18127
18421
  --pf-v6-c-tabs__item--ScrollSnapAlign: end;
18128
18422
  --pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis: y;
18129
18423
  --pf-v6-c-tabs__toggle--Display: flex;
18130
- --pf-v6-c-tabs__toggle-icon--Transition: all 250ms cubic-bezier(.42, 0, .58, 1);
18424
+ --pf-v6-c-tabs__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18425
+ --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
18426
+ --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
18131
18427
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
18132
18428
  --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
18133
18429
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
@@ -18147,7 +18443,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18147
18443
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18148
18444
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
18149
18445
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
18150
- --pf-v6-c-tabs__link-toggle-icon--Transition: .2s ease-in 0s;
18446
+ --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18447
+ --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
18448
+ --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
18151
18449
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
18152
18450
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
18153
18451
  --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
@@ -19442,7 +19740,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19442
19740
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19443
19741
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19444
19742
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
19445
- --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
19743
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
19446
19744
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19447
19745
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
19448
19746
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
@@ -19622,13 +19920,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19622
19920
  }
19623
19921
  .pf-v6-c-toolbar.pf-m-full-height {
19624
19922
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
19625
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
19923
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
19626
19924
  }
19627
19925
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
19628
19926
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
19629
19927
  align-items: stretch;
19630
19928
  align-self: stretch;
19631
19929
  }
19930
+ .pf-v6-c-toolbar.pf-m-no-padding {
19931
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
19932
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
19933
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
19934
+ }
19632
19935
  .pf-v6-c-toolbar.pf-m-primary {
19633
19936
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
19634
19937
  }
@@ -19775,7 +20078,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19775
20078
 
19776
20079
  .pf-v6-c-toolbar__expand-all-icon {
19777
20080
  display: inline-flex;
19778
- transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
20081
+ transition-timing-function: var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
20082
+ transition-duration: var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration);
20083
+ transition-property: transform;
19779
20084
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
19780
20085
  }
19781
20086
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
@@ -22007,7 +22312,7 @@ label.pf-v6-c-tree-view__node-text {
22007
22312
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
22008
22313
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22009
22314
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
22010
- --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
22315
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
22011
22316
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
22012
22317
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
22013
22318
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
@@ -22413,7 +22718,9 @@ label.pf-v6-c-tree-view__node-text {
22413
22718
 
22414
22719
  .pf-v6-c-wizard__nav-link-toggle-icon {
22415
22720
  display: inline-block;
22416
- transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
22721
+ transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
22722
+ transition-duration: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration);
22723
+ transition-property: transform;
22417
22724
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
22418
22725
  }
22419
22726
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {