@patternfly/react-styles 6.3.0-prerelease.4 → 6.3.0-prerelease.5

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 (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Button/button.css +115 -5
  3. package/css/components/Button/button.d.ts +9 -0
  4. package/css/components/Button/button.js +9 -0
  5. package/css/components/Button/button.mjs +9 -0
  6. package/css/components/Menu/menu.css +24 -4
  7. package/css/components/MenuToggle/menu-toggle.css +30 -0
  8. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  9. package/css/components/MenuToggle/menu-toggle.js +1 -0
  10. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  11. package/css/components/Page/page.css +45 -0
  12. package/css/components/Page/page.d.ts +3 -0
  13. package/css/components/Page/page.js +3 -0
  14. package/css/components/Page/page.mjs +3 -0
  15. package/css/components/_index.css +214 -9
  16. package/css/components/_index.d.ts +9 -0
  17. package/css/components/_index.js +9 -0
  18. package/css/components/_index.mjs +9 -0
  19. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.3.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.4...@patternfly/react-styles@6.3.0-prerelease.5) (2025-06-13)
7
+
8
+ ### Features
9
+
10
+ - **Icons:** Allow more complex paths and svgs ([#11864](https://github.com/patternfly/patternfly-react/issues/11864)) ([fa16a3b](https://github.com/patternfly/patternfly-react/commit/fa16a3bd3ac35be6f0d23f642194d23dba0b313e))
11
+
6
12
  # [6.3.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.3...@patternfly/react-styles@6.3.0-prerelease.4) (2025-06-11)
7
13
 
8
14
  ### Features
package/css/components/Button/button.css CHANGED
@@ -19,9 +19,10 @@
19
19
  --pf-v6-c-button--TextDecorationLine: none;
20
20
  --pf-v6-c-button--TextDecorationStyle: none;
21
21
  --pf-v6-c-button--TextDecorationColor: currentcolor;
22
+ --pf-v6-c-button--TransitionDelay: 0s;
22
23
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
23
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
24
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
25
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
25
26
  --pf-v6-c-button--hover--BackgroundColor: transparent;
26
27
  --pf-v6-c-button--hover--BorderColor: transparent;
27
28
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -237,6 +238,16 @@
237
238
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
238
239
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
239
240
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
241
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
242
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
243
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
244
+ --pf-v6-c-button__icon--TransitionProperty: none;
245
+ --pf-v6-c-button__icon--Rotate: 0deg;
246
+ --pf-v6-c-button__icon--Scale: 1;
247
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
248
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
249
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
250
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
240
251
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
241
252
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
242
253
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -262,9 +273,28 @@
262
273
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
263
274
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
264
275
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
276
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
277
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
278
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
279
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
280
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
265
281
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
266
282
  --pf-v6-c-button--m-block--Display: flex;
267
283
  --pf-v6-c-button--m-block--Width: 100%;
284
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
285
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
286
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
287
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
288
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
289
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
290
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
291
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
292
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
293
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
294
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
295
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
296
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
297
+ --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
268
298
  }
269
299
 
270
300
  .pf-v6-c-button {
@@ -288,16 +318,19 @@
288
318
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
289
319
  white-space: nowrap;
290
320
  cursor: pointer;
321
+ -webkit-user-select: none;
291
322
  user-select: none;
292
- background-color: var(--pf-v6-c-button--BackgroundColor);
323
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
293
324
  border: 0;
294
325
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
295
326
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
296
327
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
297
328
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
329
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
298
330
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
299
331
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
300
332
  transition-property: var(--pf-v6-c-button--TransitionProperty);
333
+ scale: var(--pf-v6-c-button--Scale, revert);
301
334
  }
302
335
  .pf-v6-c-button::after {
303
336
  position: absolute;
@@ -406,6 +439,7 @@
406
439
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
407
440
  text-align: start;
408
441
  white-space: normal;
442
+ background: transparent;
409
443
  outline-offset: 0.125rem;
410
444
  }
411
445
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -539,6 +573,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
539
573
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
540
574
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
541
575
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
576
+ background: var(--pf-v6-c-button--BackgroundColor);
542
577
  }
543
578
  .pf-v6-c-button.pf-m-block {
544
579
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -565,7 +600,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
565
600
  }
566
601
  .pf-v6-c-button.pf-m-favorited {
567
602
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
603
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
568
604
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
605
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
569
606
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
570
607
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
571
608
  }
@@ -574,6 +611,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
574
611
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
575
612
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
576
613
  }
614
+ .pf-v6-c-button.pf-m-settings {
615
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
616
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
617
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
618
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
619
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
620
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
621
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
622
+ }
623
+ .pf-v6-c-button.pf-m-hamburger {
624
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
625
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
626
+ --pf-v6-c-button__icon--TransitionProperty: scale;
627
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
628
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
629
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
630
+ }
631
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
632
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
633
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
634
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
635
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
636
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
637
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
638
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
639
+ }
640
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
641
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
642
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
643
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
644
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
645
+ --pf-v6-c-button__icon--Scale: 1;
646
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
647
+ --pf-v6-c-button--hover__icon--Scale: 1;
648
+ }
577
649
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
578
650
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
579
651
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -581,24 +653,32 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
581
653
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
582
654
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
583
655
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
656
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
657
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
658
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
659
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
584
660
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
585
661
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
586
662
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
587
663
  }
588
- .pf-v6-c-button.pf-m-clicked {
664
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
589
665
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
590
666
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
591
667
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
592
668
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
593
669
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
594
670
  }
671
+ .pf-v6-c-button:active {
672
+ background-size: 100%;
673
+ transition-duration: 0s;
674
+ }
595
675
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
596
676
  pointer-events: none;
597
677
  }
598
678
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
599
679
  color: var(--pf-v6-c-button--disabled--Color);
600
680
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
601
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
681
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
602
682
  }
603
683
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
604
684
  border-color: transparent;
@@ -639,6 +719,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
639
719
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
640
720
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
641
721
  color: var(--pf-v6-c-button__icon--Color);
722
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
723
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
724
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
725
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
726
+ rotate: var(--pf-v6-c-button__icon--Rotate);
727
+ scale: var(--pf-v6-c-button__icon--Scale);
642
728
  }
643
729
  .pf-v6-c-button__icon.pf-m-start {
644
730
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -683,6 +769,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
683
769
  align-items: center;
684
770
  }
685
771
 
772
+ .pf-v6-c-button--hamburger-icon path {
773
+ fill: none;
774
+ stroke: currentcolor;
775
+ stroke-linecap: round;
776
+ stroke-linejoin: round;
777
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
778
+ }
779
+
780
+ .pf-v6-c-button--hamburger-icon--top {
781
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
782
+ }
783
+
784
+ .pf-v6-c-button--hamburger-icon--middle {
785
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
786
+ }
787
+
788
+ .pf-v6-c-button--hamburger-icon--arrow {
789
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
790
+ }
791
+
792
+ .pf-v6-c-button--hamburger-icon--bottom {
793
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
794
+ }
795
+
686
796
  @keyframes pf-v6-c-button-icon-notify {
687
797
  33% {
688
798
  transform: rotate(30deg);
package/css/components/Button/button.d.ts CHANGED
@@ -3,6 +3,11 @@ declare const _default: {
3
3
  "badge": "pf-v6-c-badge",
4
4
  "button": "pf-v6-c-button",
5
5
  "buttonCount": "pf-v6-c-button__count",
6
+ "buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
7
+ "buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
8
+ "buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
9
+ "buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
10
+ "buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
6
11
  "buttonIcon": "pf-v6-c-button__icon",
7
12
  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
8
13
  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
@@ -28,6 +33,10 @@ declare const _default: {
28
33
  "small": "pf-m-small",
29
34
  "favorite": "pf-m-favorite",
30
35
  "favorited": "pf-m-favorited",
36
+ "settings": "pf-m-settings",
37
+ "hamburger": "pf-m-hamburger",
38
+ "expand": "pf-m-expand",
39
+ "collapse": "pf-m-collapse",
31
40
  "clicked": "pf-m-clicked",
32
41
  "disabled": "pf-m-disabled",
33
42
  "ariaDisabled": "pf-m-aria-disabled",
package/css/components/Button/button.js CHANGED
@@ -5,6 +5,11 @@ exports.default = {
5
5
  "badge": "pf-v6-c-badge",
6
6
  "button": "pf-v6-c-button",
7
7
  "buttonCount": "pf-v6-c-button__count",
8
+ "buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
9
+ "buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
10
+ "buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
11
+ "buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
12
+ "buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
8
13
  "buttonIcon": "pf-v6-c-button__icon",
9
14
  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
10
15
  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
@@ -30,6 +35,10 @@ exports.default = {
30
35
  "small": "pf-m-small",
31
36
  "favorite": "pf-m-favorite",
32
37
  "favorited": "pf-m-favorited",
38
+ "settings": "pf-m-settings",
39
+ "hamburger": "pf-m-hamburger",
40
+ "expand": "pf-m-expand",
41
+ "collapse": "pf-m-collapse",
33
42
  "clicked": "pf-m-clicked",
34
43
  "disabled": "pf-m-disabled",
35
44
  "ariaDisabled": "pf-m-aria-disabled",
package/css/components/Button/button.mjs CHANGED
@@ -3,6 +3,11 @@ export default {
3
3
  "badge": "pf-v6-c-badge",
4
4
  "button": "pf-v6-c-button",
5
5
  "buttonCount": "pf-v6-c-button__count",
6
+ "buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
7
+ "buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
8
+ "buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
9
+ "buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
10
+ "buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
6
11
  "buttonIcon": "pf-v6-c-button__icon",
7
12
  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
8
13
  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
@@ -28,6 +33,10 @@ export default {
28
33
  "small": "pf-m-small",
29
34
  "favorite": "pf-m-favorite",
30
35
  "favorited": "pf-m-favorited",
36
+ "settings": "pf-m-settings",
37
+ "hamburger": "pf-m-hamburger",
38
+ "expand": "pf-m-expand",
39
+ "collapse": "pf-m-collapse",
31
40
  "clicked": "pf-m-clicked",
32
41
  "disabled": "pf-m-disabled",
33
42
  "ariaDisabled": "pf-m-aria-disabled",
package/css/components/Menu/menu.css CHANGED
@@ -12,7 +12,7 @@
12
12
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
13
13
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
14
14
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
15
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
15
+ --pf-v6-c-menu--TransitionDuration: 0s;
16
16
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17
17
  --pf-v6-c-menu--m-plain--BoxShadow: none;
18
18
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -85,14 +85,34 @@
85
85
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
86
86
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
87
87
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
88
- --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);
88
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
89
89
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
90
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
90
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
91
91
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
92
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
92
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
93
93
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
94
94
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
95
95
  }
96
+ @media (prefers-reduced-motion: no-preference) {
97
+ .pf-v6-c-menu {
98
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
99
+ }
100
+ }
101
+ @media (prefers-reduced-motion: no-preference) {
102
+ .pf-v6-c-menu {
103
+ --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);
104
+ }
105
+ }
106
+ @media (prefers-reduced-motion: no-preference) {
107
+ .pf-v6-c-menu {
108
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
109
+ }
110
+ }
111
+ @media (prefers-reduced-motion: no-preference) {
112
+ .pf-v6-c-menu {
113
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
114
+ }
115
+ }
96
116
 
97
117
  .pf-v6-c-menu__content,
98
118
  .pf-v6-c-menu__list-item,
package/css/components/MenuToggle/menu-toggle.css CHANGED
@@ -33,6 +33,14 @@
33
33
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
34
34
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
35
35
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
36
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
37
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
38
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
39
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
40
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
41
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
42
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
43
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
36
44
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
37
45
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
38
46
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -130,6 +138,11 @@
130
138
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
131
139
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
132
140
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
141
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
142
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
143
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
144
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
145
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
133
146
  }
134
147
 
135
148
  .pf-v6-c-menu-toggle {
@@ -243,6 +256,10 @@
243
256
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
244
257
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
245
258
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
259
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
260
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
261
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
262
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
246
263
  }
247
264
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
248
265
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -298,6 +315,15 @@
298
315
  opacity: 1;
299
316
  }
300
317
  }
318
+ .pf-v6-c-menu-toggle.pf-m-settings {
319
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
320
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
321
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
322
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
323
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
324
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
325
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
326
+ }
301
327
  .pf-v6-c-menu-toggle.pf-m-placeholder {
302
328
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
303
329
  }
@@ -459,6 +485,10 @@
459
485
 
460
486
  .pf-v6-c-menu-toggle__icon {
461
487
  flex-shrink: 0;
488
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
489
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
490
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
491
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
462
492
  }
463
493
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
464
494
  vertical-align: middle;
package/css/components/MenuToggle/menu-toggle.d.ts CHANGED
@@ -24,6 +24,7 @@ declare const _default: {
24
24
  "success": "pf-m-success",
25
25
  "warning": "pf-m-warning",
26
26
  "danger": "pf-m-danger",
27
+ "settings": "pf-m-settings",
27
28
  "placeholder": "pf-m-placeholder",
28
29
  "splitButton": "pf-m-split-button",
29
30
  "standalone": "pf-m-standalone",
package/css/components/MenuToggle/menu-toggle.js CHANGED
@@ -26,6 +26,7 @@ exports.default = {
26
26
  "success": "pf-m-success",
27
27
  "warning": "pf-m-warning",
28
28
  "danger": "pf-m-danger",
29
+ "settings": "pf-m-settings",
29
30
  "placeholder": "pf-m-placeholder",
30
31
  "splitButton": "pf-m-split-button",
31
32
  "standalone": "pf-m-standalone",
package/css/components/MenuToggle/menu-toggle.mjs CHANGED
@@ -24,6 +24,7 @@ export default {
24
24
  "success": "pf-m-success",
25
25
  "warning": "pf-m-warning",
26
26
  "danger": "pf-m-danger",
27
+ "settings": "pf-m-settings",
27
28
  "placeholder": "pf-m-placeholder",
28
29
  "splitButton": "pf-m-split-button",
29
30
  "standalone": "pf-m-standalone",
package/css/components/Page/page.css CHANGED
@@ -111,6 +111,51 @@
111
111
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
112
112
  }
113
113
  }
114
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
115
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
116
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
117
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
118
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
119
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
120
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
121
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
122
+ }
123
+ .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) {
124
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
125
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
126
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
127
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
128
+ --pf-v6-c-button__icon--Scale: 1;
129
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
130
+ --pf-v6-c-button--hover__icon--Scale: 1;
131
+ }
132
+ @media (min-width: 75rem) {
133
+ .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) {
134
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
135
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
136
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
137
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
138
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
139
+ }
140
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
141
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
142
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
143
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
144
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
145
+ --pf-v6-c-button__icon--Scale: 1;
146
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
147
+ --pf-v6-c-button--hover__icon--Scale: 1;
148
+ }
149
+ .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) {
150
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
151
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
152
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
153
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
154
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
155
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
156
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
157
+ }
158
+ }
114
159
 
115
160
  .pf-v6-c-page > .pf-v6-c-masthead {
116
161
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
package/css/components/Page/page.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import './page.css';
2
2
  declare const _default: {
3
+ "button": "pf-v6-c-button",
3
4
  "dirRtl": "pf-v6-m-dir-rtl",
4
5
  "masthead": "pf-v6-c-masthead",
6
+ "mastheadToggle": "pf-v6-c-masthead__toggle",
5
7
  "modifiers": {
8
+ "hamburger": "pf-m-hamburger",
6
9
  "expanded": "pf-m-expanded",
7
10
  "collapsed": "pf-m-collapsed",
8
11
  "pageInsets": "pf-m-page-insets",
package/css/components/Page/page.js CHANGED
@@ -2,9 +2,12 @@
2
2
  exports.__esModule = true;
3
3
  require('./page.css');
4
4
  exports.default = {
5
+ "button": "pf-v6-c-button",
5
6
  "dirRtl": "pf-v6-m-dir-rtl",
6
7
  "masthead": "pf-v6-c-masthead",
8
+ "mastheadToggle": "pf-v6-c-masthead__toggle",
7
9
  "modifiers": {
10
+ "hamburger": "pf-m-hamburger",
8
11
  "expanded": "pf-m-expanded",
9
12
  "collapsed": "pf-m-collapsed",
10
13
  "pageInsets": "pf-m-page-insets",
package/css/components/Page/page.mjs CHANGED
@@ -1,8 +1,11 @@
1
1
  import './page.css';
2
2
  export default {
3
+ "button": "pf-v6-c-button",
3
4
  "dirRtl": "pf-v6-m-dir-rtl",
4
5
  "masthead": "pf-v6-c-masthead",
6
+ "mastheadToggle": "pf-v6-c-masthead__toggle",
5
7
  "modifiers": {
8
+ "hamburger": "pf-m-hamburger",
6
9
  "expanded": "pf-m-expanded",
7
10
  "collapsed": "pf-m-collapsed",
8
11
  "pageInsets": "pf-m-page-insets",
package/css/components/_index.css CHANGED
@@ -1547,9 +1547,10 @@ button.pf-v6-c-breadcrumb__link {
1547
1547
  --pf-v6-c-button--TextDecorationLine: none;
1548
1548
  --pf-v6-c-button--TextDecorationStyle: none;
1549
1549
  --pf-v6-c-button--TextDecorationColor: currentcolor;
1550
+ --pf-v6-c-button--TransitionDelay: 0s;
1550
1551
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1551
- --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1552
- --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1552
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1553
+ --pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
1553
1554
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1554
1555
  --pf-v6-c-button--hover--BorderColor: transparent;
1555
1556
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
@@ -1765,6 +1766,16 @@ button.pf-v6-c-breadcrumb__link {
1765
1766
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1766
1767
  --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1767
1768
  --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1769
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
1770
+ --pf-v6-c-button__icon--TransitionTimingFunction: auto;
1771
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
1772
+ --pf-v6-c-button__icon--TransitionProperty: none;
1773
+ --pf-v6-c-button__icon--Rotate: 0deg;
1774
+ --pf-v6-c-button__icon--Scale: 1;
1775
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
1776
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
1777
+ --pf-v6-c-button--hover__icon--TransitionProperty: none;
1778
+ --pf-v6-c-button--hover__icon--Rotate: 0deg;
1768
1779
  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1769
1780
  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1770
1781
  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
@@ -1790,9 +1801,28 @@ button.pf-v6-c-breadcrumb__link {
1790
1801
  --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
1791
1802
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1792
1803
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1804
+ --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1805
+ --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
1806
+ --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
1807
+ --pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1808
+ --pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
1793
1809
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
1794
1810
  --pf-v6-c-button--m-block--Display: flex;
1795
1811
  --pf-v6-c-button--m-block--Width: 100%;
1812
+ --pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
1813
+ --pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
1814
+ --pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
1815
+ --pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
1816
+ --pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
1817
+ --pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
1818
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
1819
+ --pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
1820
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
1821
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
1822
+ --pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
1823
+ --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1824
+ --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1825
+ --pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
1796
1826
  }
1797
1827
 
1798
1828
  .pf-v6-c-button {
@@ -1816,16 +1846,19 @@ button.pf-v6-c-breadcrumb__link {
1816
1846
  text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
1817
1847
  white-space: nowrap;
1818
1848
  cursor: pointer;
1849
+ -webkit-user-select: none;
1819
1850
  user-select: none;
1820
- background-color: var(--pf-v6-c-button--BackgroundColor);
1851
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
1821
1852
  border: 0;
1822
1853
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1823
1854
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1824
1855
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1825
1856
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1857
+ transition-delay: var(--pf-v6-c-button--TransitionDelay);
1826
1858
  transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1827
1859
  transition-duration: var(--pf-v6-c-button--TransitionDuration);
1828
1860
  transition-property: var(--pf-v6-c-button--TransitionProperty);
1861
+ scale: var(--pf-v6-c-button--Scale, revert);
1829
1862
  }
1830
1863
  .pf-v6-c-button::after {
1831
1864
  position: absolute;
@@ -1934,6 +1967,7 @@ button.pf-v6-c-breadcrumb__link {
1934
1967
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1935
1968
  text-align: start;
1936
1969
  white-space: normal;
1970
+ background: transparent;
1937
1971
  outline-offset: 0.125rem;
1938
1972
  }
1939
1973
  span.pf-v6-c-button.pf-m-link.pf-m-inline {
@@ -2067,6 +2101,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2067
2101
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
2068
2102
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
2069
2103
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2104
+ background: var(--pf-v6-c-button--BackgroundColor);
2070
2105
  }
2071
2106
  .pf-v6-c-button.pf-m-block {
2072
2107
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
@@ -2093,7 +2128,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2093
2128
  }
2094
2129
  .pf-v6-c-button.pf-m-favorited {
2095
2130
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2131
+ --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
2096
2132
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2133
+ --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
2097
2134
  --pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
2098
2135
  --pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
2099
2136
  }
@@ -2102,6 +2139,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2102
2139
  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
2103
2140
  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
2104
2141
  }
2142
+ .pf-v6-c-button.pf-m-settings {
2143
+ --pf-v6-c-button__icon--TransitionProperty: rotate;
2144
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
2145
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
2146
+ --pf-v6-c-button--hover__icon--TransitionProperty: rotate;
2147
+ --pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
2148
+ --pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
2149
+ --pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
2150
+ }
2151
+ .pf-v6-c-button.pf-m-hamburger {
2152
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2153
+ --pf-v6-c-button__icon--TransitionDuration: 0s;
2154
+ --pf-v6-c-button__icon--TransitionProperty: scale;
2155
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
2156
+ --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
2157
+ --pf-v6-c-button--hover__icon--TransitionProperty: scale;
2158
+ }
2159
+ .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
2160
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2161
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2162
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2163
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
2164
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
2165
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2166
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
2167
+ }
2168
+ .pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
2169
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
2170
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
2171
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
2172
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
2173
+ --pf-v6-c-button__icon--Scale: 1;
2174
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2175
+ --pf-v6-c-button--hover__icon--Scale: 1;
2176
+ }
2105
2177
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2106
2178
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2107
2179
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -2109,24 +2181,32 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2109
2181
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
2110
2182
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
2111
2183
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
2184
+ --pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
2185
+ --pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
2186
+ --pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
2187
+ --pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
2112
2188
  text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2113
2189
  text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2114
2190
  text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
2115
2191
  }
2116
- .pf-v6-c-button.pf-m-clicked {
2192
+ .pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
2117
2193
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
2118
2194
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
2119
2195
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
2120
2196
  --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
2121
2197
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2122
2198
  }
2199
+ .pf-v6-c-button:active {
2200
+ background-size: 100%;
2201
+ transition-duration: 0s;
2202
+ }
2123
2203
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
2124
2204
  pointer-events: none;
2125
2205
  }
2126
2206
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
2127
2207
  color: var(--pf-v6-c-button--disabled--Color);
2128
2208
  text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
2129
- background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
2209
+ background: var(--pf-v6-c-button--disabled--BackgroundColor);
2130
2210
  }
2131
2211
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
2132
2212
  border-color: transparent;
@@ -2167,6 +2247,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2167
2247
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2168
2248
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2169
2249
  color: var(--pf-v6-c-button__icon--Color);
2250
+ transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
2251
+ transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
2252
+ transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
2253
+ transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
2254
+ rotate: var(--pf-v6-c-button__icon--Rotate);
2255
+ scale: var(--pf-v6-c-button__icon--Scale);
2170
2256
  }
2171
2257
  .pf-v6-c-button__icon.pf-m-start {
2172
2258
  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
@@ -2211,6 +2297,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2211
2297
  align-items: center;
2212
2298
  }
2213
2299
 
2300
+ .pf-v6-c-button--hamburger-icon path {
2301
+ fill: none;
2302
+ stroke: currentcolor;
2303
+ stroke-linecap: round;
2304
+ stroke-linejoin: round;
2305
+ transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
2306
+ }
2307
+
2308
+ .pf-v6-c-button--hamburger-icon--top {
2309
+ d: var(--pf-v6-c-button--hamburger-icon--top--path);
2310
+ }
2311
+
2312
+ .pf-v6-c-button--hamburger-icon--middle {
2313
+ d: var(--pf-v6-c-button--hamburger-icon--middle--path);
2314
+ }
2315
+
2316
+ .pf-v6-c-button--hamburger-icon--arrow {
2317
+ d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
2318
+ }
2319
+
2320
+ .pf-v6-c-button--hamburger-icon--bottom {
2321
+ d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
2322
+ }
2323
+
2214
2324
  @keyframes pf-v6-c-button-icon-notify {
2215
2325
  33% {
2216
2326
  transform: rotate(30deg);
@@ -9863,7 +9973,7 @@ ul.pf-v6-c-list {
9863
9973
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
9864
9974
  --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
9865
9975
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
9866
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
9976
+ --pf-v6-c-menu--TransitionDuration: 0s;
9867
9977
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
9868
9978
  --pf-v6-c-menu--m-plain--BoxShadow: none;
9869
9979
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
@@ -9936,14 +10046,34 @@ ul.pf-v6-c-list {
9936
10046
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
9937
10047
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
9938
10048
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9939
- --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);
10049
+ --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9940
10050
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
9941
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10051
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
9942
10052
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
9943
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10053
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
9944
10054
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
9945
10055
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
9946
10056
  }
10057
+ @media (prefers-reduced-motion: no-preference) {
10058
+ .pf-v6-c-menu {
10059
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10060
+ }
10061
+ }
10062
+ @media (prefers-reduced-motion: no-preference) {
10063
+ .pf-v6-c-menu {
10064
+ --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);
10065
+ }
10066
+ }
10067
+ @media (prefers-reduced-motion: no-preference) {
10068
+ .pf-v6-c-menu {
10069
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10070
+ }
10071
+ }
10072
+ @media (prefers-reduced-motion: no-preference) {
10073
+ .pf-v6-c-menu {
10074
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10075
+ }
10076
+ }
9947
10077
 
9948
10078
  .pf-v6-c-menu__content,
9949
10079
  .pf-v6-c-menu__list-item,
@@ -10477,6 +10607,14 @@ ul.pf-v6-c-list {
10477
10607
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
10478
10608
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
10479
10609
  --pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
10610
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
10611
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
10612
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: none;
10613
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
10614
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
10615
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
10616
+ --pf-v6-c-menu-toggle__icon--Rotate: 0deg;
10617
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
10480
10618
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
10481
10619
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
10482
10620
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
@@ -10574,6 +10712,11 @@ ul.pf-v6-c-list {
10574
10712
  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
10575
10713
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
10576
10714
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
10715
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
10716
+ --pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
10717
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
10718
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
10719
+ --pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
10577
10720
  }
10578
10721
 
10579
10722
  .pf-v6-c-menu-toggle {
@@ -10687,6 +10830,10 @@ ul.pf-v6-c-list {
10687
10830
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
10688
10831
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
10689
10832
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
10833
+ --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
10834
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
10835
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
10836
+ --pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
10690
10837
  }
10691
10838
  .pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
10692
10839
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
@@ -10742,6 +10889,15 @@ ul.pf-v6-c-list {
10742
10889
  opacity: 1;
10743
10890
  }
10744
10891
  }
10892
+ .pf-v6-c-menu-toggle.pf-m-settings {
10893
+ --pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
10894
+ --pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
10895
+ --pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
10896
+ --pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
10897
+ --pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
10898
+ --pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
10899
+ --pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
10900
+ }
10745
10901
  .pf-v6-c-menu-toggle.pf-m-placeholder {
10746
10902
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
10747
10903
  }
@@ -10903,6 +11059,10 @@ ul.pf-v6-c-list {
10903
11059
 
10904
11060
  .pf-v6-c-menu-toggle__icon {
10905
11061
  flex-shrink: 0;
11062
+ transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
11063
+ transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
11064
+ transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
11065
+ rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
10906
11066
  }
10907
11067
  .pf-v6-c-menu-toggle__icon :where(picture, img) {
10908
11068
  vertical-align: middle;
@@ -12119,6 +12279,51 @@ ul.pf-v6-c-list {
12119
12279
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
12120
12280
  }
12121
12281
  }
12282
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12283
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12284
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12285
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12286
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12287
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12288
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12289
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12290
+ }
12291
+ .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) {
12292
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12293
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12294
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12295
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12296
+ --pf-v6-c-button__icon--Scale: 1;
12297
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12298
+ --pf-v6-c-button--hover__icon--Scale: 1;
12299
+ }
12300
+ @media (min-width: 75rem) {
12301
+ .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) {
12302
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
12303
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
12304
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
12305
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12306
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12307
+ }
12308
+ .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12309
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12310
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12311
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12312
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12313
+ --pf-v6-c-button__icon--Scale: 1;
12314
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12315
+ --pf-v6-c-button--hover__icon--Scale: 1;
12316
+ }
12317
+ .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) {
12318
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12319
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12320
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12321
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12322
+ --pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12323
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12324
+ --pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
12325
+ }
12326
+ }
12122
12327
 
12123
12328
  .pf-v6-c-page > .pf-v6-c-masthead {
12124
12329
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
package/css/components/_index.d.ts CHANGED
@@ -45,6 +45,11 @@ declare const _default: {
45
45
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
46
46
  "button": "pf-v6-c-button",
47
47
  "buttonCount": "pf-v6-c-button__count",
48
+ "buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
49
+ "buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
50
+ "buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
51
+ "buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
52
+ "buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
48
53
  "buttonIcon": "pf-v6-c-button__icon",
49
54
  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
50
55
  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
@@ -395,6 +400,10 @@ declare const _default: {
395
400
  "small": "pf-m-small",
396
401
  "favorite": "pf-m-favorite",
397
402
  "favorited": "pf-m-favorited",
403
+ "settings": "pf-m-settings",
404
+ "hamburger": "pf-m-hamburger",
405
+ "expand": "pf-m-expand",
406
+ "collapse": "pf-m-collapse",
398
407
  "clicked": "pf-m-clicked",
399
408
  "ariaDisabled": "pf-m-aria-disabled",
400
409
  "progress": "pf-m-progress",
package/css/components/_index.js CHANGED
@@ -47,6 +47,11 @@ exports.default = {
47
47
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
48
48
  "button": "pf-v6-c-button",
49
49
  "buttonCount": "pf-v6-c-button__count",
50
+ "buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
51
+ "buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
52
+ "buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
53
+ "buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
54
+ "buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
50
55
  "buttonIcon": "pf-v6-c-button__icon",
51
56
  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
52
57
  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
@@ -397,6 +402,10 @@ exports.default = {
397
402
  "small": "pf-m-small",
398
403
  "favorite": "pf-m-favorite",
399
404
  "favorited": "pf-m-favorited",
405
+ "settings": "pf-m-settings",
406
+ "hamburger": "pf-m-hamburger",
407
+ "expand": "pf-m-expand",
408
+ "collapse": "pf-m-collapse",
400
409
  "clicked": "pf-m-clicked",
401
410
  "ariaDisabled": "pf-m-aria-disabled",
402
411
  "progress": "pf-m-progress",
package/css/components/_index.mjs CHANGED
@@ -45,6 +45,11 @@ export default {
45
45
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
46
46
  "button": "pf-v6-c-button",
47
47
  "buttonCount": "pf-v6-c-button__count",
48
+ "buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
49
+ "buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
50
+ "buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
51
+ "buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
52
+ "buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
48
53
  "buttonIcon": "pf-v6-c-button__icon",
49
54
  "buttonIconFavorite": "pf-v6-c-button__icon-favorite",
50
55
  "buttonIconFavorited": "pf-v6-c-button__icon-favorited",
@@ -395,6 +400,10 @@ export default {
395
400
  "small": "pf-m-small",
396
401
  "favorite": "pf-m-favorite",
397
402
  "favorited": "pf-m-favorited",
403
+ "settings": "pf-m-settings",
404
+ "hamburger": "pf-m-hamburger",
405
+ "expand": "pf-m-expand",
406
+ "collapse": "pf-m-collapse",
398
407
  "clicked": "pf-m-clicked",
399
408
  "ariaDisabled": "pf-m-aria-disabled",
400
409
  "progress": "pf-m-progress",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.3.0-prerelease.4",
3
+ "version": "6.3.0-prerelease.5",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.3.0-prerelease.24",
22
+ "@patternfly/patternfly": "6.3.0-prerelease.26",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "2a9c798759283f3a0d482ec6ffd3dd9eb0d3807d"
27
+ "gitHead": "9e7c8ba6afb5ad01cbac427089f8f9032e523628"
28
28
  }