@patternfly/patternfly 6.3.0-prerelease.25 → 6.3.0-prerelease.27

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 (60) hide show
  1. package/base/patternfly-common.css +35 -0
  2. package/base/patternfly-common.scss +46 -1
  3. package/components/Button/button.css +103 -0
  4. package/components/Button/button.scss +103 -2
  5. package/components/FormControl/form-control.css +16 -0
  6. package/components/FormControl/form-control.scss +9 -0
  7. package/components/MenuToggle/menu-toggle.css +30 -0
  8. package/components/MenuToggle/menu-toggle.scss +33 -0
  9. package/components/Page/page.css +45 -0
  10. package/components/Page/page.scss +29 -0
  11. package/components/Progress/progress.css +16 -0
  12. package/components/Progress/progress.scss +11 -1
  13. package/components/TextInputGroup/text-input-group.css +16 -0
  14. package/components/TextInputGroup/text-input-group.scss +8 -0
  15. package/components/_index.css +226 -0
  16. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  17. package/docs/components/Button/examples/Button.md +85 -3
  18. package/docs/components/Card/examples/Card.md +8 -8
  19. package/docs/components/DataList/examples/DataList.md +23 -23
  20. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  21. package/docs/components/Hint/examples/Hint.md +3 -3
  22. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  23. package/docs/components/Masthead/examples/masthead.md +90 -12
  24. package/docs/components/Menu/examples/Menu.md +2 -2
  25. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  26. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  27. package/docs/components/Page/examples/Page.md +147 -14
  28. package/docs/components/Pagination/examples/Pagination.md +12 -12
  29. package/docs/components/Table/examples/Table.md +240 -240
  30. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  31. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  32. package/docs/demos/Alert/examples/Alert.md +66 -9
  33. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  34. package/docs/demos/Banner/examples/Banner.md +47 -6
  35. package/docs/demos/Card/examples/Card.md +4 -4
  36. package/docs/demos/CardView/examples/CardView.md +24 -5
  37. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  38. package/docs/demos/DataList/examples/DataList.md +100 -24
  39. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
  40. package/docs/demos/Drawer/examples/Drawer.md +110 -15
  41. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  42. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  43. package/docs/demos/Modal/examples/Modal.md +132 -18
  44. package/docs/demos/Nav/examples/Nav.md +111 -16
  45. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  46. package/docs/demos/Page/examples/Page.md +309 -43
  47. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
  48. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  49. package/docs/demos/Table/examples/Table.md +435 -150
  50. package/docs/demos/Tabs/examples/Tabs.md +137 -23
  51. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  52. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  53. package/package.json +2 -2
  54. package/patternfly-base-no-globals.css +34 -0
  55. package/patternfly-base.css +34 -0
  56. package/patternfly-no-globals.css +260 -0
  57. package/patternfly.css +260 -0
  58. package/patternfly.min.css +1 -1
  59. package/patternfly.min.css.map +1 -1
  60. package/sass-utilities/mixins.scss +54 -0
@@ -58,6 +58,40 @@
58
58
  --pf-t--global--duration--50: 1ms !important;
59
59
  }
60
60
 
61
+ :root {
62
+ --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
63
+ --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
64
+ }
65
+
66
+ @property --pf-v6-global--danger-jiggle--TranslateX {
67
+ syntax: "<length>";
68
+ inherits: false;
69
+ initial-value: 0;
70
+ }
71
+ @keyframes pf-v6-global-danger-jiggle-motion {
72
+ 33% {
73
+ --pf-v6-global--danger-jiggle--TranslateX: -2px;
74
+ }
75
+ 66% {
76
+ --pf-v6-global--danger-jiggle--TranslateX: 3px;
77
+ }
78
+ }
79
+ @keyframes pf-v6-global-fade-in {
80
+ from {
81
+ opacity: 0;
82
+ }
83
+ to {
84
+ opacity: 1;
85
+ }
86
+ }
87
+ @keyframes pf-v6-global-fade-out {
88
+ from {
89
+ opacity: 1;
90
+ }
91
+ to {
92
+ opacity: 0;
93
+ }
94
+ }
61
95
  @font-face {
62
96
  font-family: "Red Hat Text";
63
97
  font-style: normal;
@@ -9009,6 +9043,7 @@ button.pf-v6-c-breadcrumb__link {
9009
9043
  --pf-v6-c-button--TextDecorationLine: none;
9010
9044
  --pf-v6-c-button--TextDecorationStyle: none;
9011
9045
  --pf-v6-c-button--TextDecorationColor: currentcolor;
9046
+ --pf-v6-c-button--TransitionDelay: 0s;
9012
9047
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9013
9048
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9014
9049
  --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
@@ -9227,6 +9262,16 @@ button.pf-v6-c-breadcrumb__link {
9227
9262
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9228
9263
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
9229
9264
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
9265
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9266
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
9267
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9268
+ --pf-v6-c-button__icon--TransitionProperty: none;
9269
+ --pf-v6-c-button__icon--Rotate: 0deg;
9270
+ --pf-v6-c-button__icon--Scale: 1;
9271
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
9272
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9273
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
9274
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
9230
9275
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
9231
9276
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9232
9277
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -9252,9 +9297,28 @@ button.pf-v6-c-breadcrumb__link {
9252
9297
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
9253
9298
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
9254
9299
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
9300
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9301
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9302
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9303
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9304
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
9255
9305
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
9256
9306
  --pf-v6-c-button--m-block--Display: flex;
9257
9307
  --pf-v6-c-button--m-block--Width: 100%;
9308
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9309
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
9310
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
9311
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
9312
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
9313
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
9314
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
9315
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
9316
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
9317
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
9318
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
9319
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
9320
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
9321
+ --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
9258
9322
  }
9259
9323
 
9260
9324
  .pf-v6-c-button {
@@ -9286,9 +9350,11 @@ button.pf-v6-c-breadcrumb__link {
9286
9350
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
9287
9351
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
9288
9352
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
9353
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
9289
9354
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
9290
9355
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
9291
9356
  transition-property: var(--pf-v6-c-button--TransitionProperty);
9357
+ scale: var(--pf-v6-c-button--Scale, revert);
9292
9358
  }
9293
9359
  .pf-v6-c-button::after {
9294
9360
  position: absolute;
@@ -9558,7 +9624,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9558
9624
  }
9559
9625
  .pf-v6-c-button.pf-m-favorited {
9560
9626
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9627
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9561
9628
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9629
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9562
9630
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
9563
9631
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
9564
9632
  }
@@ -9567,6 +9635,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9567
9635
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
9568
9636
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
9569
9637
  }
9638
+ .pf-v6-c-button.pf-m-settings {
9639
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
9640
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
9641
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
9642
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
9643
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
9644
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
9645
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
9646
+ }
9647
+ .pf-v6-c-button.pf-m-hamburger {
9648
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9649
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9650
+ --pf-v6-c-button__icon--TransitionProperty: scale;
9651
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9652
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9653
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
9654
+ }
9655
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
9656
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9657
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9658
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9659
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9660
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9661
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9662
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9663
+ }
9664
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
9665
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9666
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9667
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9668
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9669
+ --pf-v6-c-button__icon--Scale: 1;
9670
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9671
+ --pf-v6-c-button--hover__icon--Scale: 1;
9672
+ }
9570
9673
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
9571
9674
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
9572
9675
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -9574,6 +9677,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9574
9677
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
9575
9678
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
9576
9679
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
9680
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
9681
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
9682
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
9683
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
9577
9684
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
9578
9685
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
9579
9686
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
@@ -9636,6 +9743,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9636
9743
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
9637
9744
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
9638
9745
  color: var(--pf-v6-c-button__icon--Color);
9746
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
9747
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
9748
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
9749
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
9750
+ rotate: var(--pf-v6-c-button__icon--Rotate);
9751
+ scale: var(--pf-v6-c-button__icon--Scale);
9639
9752
  }
9640
9753
  .pf-v6-c-button__icon.pf-m-start {
9641
9754
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -9680,6 +9793,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9680
9793
  align-items: center;
9681
9794
  }
9682
9795
 
9796
+ .pf-v6-c-button--hamburger-icon path {
9797
+ fill: none;
9798
+ stroke: currentcolor;
9799
+ stroke-linecap: round;
9800
+ stroke-linejoin: round;
9801
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
9802
+ }
9803
+
9804
+ .pf-v6-c-button--hamburger-icon--top {
9805
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
9806
+ }
9807
+
9808
+ .pf-v6-c-button--hamburger-icon--middle {
9809
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
9810
+ }
9811
+
9812
+ .pf-v6-c-button--hamburger-icon--arrow {
9813
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
9814
+ }
9815
+
9816
+ .pf-v6-c-button--hamburger-icon--bottom {
9817
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
9818
+ }
9819
+
9683
9820
  @keyframes pf-v6-c-button-icon-notify {
9684
9821
  33% {
9685
9822
  transform: rotate(30deg);
@@ -14864,6 +15001,22 @@ ul) {
14864
15001
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
14865
15002
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
14866
15003
  }
15004
+ @media (prefers-reduced-motion: no-preference) {
15005
+ .pf-v6-c-form-control.pf-m-error {
15006
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
15007
+ animation-name: pf-v6-global-danger-jiggle-motion;
15008
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
15009
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
15010
+ animation-fill-mode: both;
15011
+ }
15012
+ }
15013
+ .pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
15014
+ --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
15015
+ --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
15016
+ animation-name: pf-v6-global-fade-in;
15017
+ animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
15018
+ animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
15019
+ }
14867
15020
  .pf-v6-c-form-control.pf-m-error > textarea {
14868
15021
  padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
14869
15022
  }
@@ -17966,6 +18119,14 @@ ul.pf-v6-c-list {
17966
18119
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17967
18120
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17968
18121
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
18122
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
18123
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
18124
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
18125
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
18126
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
18127
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
18128
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
18129
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
17969
18130
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17970
18131
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
17971
18132
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -18063,6 +18224,11 @@ ul.pf-v6-c-list {
18063
18224
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
18064
18225
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
18065
18226
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
18227
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18228
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
18229
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18230
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18231
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
18066
18232
  }
18067
18233
 
18068
18234
  .pf-v6-c-menu-toggle {
@@ -18176,6 +18342,10 @@ ul.pf-v6-c-list {
18176
18342
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
18177
18343
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
18178
18344
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
18345
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
18346
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
18347
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
18348
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
18179
18349
  }
18180
18350
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
18181
18351
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -18231,6 +18401,15 @@ ul.pf-v6-c-list {
18231
18401
  opacity: 1;
18232
18402
  }
18233
18403
  }
18404
+ .pf-v6-c-menu-toggle.pf-m-settings {
18405
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
18406
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
18407
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
18408
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
18409
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
18410
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
18411
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
18412
+ }
18234
18413
  .pf-v6-c-menu-toggle.pf-m-placeholder {
18235
18414
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
18236
18415
  }
@@ -18392,6 +18571,10 @@ ul.pf-v6-c-list {
18392
18571
 
18393
18572
  .pf-v6-c-menu-toggle__icon {
18394
18573
  flex-shrink: 0;
18574
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
18575
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
18576
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
18577
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
18395
18578
  }
18396
18579
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
18397
18580
  vertical-align: middle;
@@ -19608,6 +19791,51 @@ ul.pf-v6-c-list {
19608
19791
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
19609
19792
  }
19610
19793
  }
19794
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19795
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19796
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19797
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19798
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19799
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19800
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19801
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19802
+ }
19803
+ .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
19804
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19805
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19806
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19807
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19808
+ --pf-v6-c-button__icon--Scale: 1;
19809
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19810
+ --pf-v6-c-button--hover__icon--Scale: 1;
19811
+ }
19812
+ @media (min-width: 75rem) {
19813
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
19814
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
19815
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
19816
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
19817
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19818
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19819
+ }
19820
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19821
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19822
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19823
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19824
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19825
+ --pf-v6-c-button__icon--Scale: 1;
19826
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19827
+ --pf-v6-c-button--hover__icon--Scale: 1;
19828
+ }
19829
+ .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19830
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19831
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19832
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19833
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19834
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19835
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19836
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19837
+ }
19838
+ }
19611
19839
 
19612
19840
  .pf-v6-c-page > .pf-v6-c-masthead {
19613
19841
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
@@ -20905,6 +21133,22 @@ ul.pf-v6-c-list {
20905
21133
  --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
20906
21134
  --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
20907
21135
  }
21136
+ @media (prefers-reduced-motion: no-preference) {
21137
+ .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
21138
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
21139
+ animation-name: pf-v6-global-danger-jiggle-motion;
21140
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
21141
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
21142
+ animation-fill-mode: both;
21143
+ }
21144
+ }
21145
+ .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
21146
+ --pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
21147
+ --pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
21148
+ animation-name: pf-v6-global-fade-in;
21149
+ animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
21150
+ animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
21151
+ }
20908
21152
 
20909
21153
  .pf-v6-c-progress__description {
20910
21154
  grid-column: 1/2;
@@ -27124,6 +27368,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27124
27368
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
27125
27369
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
27126
27370
  }
27371
+ @media (prefers-reduced-motion: no-preference) {
27372
+ .pf-v6-c-text-input-group.pf-m-error {
27373
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
27374
+ animation-name: pf-v6-global-danger-jiggle-motion;
27375
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
27376
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
27377
+ animation-fill-mode: both;
27378
+ }
27379
+ }
27380
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
27381
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
27382
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
27383
+ animation-name: pf-v6-global-fade-in;
27384
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
27385
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
27386
+ }
27127
27387
  .pf-v6-c-text-input-group:hover {
27128
27388
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
27129
27389
  }