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

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 (50) hide show
  1. package/components/Button/button.css +103 -0
  2. package/components/Button/button.scss +103 -2
  3. package/components/MenuToggle/menu-toggle.css +30 -0
  4. package/components/MenuToggle/menu-toggle.scss +33 -0
  5. package/components/Page/page.css +45 -0
  6. package/components/Page/page.scss +29 -0
  7. package/components/_index.css +178 -0
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  9. package/docs/components/Button/examples/Button.md +85 -3
  10. package/docs/components/Card/examples/Card.md +8 -8
  11. package/docs/components/DataList/examples/DataList.md +23 -23
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  13. package/docs/components/Hint/examples/Hint.md +3 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  15. package/docs/components/Masthead/examples/masthead.md +90 -12
  16. package/docs/components/Menu/examples/Menu.md +2 -2
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  18. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  19. package/docs/components/Page/examples/Page.md +147 -14
  20. package/docs/components/Pagination/examples/Pagination.md +12 -12
  21. package/docs/components/Table/examples/Table.md +240 -240
  22. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  23. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  24. package/docs/demos/Alert/examples/Alert.md +66 -9
  25. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  26. package/docs/demos/Banner/examples/Banner.md +47 -6
  27. package/docs/demos/Card/examples/Card.md +4 -4
  28. package/docs/demos/CardView/examples/CardView.md +24 -5
  29. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  30. package/docs/demos/DataList/examples/DataList.md +100 -24
  31. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
  32. package/docs/demos/Drawer/examples/Drawer.md +110 -15
  33. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  34. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  35. package/docs/demos/Modal/examples/Modal.md +132 -18
  36. package/docs/demos/Nav/examples/Nav.md +111 -16
  37. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  38. package/docs/demos/Page/examples/Page.md +309 -43
  39. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
  40. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  41. package/docs/demos/Table/examples/Table.md +435 -150
  42. package/docs/demos/Tabs/examples/Tabs.md +137 -23
  43. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  44. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  45. package/package.json +1 -1
  46. package/patternfly-no-globals.css +178 -0
  47. package/patternfly.css +178 -0
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/mixins.scss +35 -0
package/patternfly-no-globals.css CHANGED
@@ -9009,6 +9009,7 @@ button.pf-v6-c-breadcrumb__link {
9009
9009
  --pf-v6-c-button--TextDecorationLine: none;
9010
9010
  --pf-v6-c-button--TextDecorationStyle: none;
9011
9011
  --pf-v6-c-button--TextDecorationColor: currentcolor;
9012
+ --pf-v6-c-button--TransitionDelay: 0s;
9012
9013
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9013
9014
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9014
9015
  --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
@@ -9227,6 +9228,16 @@ button.pf-v6-c-breadcrumb__link {
9227
9228
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9228
9229
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
9229
9230
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
9231
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9232
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
9233
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9234
+ --pf-v6-c-button__icon--TransitionProperty: none;
9235
+ --pf-v6-c-button__icon--Rotate: 0deg;
9236
+ --pf-v6-c-button__icon--Scale: 1;
9237
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
9238
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9239
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
9240
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
9230
9241
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
9231
9242
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9232
9243
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -9252,9 +9263,28 @@ button.pf-v6-c-breadcrumb__link {
9252
9263
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
9253
9264
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
9254
9265
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
9266
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9267
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9268
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9269
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9270
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
9255
9271
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
9256
9272
  --pf-v6-c-button--m-block--Display: flex;
9257
9273
  --pf-v6-c-button--m-block--Width: 100%;
9274
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9275
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
9276
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
9277
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
9278
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
9279
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
9280
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
9281
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
9282
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
9283
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
9284
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
9285
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
9286
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
9287
+ --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
9258
9288
  }
9259
9289
 
9260
9290
  .pf-v6-c-button {
@@ -9286,9 +9316,11 @@ button.pf-v6-c-breadcrumb__link {
9286
9316
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
9287
9317
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
9288
9318
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
9319
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
9289
9320
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
9290
9321
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
9291
9322
  transition-property: var(--pf-v6-c-button--TransitionProperty);
9323
+ scale: var(--pf-v6-c-button--Scale, revert);
9292
9324
  }
9293
9325
  .pf-v6-c-button::after {
9294
9326
  position: absolute;
@@ -9558,7 +9590,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9558
9590
  }
9559
9591
  .pf-v6-c-button.pf-m-favorited {
9560
9592
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9593
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9561
9594
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9595
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9562
9596
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
9563
9597
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
9564
9598
  }
@@ -9567,6 +9601,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9567
9601
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
9568
9602
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
9569
9603
  }
9604
+ .pf-v6-c-button.pf-m-settings {
9605
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
9606
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
9607
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
9608
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
9609
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
9610
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
9611
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
9612
+ }
9613
+ .pf-v6-c-button.pf-m-hamburger {
9614
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9615
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9616
+ --pf-v6-c-button__icon--TransitionProperty: scale;
9617
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9618
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9619
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
9620
+ }
9621
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
9622
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9623
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9624
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9625
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9626
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9627
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9628
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9629
+ }
9630
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
9631
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9632
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9633
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9634
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9635
+ --pf-v6-c-button__icon--Scale: 1;
9636
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9637
+ --pf-v6-c-button--hover__icon--Scale: 1;
9638
+ }
9570
9639
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
9571
9640
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
9572
9641
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -9574,6 +9643,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9574
9643
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
9575
9644
  --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
9645
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
9646
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
9647
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
9648
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
9649
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
9577
9650
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
9578
9651
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
9579
9652
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
@@ -9636,6 +9709,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9636
9709
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
9637
9710
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
9638
9711
  color: var(--pf-v6-c-button__icon--Color);
9712
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
9713
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
9714
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
9715
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
9716
+ rotate: var(--pf-v6-c-button__icon--Rotate);
9717
+ scale: var(--pf-v6-c-button__icon--Scale);
9639
9718
  }
9640
9719
  .pf-v6-c-button__icon.pf-m-start {
9641
9720
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -9680,6 +9759,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9680
9759
  align-items: center;
9681
9760
  }
9682
9761
 
9762
+ .pf-v6-c-button--hamburger-icon path {
9763
+ fill: none;
9764
+ stroke: currentcolor;
9765
+ stroke-linecap: round;
9766
+ stroke-linejoin: round;
9767
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
9768
+ }
9769
+
9770
+ .pf-v6-c-button--hamburger-icon--top {
9771
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
9772
+ }
9773
+
9774
+ .pf-v6-c-button--hamburger-icon--middle {
9775
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
9776
+ }
9777
+
9778
+ .pf-v6-c-button--hamburger-icon--arrow {
9779
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
9780
+ }
9781
+
9782
+ .pf-v6-c-button--hamburger-icon--bottom {
9783
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
9784
+ }
9785
+
9683
9786
  @keyframes pf-v6-c-button-icon-notify {
9684
9787
  33% {
9685
9788
  transform: rotate(30deg);
@@ -17966,6 +18069,14 @@ ul.pf-v6-c-list {
17966
18069
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17967
18070
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17968
18071
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
18072
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
18073
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
18074
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
18075
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
18076
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
18077
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
18078
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
18079
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
17969
18080
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17970
18081
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
17971
18082
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -18063,6 +18174,11 @@ ul.pf-v6-c-list {
18063
18174
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
18064
18175
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
18065
18176
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
18177
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18178
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
18179
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18180
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18181
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
18066
18182
  }
18067
18183
 
18068
18184
  .pf-v6-c-menu-toggle {
@@ -18176,6 +18292,10 @@ ul.pf-v6-c-list {
18176
18292
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
18177
18293
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
18178
18294
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
18295
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
18296
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
18297
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
18298
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
18179
18299
  }
18180
18300
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
18181
18301
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -18231,6 +18351,15 @@ ul.pf-v6-c-list {
18231
18351
  opacity: 1;
18232
18352
  }
18233
18353
  }
18354
+ .pf-v6-c-menu-toggle.pf-m-settings {
18355
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
18356
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
18357
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
18358
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
18359
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
18360
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
18361
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
18362
+ }
18234
18363
  .pf-v6-c-menu-toggle.pf-m-placeholder {
18235
18364
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
18236
18365
  }
@@ -18392,6 +18521,10 @@ ul.pf-v6-c-list {
18392
18521
 
18393
18522
  .pf-v6-c-menu-toggle__icon {
18394
18523
  flex-shrink: 0;
18524
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
18525
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
18526
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
18527
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
18395
18528
  }
18396
18529
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
18397
18530
  vertical-align: middle;
@@ -19608,6 +19741,51 @@ ul.pf-v6-c-list {
19608
19741
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
19609
19742
  }
19610
19743
  }
19744
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19745
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19746
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19747
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19748
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19749
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19750
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19751
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19752
+ }
19753
+ .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) {
19754
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19755
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19756
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19757
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19758
+ --pf-v6-c-button__icon--Scale: 1;
19759
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19760
+ --pf-v6-c-button--hover__icon--Scale: 1;
19761
+ }
19762
+ @media (min-width: 75rem) {
19763
+ .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) {
19764
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
19765
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
19766
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
19767
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19768
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19769
+ }
19770
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19771
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19772
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19773
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19774
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19775
+ --pf-v6-c-button__icon--Scale: 1;
19776
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19777
+ --pf-v6-c-button--hover__icon--Scale: 1;
19778
+ }
19779
+ .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) {
19780
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19781
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19782
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19783
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19784
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19785
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19786
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19787
+ }
19788
+ }
19611
19789
 
19612
19790
  .pf-v6-c-page > .pf-v6-c-masthead {
19613
19791
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
package/patternfly.css CHANGED
@@ -9145,6 +9145,7 @@ button.pf-v6-c-breadcrumb__link {
9145
9145
  --pf-v6-c-button--TextDecorationLine: none;
9146
9146
  --pf-v6-c-button--TextDecorationStyle: none;
9147
9147
  --pf-v6-c-button--TextDecorationColor: currentcolor;
9148
+ --pf-v6-c-button--TransitionDelay: 0s;
9148
9149
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9149
9150
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9150
9151
  --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
@@ -9363,6 +9364,16 @@ button.pf-v6-c-breadcrumb__link {
9363
9364
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
9364
9365
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
9365
9366
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
9367
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9368
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
9369
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9370
+ --pf-v6-c-button__icon--TransitionProperty: none;
9371
+ --pf-v6-c-button__icon--Rotate: 0deg;
9372
+ --pf-v6-c-button__icon--Scale: 1;
9373
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
9374
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9375
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
9376
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
9366
9377
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
9367
9378
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9368
9379
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -9388,9 +9399,28 @@ button.pf-v6-c-breadcrumb__link {
9388
9399
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
9389
9400
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
9390
9401
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
9402
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9403
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9404
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
9405
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9406
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
9391
9407
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
9392
9408
  --pf-v6-c-button--m-block--Display: flex;
9393
9409
  --pf-v6-c-button--m-block--Width: 100%;
9410
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
9411
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
9412
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
9413
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
9414
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
9415
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
9416
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
9417
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
9418
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
9419
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
9420
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
9421
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
9422
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
9423
+ --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
9394
9424
  }
9395
9425
 
9396
9426
  .pf-v6-c-button {
@@ -9422,9 +9452,11 @@ button.pf-v6-c-breadcrumb__link {
9422
9452
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
9423
9453
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
9424
9454
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
9455
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
9425
9456
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
9426
9457
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
9427
9458
  transition-property: var(--pf-v6-c-button--TransitionProperty);
9459
+ scale: var(--pf-v6-c-button--Scale, revert);
9428
9460
  }
9429
9461
  .pf-v6-c-button::after {
9430
9462
  position: absolute;
@@ -9694,7 +9726,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9694
9726
  }
9695
9727
  .pf-v6-c-button.pf-m-favorited {
9696
9728
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9729
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
9697
9730
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9731
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
9698
9732
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
9699
9733
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
9700
9734
  }
@@ -9703,6 +9737,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9703
9737
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
9704
9738
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
9705
9739
  }
9740
+ .pf-v6-c-button.pf-m-settings {
9741
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
9742
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
9743
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
9744
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
9745
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
9746
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
9747
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
9748
+ }
9749
+ .pf-v6-c-button.pf-m-hamburger {
9750
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9751
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
9752
+ --pf-v6-c-button__icon--TransitionProperty: scale;
9753
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
9754
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
9755
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
9756
+ }
9757
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
9758
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9759
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9760
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9761
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9762
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9763
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9764
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
9765
+ }
9766
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
9767
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
9768
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
9769
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
9770
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
9771
+ --pf-v6-c-button__icon--Scale: 1;
9772
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
9773
+ --pf-v6-c-button--hover__icon--Scale: 1;
9774
+ }
9706
9775
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
9707
9776
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
9708
9777
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -9710,6 +9779,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9710
9779
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
9711
9780
  --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
9781
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
9782
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
9783
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
9784
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
9785
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
9713
9786
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
9714
9787
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
9715
9788
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
@@ -9772,6 +9845,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9772
9845
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
9773
9846
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
9774
9847
  color: var(--pf-v6-c-button__icon--Color);
9848
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
9849
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
9850
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
9851
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
9852
+ rotate: var(--pf-v6-c-button__icon--Rotate);
9853
+ scale: var(--pf-v6-c-button__icon--Scale);
9775
9854
  }
9776
9855
  .pf-v6-c-button__icon.pf-m-start {
9777
9856
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -9816,6 +9895,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9816
9895
  align-items: center;
9817
9896
  }
9818
9897
 
9898
+ .pf-v6-c-button--hamburger-icon path {
9899
+ fill: none;
9900
+ stroke: currentcolor;
9901
+ stroke-linecap: round;
9902
+ stroke-linejoin: round;
9903
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
9904
+ }
9905
+
9906
+ .pf-v6-c-button--hamburger-icon--top {
9907
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
9908
+ }
9909
+
9910
+ .pf-v6-c-button--hamburger-icon--middle {
9911
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
9912
+ }
9913
+
9914
+ .pf-v6-c-button--hamburger-icon--arrow {
9915
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
9916
+ }
9917
+
9918
+ .pf-v6-c-button--hamburger-icon--bottom {
9919
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
9920
+ }
9921
+
9819
9922
  @keyframes pf-v6-c-button-icon-notify {
9820
9923
  33% {
9821
9924
  transform: rotate(30deg);
@@ -18102,6 +18205,14 @@ ul.pf-v6-c-list {
18102
18205
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
18103
18206
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
18104
18207
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
18208
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
18209
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
18210
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
18211
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
18212
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
18213
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
18214
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
18215
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
18105
18216
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
18106
18217
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
18107
18218
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -18199,6 +18310,11 @@ ul.pf-v6-c-list {
18199
18310
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
18200
18311
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
18201
18312
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
18313
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18314
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
18315
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
18316
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18317
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
18202
18318
  }
18203
18319
 
18204
18320
  .pf-v6-c-menu-toggle {
@@ -18312,6 +18428,10 @@ ul.pf-v6-c-list {
18312
18428
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
18313
18429
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
18314
18430
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
18431
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
18432
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
18433
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
18434
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
18315
18435
  }
18316
18436
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
18317
18437
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -18367,6 +18487,15 @@ ul.pf-v6-c-list {
18367
18487
  opacity: 1;
18368
18488
  }
18369
18489
  }
18490
+ .pf-v6-c-menu-toggle.pf-m-settings {
18491
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
18492
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
18493
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
18494
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
18495
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
18496
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
18497
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
18498
+ }
18370
18499
  .pf-v6-c-menu-toggle.pf-m-placeholder {
18371
18500
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
18372
18501
  }
@@ -18528,6 +18657,10 @@ ul.pf-v6-c-list {
18528
18657
 
18529
18658
  .pf-v6-c-menu-toggle__icon {
18530
18659
  flex-shrink: 0;
18660
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
18661
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
18662
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
18663
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
18531
18664
  }
18532
18665
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
18533
18666
  vertical-align: middle;
@@ -19744,6 +19877,51 @@ ul.pf-v6-c-list {
19744
19877
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
19745
19878
  }
19746
19879
  }
19880
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19881
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19882
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19883
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19884
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19885
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19886
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19887
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19888
+ }
19889
+ .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) {
19890
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19891
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19892
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19893
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19894
+ --pf-v6-c-button__icon--Scale: 1;
19895
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19896
+ --pf-v6-c-button--hover__icon--Scale: 1;
19897
+ }
19898
+ @media (min-width: 75rem) {
19899
+ .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) {
19900
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
19901
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
19902
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
19903
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19904
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
19905
+ }
19906
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
19907
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19908
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19909
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19910
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19911
+ --pf-v6-c-button__icon--Scale: 1;
19912
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19913
+ --pf-v6-c-button--hover__icon--Scale: 1;
19914
+ }
19915
+ .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) {
19916
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
19917
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
19918
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
19919
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
19920
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19921
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
19922
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
19923
+ }
19924
+ }
19747
19925
 
19748
19926
  .pf-v6-c-page > .pf-v6-c-masthead {
19749
19927
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);