@patternfly/patternfly 6.3.0-prerelease.24 → 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 (52) hide show
  1. package/components/Button/button.css +115 -5
  2. package/components/Button/button.scss +118 -6
  3. package/components/Menu/menu.css +24 -4
  4. package/components/Menu/menu.scss +20 -5
  5. package/components/MenuToggle/menu-toggle.css +30 -0
  6. package/components/MenuToggle/menu-toggle.scss +33 -0
  7. package/components/Page/page.css +45 -0
  8. package/components/Page/page.scss +29 -0
  9. package/components/_index.css +214 -9
  10. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  11. package/docs/components/Button/examples/Button.md +85 -3
  12. package/docs/components/Card/examples/Card.md +8 -8
  13. package/docs/components/DataList/examples/DataList.md +23 -23
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  15. package/docs/components/Hint/examples/Hint.md +3 -3
  16. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  17. package/docs/components/Masthead/examples/masthead.md +90 -12
  18. package/docs/components/Menu/examples/Menu.md +2 -2
  19. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  20. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  21. package/docs/components/Page/examples/Page.md +147 -14
  22. package/docs/components/Pagination/examples/Pagination.md +12 -12
  23. package/docs/components/Table/examples/Table.md +240 -240
  24. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  25. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  26. package/docs/demos/Alert/examples/Alert.md +66 -9
  27. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  28. package/docs/demos/Banner/examples/Banner.md +47 -6
  29. package/docs/demos/Card/examples/Card.md +4 -4
  30. package/docs/demos/CardView/examples/CardView.md +24 -5
  31. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  32. package/docs/demos/DataList/examples/DataList.md +100 -24
  33. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
  34. package/docs/demos/Drawer/examples/Drawer.md +110 -15
  35. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  36. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  37. package/docs/demos/Modal/examples/Modal.md +132 -18
  38. package/docs/demos/Nav/examples/Nav.md +111 -16
  39. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  40. package/docs/demos/Page/examples/Page.md +309 -43
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
  42. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  43. package/docs/demos/Table/examples/Table.md +435 -150
  44. package/docs/demos/Tabs/examples/Tabs.md +137 -23
  45. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  46. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  47. package/package.json +2 -2
  48. package/patternfly-no-globals.css +214 -9
  49. package/patternfly.css +214 -9
  50. package/patternfly.min.css +1 -1
  51. package/patternfly.min.css.map +1 -1
  52. package/sass-utilities/mixins.scss +35 -0
@@ -9009,9 +9009,10 @@ 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
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9014
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
9014
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
9015
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
9015
9016
  --pf-v6-c-button--hover--BackgroundColor: transparent;
9016
9017
  --pf-v6-c-button--hover--BorderColor: transparent;
9017
9018
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -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 {
@@ -9278,16 +9308,19 @@ button.pf-v6-c-breadcrumb__link {
9278
9308
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
9279
9309
  white-space: nowrap;
9280
9310
  cursor: pointer;
9311
+ -webkit-user-select: none;
9281
9312
  user-select: none;
9282
- background-color: var(--pf-v6-c-button--BackgroundColor);
9313
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
9283
9314
  border: 0;
9284
9315
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
9285
9316
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
9286
9317
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
9287
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);
9288
9320
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
9289
9321
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
9290
9322
  transition-property: var(--pf-v6-c-button--TransitionProperty);
9323
+ scale: var(--pf-v6-c-button--Scale, revert);
9291
9324
  }
9292
9325
  .pf-v6-c-button::after {
9293
9326
  position: absolute;
@@ -9396,6 +9429,7 @@ button.pf-v6-c-breadcrumb__link {
9396
9429
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
9397
9430
  text-align: start;
9398
9431
  white-space: normal;
9432
+ background: transparent;
9399
9433
  outline-offset: 0.125rem;
9400
9434
  }
9401
9435
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -9529,6 +9563,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9529
9563
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
9530
9564
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
9531
9565
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
9566
+ background: var(--pf-v6-c-button--BackgroundColor);
9532
9567
  }
9533
9568
  .pf-v6-c-button.pf-m-block {
9534
9569
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -9555,7 +9590,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9555
9590
  }
9556
9591
  .pf-v6-c-button.pf-m-favorited {
9557
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);
9558
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);
9559
9596
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
9560
9597
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
9561
9598
  }
@@ -9564,6 +9601,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9564
9601
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
9565
9602
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
9566
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
+ }
9567
9639
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
9568
9640
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
9569
9641
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -9571,24 +9643,32 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9571
9643
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
9572
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);
9573
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);
9574
9650
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
9575
9651
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
9576
9652
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
9577
9653
  }
9578
- .pf-v6-c-button.pf-m-clicked {
9654
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
9579
9655
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
9580
9656
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
9581
9657
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
9582
9658
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
9583
9659
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
9584
9660
  }
9661
+ .pf-v6-c-button:active {
9662
+ background-size: 100%;
9663
+ transition-duration: 0s;
9664
+ }
9585
9665
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
9586
9666
  pointer-events: none;
9587
9667
  }
9588
9668
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
9589
9669
  color: var(--pf-v6-c-button--disabled--Color);
9590
9670
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
9591
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
9671
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
9592
9672
  }
9593
9673
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
9594
9674
  border-color: transparent;
@@ -9629,6 +9709,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9629
9709
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
9630
9710
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
9631
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);
9632
9718
  }
9633
9719
  .pf-v6-c-button__icon.pf-m-start {
9634
9720
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -9673,6 +9759,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9673
9759
  align-items: center;
9674
9760
  }
9675
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
+
9676
9786
  @keyframes pf-v6-c-button-icon-notify {
9677
9787
  33% {
9678
9788
  transform: rotate(30deg);
@@ -17325,7 +17435,7 @@ ul.pf-v6-c-list {
17325
17435
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
17326
17436
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
17327
17437
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
17328
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17438
+ --pf-v6-c-menu--TransitionDuration: 0s;
17329
17439
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17330
17440
  --pf-v6-c-menu--m-plain--BoxShadow: none;
17331
17441
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -17398,14 +17508,34 @@ ul.pf-v6-c-list {
17398
17508
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
17399
17509
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
17400
17510
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17401
- --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17511
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17402
17512
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
17403
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17513
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
17404
17514
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
17405
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17515
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
17406
17516
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
17407
17517
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
17408
17518
  }
17519
+ @media (prefers-reduced-motion: no-preference) {
17520
+ .pf-v6-c-menu {
17521
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17522
+ }
17523
+ }
17524
+ @media (prefers-reduced-motion: no-preference) {
17525
+ .pf-v6-c-menu {
17526
+ --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
17527
+ }
17528
+ }
17529
+ @media (prefers-reduced-motion: no-preference) {
17530
+ .pf-v6-c-menu {
17531
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17532
+ }
17533
+ }
17534
+ @media (prefers-reduced-motion: no-preference) {
17535
+ .pf-v6-c-menu {
17536
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
17537
+ }
17538
+ }
17409
17539
 
17410
17540
  .pf-v6-c-menu__content,
17411
17541
  .pf-v6-c-menu__list-item,
@@ -17939,6 +18069,14 @@ ul.pf-v6-c-list {
17939
18069
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17940
18070
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17941
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;
17942
18080
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
17943
18081
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
17944
18082
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -18036,6 +18174,11 @@ ul.pf-v6-c-list {
18036
18174
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
18037
18175
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
18038
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;
18039
18182
  }
18040
18183
 
18041
18184
  .pf-v6-c-menu-toggle {
@@ -18149,6 +18292,10 @@ ul.pf-v6-c-list {
18149
18292
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
18150
18293
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
18151
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);
18152
18299
  }
18153
18300
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
18154
18301
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -18204,6 +18351,15 @@ ul.pf-v6-c-list {
18204
18351
  opacity: 1;
18205
18352
  }
18206
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
+ }
18207
18363
  .pf-v6-c-menu-toggle.pf-m-placeholder {
18208
18364
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
18209
18365
  }
@@ -18365,6 +18521,10 @@ ul.pf-v6-c-list {
18365
18521
 
18366
18522
  .pf-v6-c-menu-toggle__icon {
18367
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);
18368
18528
  }
18369
18529
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
18370
18530
  vertical-align: middle;
@@ -19581,6 +19741,51 @@ ul.pf-v6-c-list {
19581
19741
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
19582
19742
  }
19583
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
+ }
19584
19789
 
19585
19790
  .pf-v6-c-page > .pf-v6-c-masthead {
19586
19791
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);