@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
package/patternfly.css CHANGED
@@ -194,6 +194,40 @@ button) {
194
194
  --pf-t--global--duration--50: 1ms !important;
195
195
  }
196
196
 
197
+ :root {
198
+ --pf-v6-global--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
199
+ --pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
200
+ }
201
+
202
+ @property --pf-v6-global--danger-jiggle--TranslateX {
203
+ syntax: "<length>";
204
+ inherits: false;
205
+ initial-value: 0;
206
+ }
207
+ @keyframes pf-v6-global-danger-jiggle-motion {
208
+ 33% {
209
+ --pf-v6-global--danger-jiggle--TranslateX: -2px;
210
+ }
211
+ 66% {
212
+ --pf-v6-global--danger-jiggle--TranslateX: 3px;
213
+ }
214
+ }
215
+ @keyframes pf-v6-global-fade-in {
216
+ from {
217
+ opacity: 0;
218
+ }
219
+ to {
220
+ opacity: 1;
221
+ }
222
+ }
223
+ @keyframes pf-v6-global-fade-out {
224
+ from {
225
+ opacity: 1;
226
+ }
227
+ to {
228
+ opacity: 0;
229
+ }
230
+ }
197
231
  @font-face {
198
232
  font-family: "Red Hat Text";
199
233
  font-style: normal;
@@ -9145,6 +9179,7 @@ button.pf-v6-c-breadcrumb__link {
9145
9179
  --pf-v6-c-button--TextDecorationLine: none;
9146
9180
  --pf-v6-c-button--TextDecorationStyle: none;
9147
9181
  --pf-v6-c-button--TextDecorationColor: currentcolor;
9182
+ --pf-v6-c-button--TransitionDelay: 0s;
9148
9183
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9149
9184
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9150
9185
  --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
@@ -9363,6 +9398,16 @@ button.pf-v6-c-breadcrumb__link {
9363
9398
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9364
9399
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
9365
9400
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
9401
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9402
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
9403
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9404
+ --pf-v6-c-button__icon--TransitionProperty: none;
9405
+ --pf-v6-c-button__icon--Rotate: 0deg;
9406
+ --pf-v6-c-button__icon--Scale: 1;
9407
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
9408
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9409
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
9410
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
9366
9411
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
9367
9412
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9368
9413
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -9388,9 +9433,28 @@ button.pf-v6-c-breadcrumb__link {
9388
9433
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
9389
9434
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
9390
9435
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
9436
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9437
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9438
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9439
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9440
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
9391
9441
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
9392
9442
  --pf-v6-c-button--m-block--Display: flex;
9393
9443
  --pf-v6-c-button--m-block--Width: 100%;
9444
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9445
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
9446
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
9447
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
9448
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
9449
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
9450
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
9451
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
9452
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
9453
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
9454
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
9455
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
9456
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
9457
+ --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
9394
9458
  }
9395
9459
 
9396
9460
  .pf-v6-c-button {
@@ -9422,9 +9486,11 @@ button.pf-v6-c-breadcrumb__link {
9422
9486
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
9423
9487
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
9424
9488
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
9489
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
9425
9490
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
9426
9491
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
9427
9492
  transition-property: var(--pf-v6-c-button--TransitionProperty);
9493
+ scale: var(--pf-v6-c-button--Scale, revert);
9428
9494
  }
9429
9495
  .pf-v6-c-button::after {
9430
9496
  position: absolute;
@@ -9694,7 +9760,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9694
9760
  }
9695
9761
  .pf-v6-c-button.pf-m-favorited {
9696
9762
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9763
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9697
9764
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9765
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9698
9766
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
9699
9767
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
9700
9768
  }
@@ -9703,6 +9771,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9703
9771
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
9704
9772
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
9705
9773
  }
9774
+ .pf-v6-c-button.pf-m-settings {
9775
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
9776
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
9777
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
9778
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
9779
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
9780
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
9781
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
9782
+ }
9783
+ .pf-v6-c-button.pf-m-hamburger {
9784
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9785
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9786
+ --pf-v6-c-button__icon--TransitionProperty: scale;
9787
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9788
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9789
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
9790
+ }
9791
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
9792
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9793
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9794
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9795
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9796
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9797
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9798
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9799
+ }
9800
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
9801
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9802
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9803
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9804
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9805
+ --pf-v6-c-button__icon--Scale: 1;
9806
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9807
+ --pf-v6-c-button--hover__icon--Scale: 1;
9808
+ }
9706
9809
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
9707
9810
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
9708
9811
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -9710,6 +9813,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9710
9813
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
9711
9814
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
9712
9815
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
9816
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
9817
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
9818
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
9819
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
9713
9820
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
9714
9821
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
9715
9822
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
@@ -9772,6 +9879,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9772
9879
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
9773
9880
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
9774
9881
  color: var(--pf-v6-c-button__icon--Color);
9882
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
9883
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
9884
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
9885
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
9886
+ rotate: var(--pf-v6-c-button__icon--Rotate);
9887
+ scale: var(--pf-v6-c-button__icon--Scale);
9775
9888
  }
9776
9889
  .pf-v6-c-button__icon.pf-m-start {
9777
9890
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -9816,6 +9929,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9816
9929
  align-items: center;
9817
9930
  }
9818
9931
 
9932
+ .pf-v6-c-button--hamburger-icon path {
9933
+ fill: none;
9934
+ stroke: currentcolor;
9935
+ stroke-linecap: round;
9936
+ stroke-linejoin: round;
9937
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
9938
+ }
9939
+
9940
+ .pf-v6-c-button--hamburger-icon--top {
9941
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
9942
+ }
9943
+
9944
+ .pf-v6-c-button--hamburger-icon--middle {
9945
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
9946
+ }
9947
+
9948
+ .pf-v6-c-button--hamburger-icon--arrow {
9949
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
9950
+ }
9951
+
9952
+ .pf-v6-c-button--hamburger-icon--bottom {
9953
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
9954
+ }
9955
+
9819
9956
  @keyframes pf-v6-c-button-icon-notify {
9820
9957
  33% {
9821
9958
  transform: rotate(30deg);
@@ -15000,6 +15137,22 @@ ul) {
15000
15137
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
15001
15138
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
15002
15139
  }
15140
+ @media (prefers-reduced-motion: no-preference) {
15141
+ .pf-v6-c-form-control.pf-m-error {
15142
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
15143
+ animation-name: pf-v6-global-danger-jiggle-motion;
15144
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
15145
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
15146
+ animation-fill-mode: both;
15147
+ }
15148
+ }
15149
+ .pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
15150
+ --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
15151
+ --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
15152
+ animation-name: pf-v6-global-fade-in;
15153
+ animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
15154
+ animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
15155
+ }
15003
15156
  .pf-v6-c-form-control.pf-m-error > textarea {
15004
15157
  padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
15005
15158
  }
@@ -18102,6 +18255,14 @@ ul.pf-v6-c-list {
18102
18255
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
18103
18256
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
18104
18257
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
18258
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
18259
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
18260
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
18261
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
18262
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
18263
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
18264
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
18265
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
18105
18266
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
18106
18267
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
18107
18268
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -18199,6 +18360,11 @@ ul.pf-v6-c-list {
18199
18360
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
18200
18361
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
18201
18362
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
18363
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18364
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
18365
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18366
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18367
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
18202
18368
  }
18203
18369
 
18204
18370
  .pf-v6-c-menu-toggle {
@@ -18312,6 +18478,10 @@ ul.pf-v6-c-list {
18312
18478
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
18313
18479
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
18314
18480
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
18481
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
18482
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
18483
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
18484
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
18315
18485
  }
18316
18486
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
18317
18487
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -18367,6 +18537,15 @@ ul.pf-v6-c-list {
18367
18537
  opacity: 1;
18368
18538
  }
18369
18539
  }
18540
+ .pf-v6-c-menu-toggle.pf-m-settings {
18541
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
18542
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
18543
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
18544
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
18545
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
18546
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
18547
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
18548
+ }
18370
18549
  .pf-v6-c-menu-toggle.pf-m-placeholder {
18371
18550
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
18372
18551
  }
@@ -18528,6 +18707,10 @@ ul.pf-v6-c-list {
18528
18707
 
18529
18708
  .pf-v6-c-menu-toggle__icon {
18530
18709
  flex-shrink: 0;
18710
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
18711
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
18712
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
18713
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
18531
18714
  }
18532
18715
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
18533
18716
  vertical-align: middle;
@@ -19744,6 +19927,51 @@ ul.pf-v6-c-list {
19744
19927
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
19745
19928
  }
19746
19929
  }
19930
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19931
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19932
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19933
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19934
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19935
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19936
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19937
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19938
+ }
19939
+ .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) {
19940
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19941
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19942
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19943
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19944
+ --pf-v6-c-button__icon--Scale: 1;
19945
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19946
+ --pf-v6-c-button--hover__icon--Scale: 1;
19947
+ }
19948
+ @media (min-width: 75rem) {
19949
+ .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) {
19950
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
19951
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
19952
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
19953
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19954
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19955
+ }
19956
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19957
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19958
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19959
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19960
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19961
+ --pf-v6-c-button__icon--Scale: 1;
19962
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19963
+ --pf-v6-c-button--hover__icon--Scale: 1;
19964
+ }
19965
+ .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) {
19966
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19967
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19968
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19969
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19970
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19971
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19972
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19973
+ }
19974
+ }
19747
19975
 
19748
19976
  .pf-v6-c-page > .pf-v6-c-masthead {
19749
19977
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
@@ -21041,6 +21269,22 @@ ul.pf-v6-c-list {
21041
21269
  --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
21042
21270
  --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
21043
21271
  }
21272
+ @media (prefers-reduced-motion: no-preference) {
21273
+ .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
21274
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
21275
+ animation-name: pf-v6-global-danger-jiggle-motion;
21276
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
21277
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
21278
+ animation-fill-mode: both;
21279
+ }
21280
+ }
21281
+ .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
21282
+ --pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
21283
+ --pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
21284
+ animation-name: pf-v6-global-fade-in;
21285
+ animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
21286
+ animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
21287
+ }
21044
21288
 
21045
21289
  .pf-v6-c-progress__description {
21046
21290
  grid-column: 1/2;
@@ -27260,6 +27504,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
27260
27504
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
27261
27505
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
27262
27506
  }
27507
+ @media (prefers-reduced-motion: no-preference) {
27508
+ .pf-v6-c-text-input-group.pf-m-error {
27509
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
27510
+ animation-name: pf-v6-global-danger-jiggle-motion;
27511
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
27512
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
27513
+ animation-fill-mode: both;
27514
+ }
27515
+ }
27516
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
27517
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
27518
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
27519
+ animation-name: pf-v6-global-fade-in;
27520
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
27521
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
27522
+ }
27263
27523
  .pf-v6-c-text-input-group:hover {
27264
27524
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
27265
27525
  }