@patternfly/patternfly 6.2.0-prerelease.2 → 6.2.0-prerelease.20

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 (107) hide show
  1. package/assets/pficon/pficon.scss +1 -1
  2. package/base/normalize.scss +2 -2
  3. package/base/patternfly-pf-icons.css +1 -1
  4. package/components/Alert/alert-group.css +50 -7
  5. package/components/Alert/alert-group.scss +114 -28
  6. package/components/Banner/banner.css +2 -2
  7. package/components/Banner/banner.scss +2 -2
  8. package/components/Breadcrumb/breadcrumb.css +3 -2
  9. package/components/Breadcrumb/breadcrumb.scss +3 -2
  10. package/components/Button/button.css +63 -2
  11. package/components/Button/button.scss +74 -2
  12. package/components/Card/card.css +17 -0
  13. package/components/Card/card.scss +22 -0
  14. package/components/Content/content.css +2 -1
  15. package/components/Content/content.scss +2 -1
  16. package/components/DescriptionList/description-list.css +3 -2
  17. package/components/DescriptionList/description-list.scss +3 -2
  18. package/components/Drawer/drawer.css +3 -1
  19. package/components/Drawer/drawer.scss +3 -1
  20. package/components/Form/form.css +3 -6
  21. package/components/Form/form.scss +3 -7
  22. package/components/HelperText/helper-text.css +13 -0
  23. package/components/HelperText/helper-text.scss +16 -0
  24. package/components/JumpLinks/jump-links.css +1 -1
  25. package/components/JumpLinks/jump-links.scss +1 -1
  26. package/components/Label/label.css +3 -2
  27. package/components/Label/label.scss +3 -2
  28. package/components/Masthead/masthead.css +1 -1
  29. package/components/Masthead/masthead.scss +1 -1
  30. package/components/Menu/menu.css +15 -7
  31. package/components/Menu/menu.scss +14 -5
  32. package/components/MenuToggle/menu-toggle.css +41 -0
  33. package/components/MenuToggle/menu-toggle.scss +49 -0
  34. package/components/Nav/nav.css +46 -13
  35. package/components/Nav/nav.scss +57 -17
  36. package/components/Page/page.css +16 -1
  37. package/components/Page/page.scss +17 -3
  38. package/components/Popover/popover.css +2 -0
  39. package/components/Popover/popover.scss +2 -0
  40. package/components/Progress/progress.css +3 -0
  41. package/components/Progress/progress.scss +3 -0
  42. package/components/ProgressStepper/progress-stepper.css +2 -1
  43. package/components/ProgressStepper/progress-stepper.scss +2 -1
  44. package/components/SimpleList/simple-list.css +2 -2
  45. package/components/SimpleList/simple-list.scss +2 -2
  46. package/components/Switch/switch.css +3 -1
  47. package/components/Switch/switch.scss +4 -2
  48. package/components/Table/table.css +3 -3
  49. package/components/Table/table.scss +3 -2
  50. package/components/Tabs/tabs.css +1 -1
  51. package/components/Tabs/tabs.scss +1 -1
  52. package/components/Timestamp/timestamp.css +2 -1
  53. package/components/Timestamp/timestamp.scss +2 -1
  54. package/components/ToggleGroup/toggle-group.css +1 -1
  55. package/components/ToggleGroup/toggle-group.scss +1 -1
  56. package/components/Toolbar/toolbar.css +6 -1
  57. package/components/Toolbar/toolbar.scss +7 -1
  58. package/components/Wizard/wizard.css +1 -1
  59. package/components/Wizard/wizard.scss +1 -1
  60. package/components/_index.css +307 -60
  61. package/docs/components/Alert/examples/Alert.md +6 -0
  62. package/docs/components/Avatar/examples/Avatar.md +4 -4
  63. package/docs/components/Brand/examples/Brand.md +2 -2
  64. package/docs/components/Button/examples/Button.md +29 -0
  65. package/docs/components/Card/examples/Card.md +30 -0
  66. package/docs/components/DataList/examples/DataList.md +3 -3
  67. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  68. package/docs/components/Divider/examples/Divider.md +2 -2
  69. package/docs/components/Drawer/examples/Drawer.md +3 -3
  70. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  71. package/docs/components/Masthead/examples/masthead.md +1 -1
  72. package/docs/components/Menu/examples/Menu.md +8 -8
  73. package/docs/components/Nav/examples/Navigation.md +3 -0
  74. package/docs/components/Page/examples/Page.md +2 -2
  75. package/docs/components/Pagination/examples/Pagination.md +3 -3
  76. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  77. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  78. package/docs/components/Table/examples/Table.md +17 -29
  79. package/docs/components/Tabs/examples/Tabs.md +148 -6
  80. package/docs/components/TextInputGroup/examples/TextInputGroup.md +10 -0
  81. package/docs/components/Toolbar/examples/Toolbar.css +3 -0
  82. package/docs/components/Toolbar/examples/Toolbar.md +35 -7
  83. package/docs/demos/Card/examples/Card.md +32 -24
  84. package/docs/demos/CardView/examples/CardView.md +2 -0
  85. package/docs/demos/Nav/examples/Nav.md +2 -0
  86. package/docs/layouts/Flex/examples/Flex.md +1 -1
  87. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  88. package/docs/layouts/Grid/examples/Grid.md +4 -4
  89. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  90. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  91. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  92. package/docs/utilities/Display/examples/Display.md +1 -1
  93. package/docs/utilities/Flex/examples/Flex.md +1 -1
  94. package/docs/utilities/Float/examples/Float.md +1 -1
  95. package/docs/utilities/Sizing/examples/Sizing.md +6 -6
  96. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  97. package/docs/utilities/Text/examples/Text.md +1 -1
  98. package/package.json +2 -2
  99. package/patternfly-base-no-globals.css +1 -1
  100. package/patternfly-base.css +3 -3
  101. package/patternfly-charts.css +83 -0
  102. package/patternfly-charts.scss +126 -0
  103. package/patternfly-no-globals.css +308 -61
  104. package/patternfly.css +310 -63
  105. package/patternfly.min.css +1 -1
  106. package/patternfly.min.css.map +1 -1
  107. package/docs/components/TabContent/examples/TabContent.md +0 -153
@@ -574,6 +574,48 @@
574
574
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
575
575
  --pf-v6-c-alert-group--m-toast--MaxWidth: 37.5rem;
576
576
  --pf-v6-c-alert-group--m-toast--ZIndex: var(--pf-t--global--z-index--2xl);
577
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
578
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--decelerate);
579
+ --pf-v6-c-alert-group--m-toast__item--Transition--opacity--default: var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity--default)
580
+ var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity--default)
581
+ 0s;
582
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity: var(--pf-t--global--motion--duration--fade--default);
583
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--decelerate);
584
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity: var(--pf-t--global--motion--delay--none);
585
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
586
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--decelerate);
587
+ --pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform: var(--pf-t--global--motion--delay--none);
588
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--default);
589
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--decelerate);
590
+ --pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--slide-in--default);
591
+ --pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--decelerate);
592
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
593
+ --pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
594
+ --pf-v6-c-alert-group--m-toast__item--c-alert--Transition: all
595
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionDuration)
596
+ var(--pf-v6-c-alert-group--m-toast__item--c-alert--TransitionTimingFunction)
597
+ 0s;
598
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
599
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
600
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
601
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
602
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
603
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
604
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
605
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
606
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
607
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
608
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
609
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
610
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
611
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
612
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
613
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
614
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
615
+ --pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition: all
616
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
617
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
618
+ var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
577
619
  --pf-v6-c-alert-group__overflow-button--BorderWidth: 0;
578
620
  --pf-v6-c-alert-group__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
579
621
  --pf-v6-c-alert-group__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -622,15 +664,15 @@
622
664
  display: grid;
623
665
  grid-template-rows: 1fr;
624
666
  opacity: 1;
625
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
667
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--Transition--opacity--default);
626
668
  transform: translateX(0) translateY(0);
627
669
  }
628
670
  @media screen and (prefers-reduced-motion: no-preference) {
629
671
  .pf-v6-c-alert-group__item {
630
- transition: opacity var(--pf-t--global--motion--duration--fade--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), transform var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) var(--pf-t--global--motion--duration--slide-in--default), grid-template-rows var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s, margin-block var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate) 0s;
672
+ transition: opacity var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--opacity) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--opacity), transform var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--transform) var(--pf-v6-c-alert-group--m-toast__item--TransitionDelay--transform), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--grid-template-rows), margin-block var(--pf-v6-c-alert-group--m-toast__item--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--TransitionTimingFunction--margin-block);
631
673
  }
632
674
  .pf-v6-c-alert-group__item .pf-v6-c-alert {
633
- transition: all var(--pf-t--global--motion--duration--slide-in--default) var(--pf-t--global--motion--timing-function--decelerate);
675
+ transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
634
676
  }
635
677
  }
636
678
  .pf-v6-c-alert-group__item.pf-m-offstage-top {
@@ -651,21 +693,22 @@
651
693
  margin-block: 0;
652
694
  overflow: hidden;
653
695
  opacity: 0;
654
- transition: opacity var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) 0s;
655
- transform: translateX(100%);
696
+ transition: grid-template-rows 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default), margin-block 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity--default) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
656
697
  }
657
698
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
658
699
  min-height: 0;
659
700
  padding-block-start: 0;
660
701
  padding-block-end: 0;
661
702
  border-width: 0;
703
+ transition: all 0s var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
662
704
  }
663
705
  @media screen and (prefers-reduced-motion: no-preference) {
664
706
  .pf-v6-c-alert-group__item.pf-m-offstage-right {
665
- transition: transform var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, opacity var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) 0s, margin-block var(--pf-t--global--motion--duration--fade--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short), grid-template-rows var(--pf-t--global--motion--duration--slide-in--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
707
+ transition: transform var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--transform) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--transform), opacity var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--opacity) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity), margin-block var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--margin-block), grid-template-rows var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows) var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
708
+ transform: translateX(100%);
666
709
  }
667
710
  .pf-v6-c-alert-group__item.pf-m-offstage-right .pf-v6-c-alert {
668
- transition: all var(--pf-t--global--motion--duration--slide-out--short) var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--slide-out--short);
711
+ transition: var(--pf-v6-c-alert-group--m-toast__item--m-offstage-right--c-alert--Transition);
669
712
  }
670
713
  }
671
714
  .pf-v6-c-alert-group__item:hover {
@@ -1197,7 +1240,7 @@
1197
1240
  }
1198
1241
  .pf-v6-c-banner a {
1199
1242
  color: var(--pf-v6-c-banner--link--Color);
1200
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
1243
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1201
1244
  }
1202
1245
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
1203
1246
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -1210,7 +1253,7 @@
1210
1253
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
1211
1254
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
1212
1255
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
1213
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
1256
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
1214
1257
  }
1215
1258
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
1216
1259
  cursor: not-allowed;
@@ -1349,7 +1392,8 @@
1349
1392
  font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
1350
1393
  line-height: inherit;
1351
1394
  color: var(--pf-v6-c-breadcrumb__link--Color);
1352
- text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
1395
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
1396
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
1353
1397
  word-break: break-word;
1354
1398
  background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
1355
1399
  }
@@ -1363,7 +1407,7 @@
1363
1407
  }
1364
1408
  .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
1365
1409
  color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
1366
- text-decoration: none;
1410
+ text-decoration-line: none;
1367
1411
  }
1368
1412
  button.pf-v6-c-breadcrumb__link {
1369
1413
  border: none;
@@ -1410,6 +1454,7 @@ button.pf-v6-c-breadcrumb__link {
1410
1454
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1411
1455
  --pf-v6-c-button--TextDecorationLine: none;
1412
1456
  --pf-v6-c-button--TextDecorationStyle: none;
1457
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
1413
1458
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1414
1459
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1415
1460
  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -1418,6 +1463,7 @@ button.pf-v6-c-breadcrumb__link {
1418
1463
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
1419
1464
  --pf-v6-c-button--hover--TextDecorationLine: none;
1420
1465
  --pf-v6-c-button--hover--TextDecorationStyle: none;
1466
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
1421
1467
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
1422
1468
  --pf-v6-c-button--m-clicked--BorderColor: transparent;
1423
1469
  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -1502,6 +1548,12 @@ button.pf-v6-c-breadcrumb__link {
1502
1548
  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
1503
1549
  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
1504
1550
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1551
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1552
+ --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1553
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
1554
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1555
+ --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1556
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
1505
1557
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1506
1558
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1507
1559
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -1609,6 +1661,7 @@ button.pf-v6-c-breadcrumb__link {
1609
1661
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
1610
1662
  --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
1611
1663
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1664
+ --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
1612
1665
  --pf-v6-c-button--disabled--BorderColor: transparent;
1613
1666
  --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
1614
1667
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -1618,6 +1671,14 @@ button.pf-v6-c-breadcrumb__link {
1618
1671
  --pf-v6-c-button__icon--MarginInlineEnd: 0;
1619
1672
  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
1620
1673
  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
1674
+ --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
1675
+ --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
1676
+ --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
1677
+ --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1678
+ --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
1679
+ --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
1680
+ --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
1681
+ --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
1621
1682
  --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
1622
1683
  --pf-v6-c-button__progress--Opacity: 0;
1623
1684
  --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1653,7 +1714,9 @@ button.pf-v6-c-breadcrumb__link {
1653
1714
  line-height: var(--pf-v6-c-button--LineHeight, inherit);
1654
1715
  color: var(--pf-v6-c-button--Color);
1655
1716
  text-align: center;
1656
- text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle);
1717
+ text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
1718
+ text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
1719
+ text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
1657
1720
  white-space: nowrap;
1658
1721
  cursor: pointer;
1659
1722
  user-select: none;
@@ -1766,6 +1829,12 @@ button.pf-v6-c-breadcrumb__link {
1766
1829
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
1767
1830
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
1768
1831
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
1832
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
1833
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
1834
+ --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
1835
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
1836
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
1837
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
1769
1838
  text-align: start;
1770
1839
  white-space: normal;
1771
1840
  outline-offset: 0.125rem;
@@ -1919,6 +1988,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1919
1988
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
1920
1989
  --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
1921
1990
  }
1991
+ .pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
1992
+ transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
1993
+ transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
1994
+ transition-property: color;
1995
+ }
1996
+ .pf-v6-c-button.pf-m-favorited {
1997
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
1998
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
1999
+ }
2000
+ .pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
2001
+ animation-name: pf-v6-c-button-icon-favorited;
2002
+ animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
2003
+ animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
2004
+ }
1922
2005
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
1923
2006
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
1924
2007
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -1926,7 +2009,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1926
2009
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
1927
2010
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
1928
2011
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
1929
- text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
2012
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
2013
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
2014
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
1930
2015
  }
1931
2016
  .pf-v6-c-button.pf-m-clicked {
1932
2017
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -1940,6 +2025,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1940
2025
  }
1941
2026
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1942
2027
  color: var(--pf-v6-c-button--disabled--Color);
2028
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
1943
2029
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
1944
2030
  }
1945
2031
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
@@ -1971,6 +2057,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1971
2057
  .pf-v6-c-button.pf-m-in-progress.pf-m-plain > :not(.pf-v6-c-button__progress) {
1972
2058
  opacity: 0;
1973
2059
  }
2060
+ .pf-v6-c-button.pf-m-notify .pf-v6-c-button__icon {
2061
+ animation-name: pf-v6-c-button-icon-notify;
2062
+ animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2063
+ animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2064
+ }
1974
2065
 
1975
2066
  .pf-v6-c-button__icon {
1976
2067
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
@@ -2001,6 +2092,19 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2001
2092
  align-items: center;
2002
2093
  }
2003
2094
 
2095
+ @keyframes pf-v6-c-button-icon-notify {
2096
+ 33% {
2097
+ transform: rotate(30deg);
2098
+ }
2099
+ 66% {
2100
+ transform: rotate(-60deg);
2101
+ }
2102
+ }
2103
+ @keyframes pf-v6-c-button-icon-favorited {
2104
+ 50% {
2105
+ transform: scale(1.5);
2106
+ }
2107
+ }
2004
2108
  .pf-v6-c-calendar-month {
2005
2109
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2006
2110
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
@@ -2231,6 +2335,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2231
2335
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
2232
2336
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2233
2337
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2338
+ --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
2339
+ --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
2234
2340
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2235
2341
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
2236
2342
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -2394,6 +2500,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2394
2500
  .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
2395
2501
  order: 2;
2396
2502
  }
2503
+ .pf-v6-c-card__header.pf-m-wrap {
2504
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
2505
+ gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
2506
+ }
2507
+ .pf-v6-c-card__header.pf-m-wrap,
2508
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2509
+ flex-wrap: wrap;
2510
+ row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
2511
+ }
2512
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2513
+ margin-inline-start: 0;
2514
+ }
2515
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
2516
+ margin-inline-end: auto;
2517
+ }
2397
2518
 
2398
2519
  .pf-v6-c-card__header-main {
2399
2520
  flex-grow: 1;
@@ -3045,7 +3166,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3045
3166
 
3046
3167
  :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
3047
3168
  color: var(--pf-v6-c-content--a--Color);
3048
- text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
3169
+ text-decoration-line: var(--pf-v6-c-content--a--TextDecorationLine);
3170
+ text-decoration-style: var(--pf-v6-c-content--a--TextDecorationStyle);
3049
3171
  }
3050
3172
  :is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
3051
3173
  --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
@@ -4083,7 +4205,7 @@ ul) {
4083
4205
  --pf-v6-c-description-list__term--Display: inline;
4084
4206
  --pf-v6-c-description-list__term--sm--Display: flex;
4085
4207
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
4086
- --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
4208
+ --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
4087
4209
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
4088
4210
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
4089
4211
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -4265,7 +4387,8 @@ ul) {
4265
4387
  min-width: 0;
4266
4388
  }
4267
4389
  .pf-v6-c-description-list__text.pf-m-help-text {
4268
- text-decoration: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine) var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
4390
+ text-decoration-line: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine);
4391
+ text-decoration-style: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
4269
4392
  text-underline-offset: var(--pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset);
4270
4393
  cursor: pointer;
4271
4394
  }
@@ -5168,7 +5291,8 @@ ul) {
5168
5291
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
5169
5292
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5170
5293
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5171
- --pf-v6-c-drawer__panel--TransitionDuration: 250ms;
5294
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
5295
+ --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
5172
5296
  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
5173
5297
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5174
5298
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
@@ -5382,6 +5506,7 @@ ul) {
5382
5506
  overflow: auto;
5383
5507
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
5384
5508
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5509
+ transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
5385
5510
  transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
5386
5511
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
5387
5512
  -webkit-overflow-scrolling: touch;
@@ -6278,16 +6403,16 @@ ul) {
6278
6403
  --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6279
6404
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
6280
6405
  --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
6281
- --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
6406
+ --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
6282
6407
  --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
6283
6408
  --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
6284
6409
  --pf-v6-c-form__label--hover--Cursor: pointer;
6285
6410
  --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
6286
6411
  --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6287
6412
  --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
6288
- --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
6413
+ --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
6289
6414
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
6290
- --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
6415
+ --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
6291
6416
  --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
6292
6417
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
6293
6418
  --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -6601,9 +6726,6 @@ ul) {
6601
6726
  font-size: var(--pf-v6-c-form__label--FontSize);
6602
6727
  line-height: var(--pf-v6-c-form__label--LineHeight);
6603
6728
  }
6604
- .pf-v6-c-form__label::selection {
6605
- background-color: none;
6606
- }
6607
6729
  .pf-v6-c-form__label:not(.pf-m-disabled):hover {
6608
6730
  cursor: var(--pf-v6-c-form__label--hover--Cursor);
6609
6731
  }
@@ -7160,6 +7282,8 @@ select ~ .pf-v6-c-form-control__utilities {
7160
7282
  --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
7161
7283
  --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
7162
7284
  --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
7285
+ --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
7286
+ --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
7163
7287
  --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
7164
7288
  --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
7165
7289
  --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
@@ -7204,6 +7328,17 @@ select ~ .pf-v6-c-form-control__utilities {
7204
7328
  --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
7205
7329
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
7206
7330
  --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
7331
+ animation-name: --pf-v6-c-helper-text-item-fade-in;
7332
+ animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
7333
+ animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
7334
+ }
7335
+ @keyframes --pf-v6-c-helper-text-item-fade-in {
7336
+ from {
7337
+ opacity: 0;
7338
+ }
7339
+ to {
7340
+ opacity: 1;
7341
+ }
7207
7342
  }
7208
7343
  .pf-v6-c-helper-text__item.pf-m-dynamic {
7209
7344
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
@@ -7818,7 +7953,7 @@ label.pf-v6-c-input-group__text {
7818
7953
  padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBlockEnd);
7819
7954
  padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingInlineStart);
7820
7955
  padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingInlineEnd);
7821
- text-decoration: none;
7956
+ text-decoration-line: none;
7822
7957
  outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
7823
7958
  }
7824
7959
  .pf-v6-c-jump-links__link:is(:hover, :focus) {
@@ -8259,7 +8394,8 @@ label.pf-v6-c-input-group__text {
8259
8394
  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
8260
8395
  }
8261
8396
  .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
8262
- text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
8397
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
8398
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
8263
8399
  text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
8264
8400
  }
8265
8401
  .pf-v6-c-label.pf-m-editable-active {
@@ -8292,7 +8428,7 @@ label.pf-v6-c-input-group__text {
8292
8428
  --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
8293
8429
  }
8294
8430
  .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
8295
- text-decoration: none;
8431
+ text-decoration-line: none;
8296
8432
  }
8297
8433
  .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
8298
8434
  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
@@ -9032,7 +9168,7 @@ ul.pf-v6-c-list {
9032
9168
  grid-column-end: -1;
9033
9169
  row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
9034
9170
  column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
9035
- align-self: stretch;
9171
+ align-self: center;
9036
9172
  order: var(--pf-v6-c-masthead__content--Order);
9037
9173
  min-width: 0.25rem;
9038
9174
  }
@@ -9559,11 +9695,20 @@ ul.pf-v6-c-list {
9559
9695
  .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
9560
9696
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
9561
9697
  --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9562
- --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9698
+ --pf-v6-c-menu__item-external--Color: transparent;
9699
+ --pf-v6-c-menu__item-select-icon--Color: transparent;
9563
9700
  --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
9564
9701
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
9702
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
9703
+ }
9704
+ .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
9705
+ .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) {
9565
9706
  pointer-events: none;
9566
9707
  }
9708
+ .pf-v6-c-menu__list-item.pf-m-aria-disabled .pf-v6-c-menu__item,
9709
+ .pf-v6-c-menu__item-action.pf-m-aria-disabled .pf-v6-c-menu__item {
9710
+ cursor: default;
9711
+ }
9567
9712
 
9568
9713
  [class*=pf-v6-c-menu]:is([hidden]) {
9569
9714
  display: none;
@@ -9707,7 +9852,6 @@ ul.pf-v6-c-list {
9707
9852
  z-index: var(--pf-v6-c-menu--ZIndex);
9708
9853
  margin-block-start: calc(var(--pf-v6-c-menu--RowGap) * -1);
9709
9854
  margin-block-end: calc(var(--pf-v6-c-menu--RowGap) * -1);
9710
- overflow: hidden;
9711
9855
  }
9712
9856
  .pf-v6-c-menu.pf-m-scrollable .pf-v6-c-menu__list {
9713
9857
  padding-block-start: var(--pf-v6-c-menu--RowGap);
@@ -9811,7 +9955,7 @@ ul.pf-v6-c-list {
9811
9955
  line-height: var(--pf-v6-c-menu__item--LineHeight);
9812
9956
  color: var(--pf-v6-c-menu__item--Color);
9813
9957
  text-align: start;
9814
- text-decoration: none;
9958
+ text-decoration-line: none;
9815
9959
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
9816
9960
  border: 0;
9817
9961
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
@@ -9931,16 +10075,16 @@ ul.pf-v6-c-list {
9931
10075
  opacity: 0;
9932
10076
  }
9933
10077
 
9934
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button,
10078
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover, .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited),
9935
10079
  .pf-v6-c-menu__item-action.pf-m-favorited,
9936
10080
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
9937
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
10081
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
9938
10082
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9939
10083
  }
9940
- .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
10084
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus),
9941
10085
  .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
9942
10086
  .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
9943
- .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
10087
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
9944
10088
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9945
10089
  }
9946
10090
 
@@ -10085,12 +10229,16 @@ ul.pf-v6-c-list {
10085
10229
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
10086
10230
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
10087
10231
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
10232
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
10233
+ --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
10088
10234
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10089
10235
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
10090
10236
  --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
10091
10237
  --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
10092
10238
  --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
10093
10239
  --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
10240
+ --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
10241
+ --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
10094
10242
  --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
10095
10243
  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
10096
10244
  }
@@ -10239,6 +10387,28 @@ ul.pf-v6-c-list {
10239
10387
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
10240
10388
  --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
10241
10389
  }
10390
+ @media screen and (prefers-reduced-motion: no-preference) {
10391
+ .pf-v6-c-menu-toggle.pf-m-danger {
10392
+ transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
10393
+ animation-name: pf-v6-c-menu-toggle-m-danger-motion;
10394
+ animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
10395
+ animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
10396
+ animation-fill-mode: both;
10397
+ }
10398
+ }
10399
+ .pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
10400
+ animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
10401
+ animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
10402
+ animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
10403
+ }
10404
+ @keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
10405
+ from {
10406
+ opacity: 0;
10407
+ }
10408
+ to {
10409
+ opacity: 1;
10410
+ }
10411
+ }
10242
10412
  .pf-v6-c-menu-toggle.pf-m-placeholder {
10243
10413
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
10244
10414
  }
@@ -10254,6 +10424,21 @@ ul.pf-v6-c-list {
10254
10424
  pointer-events: none;
10255
10425
  }
10256
10426
 
10427
+ @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
10428
+ syntax: "<length>";
10429
+ inherits: false;
10430
+ initial-value: 0;
10431
+ }
10432
+ @media (prefers-reduced-motion: no-preference) {
10433
+ @keyframes pf-v6-c-menu-toggle-m-danger-motion {
10434
+ 33% {
10435
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
10436
+ }
10437
+ 66% {
10438
+ --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
10439
+ }
10440
+ }
10441
+ }
10257
10442
  .pf-v6-c-menu-toggle.pf-m-split-button {
10258
10443
  --pf-v6-c-menu-toggle--Gap: 0;
10259
10444
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
@@ -10843,13 +11028,15 @@ ul.pf-v6-c-list {
10843
11028
  --pf-v6-c-nav__item--ScrollSnapAlign: end;
10844
11029
  --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
10845
11030
  --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
10846
- --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
10847
- --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
11031
+ --pf-v6-c-nav__section-title--PaddingBlockStart: 0;
11032
+ --pf-v6-c-nav__section-title--PaddingBlockEnd: 0;
10848
11033
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
10849
11034
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
10850
11035
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
10851
11036
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
10852
11037
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
11038
+ --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
11039
+ --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
10853
11040
  --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
10854
11041
  --pf-v6-c-nav__link--AlignItems: baseline;
10855
11042
  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -10860,10 +11047,19 @@ ul.pf-v6-c-list {
10860
11047
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
10861
11048
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
10862
11049
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
11050
+ --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default);
11051
+ --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
11052
+ --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short);
11053
+ --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
10863
11054
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
10864
11055
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
10865
11056
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
11057
+ --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11058
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
10866
11059
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11060
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: 0s;
11061
+ --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: 0s;
11062
+ --pf-v6-c-nav__subnav--TransitionTimingFunction--expansion: var(--pf-t--global--motion--timing-function--default);
10867
11063
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
10868
11064
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
10869
11065
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -10892,6 +11088,12 @@ ul.pf-v6-c-list {
10892
11088
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
10893
11089
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10894
11090
  }
11091
+ @media (prefers-reduced-motion: no-preference) {
11092
+ .pf-v6-c-nav {
11093
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--default);
11094
+ --pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion: var(--pf-t--global--motion--duration--slide-in--short);
11095
+ }
11096
+ }
10895
11097
 
10896
11098
  .pf-v6-c-nav,
10897
11099
  .pf-v6-c-nav__section,
@@ -10943,7 +11145,7 @@ ul.pf-v6-c-list {
10943
11145
  }
10944
11146
 
10945
11147
  [class^=pf-v6-c-nav][hidden] {
10946
- display: none;
11148
+ visibility: hidden;
10947
11149
  }
10948
11150
 
10949
11151
  .pf-v6-c-nav__nav,
@@ -10952,30 +11154,43 @@ ul.pf-v6-c-list {
10952
11154
  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
10953
11155
  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
10954
11156
  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11157
+ visibility: visible;
10955
11158
  }
10956
11159
 
10957
11160
  .pf-v6-c-nav__list {
10958
11161
  row-gap: var(--pf-v6-c-nav__list--RowGap);
10959
11162
  column-gap: var(--pf-v6-c-nav__list--ColumnGap);
11163
+ min-height: 0;
10960
11164
  }
10961
11165
 
10962
11166
  .pf-v6-c-nav__subnav {
10963
11167
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11168
+ grid-template-rows: 1fr;
11169
+ min-height: 0;
11170
+ padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11171
+ padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
10964
11172
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
11173
+ overflow-y: clip;
11174
+ transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expansion);
11175
+ transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expansion);
11176
+ transition-property: grid-template-rows, padding-block-start, padding-block-end, opacity;
11177
+ }
11178
+ .pf-v6-c-nav__subnav[hidden] {
11179
+ --pf-v6-c-nav__subnav--TransitionDuration--expansion: var(--pf-v6-c-nav__subnav--hidden--TransitionDuration--expansion);
11180
+ --pf-v6-c-nav__subnav--PaddingBlockStart: 0;
11181
+ --pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
11182
+ grid-template-rows: 0fr;
11183
+ opacity: 0;
10965
11184
  }
10966
11185
 
10967
11186
  .pf-v6-c-nav__item {
10968
- row-gap: var(--pf-v6-c-nav__item--RowGap);
10969
11187
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
10970
11188
  }
10971
11189
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
10972
11190
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
10973
11191
  }
10974
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
10975
- margin-block-end: var(--pf-v6-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v6-c-nav__item--RowGap));
10976
- }
10977
- .pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v6-c-nav__item > .pf-v6-c-nav__link::before {
10978
- inset-block-start: calc(var(--pf-v6-c-nav__item--RowGap) * -1 - var(--pf-v6-c-nav__list--RowGap));
11192
+ .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
11193
+ margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
10979
11194
  }
10980
11195
 
10981
11196
  .pf-v6-c-nav__section {
@@ -11006,13 +11221,13 @@ ul.pf-v6-c-list {
11006
11221
  line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
11007
11222
  color: var(--pf-v6-c-nav__link--Color);
11008
11223
  text-align: start;
11009
- text-decoration: none;
11224
+ text-decoration-line: none;
11010
11225
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
11011
11226
  border: none;
11012
11227
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
11013
- }
11014
- .pf-v6-c-nav__link[aria-expanded=true]::before {
11015
- inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
11228
+ transition-timing-function: var(--pf-v6-c-nav__link--TransitionTimingFunction--background-color), var(--pf-v6-c-nav__link--m-current--TransitionTimingFunction--color);
11229
+ transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color);
11230
+ transition-property: background-color, color;
11016
11231
  }
11017
11232
  .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
11018
11233
  color: var(--pf-v6-c-nav__link--hover--Color);
@@ -11037,6 +11252,9 @@ ul.pf-v6-c-list {
11037
11252
 
11038
11253
  .pf-v6-c-nav__toggle-icon {
11039
11254
  display: inline-block;
11255
+ transition-timing-function: var(--pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform);
11256
+ transition-duration: var(--pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform);
11257
+ transition-property: transform;
11040
11258
  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
11041
11259
  }
11042
11260
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
@@ -11476,12 +11694,18 @@ ul.pf-v6-c-list {
11476
11694
  --pf-v6-c-page__main-container--GridArea: main;
11477
11695
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
11478
11696
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
11697
+ --pf-v6-c-page__main-container--AlignSelf: start;
11479
11698
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11480
11699
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
11481
11700
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
11482
11701
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
11483
11702
  --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
11484
11703
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
11704
+ --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
11705
+ --pf-v6-c-page__main-container--xs--BorderRadius: 0;
11706
+ --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
11707
+ --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
11708
+ --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
11485
11709
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
11486
11710
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11487
11711
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -11839,7 +12063,7 @@ ul.pf-v6-c-list {
11839
12063
  .pf-v6-c-page__main-container {
11840
12064
  display: flex;
11841
12065
  flex-direction: column;
11842
- align-self: start;
12066
+ align-self: var(--pf-v6-c-page__main-container--AlignSelf);
11843
12067
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
11844
12068
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
11845
12069
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -11847,6 +12071,15 @@ ul.pf-v6-c-list {
11847
12071
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
11848
12072
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
11849
12073
  }
12074
+ @media screen and (max-width: calc(48rem - 1px)) {
12075
+ .pf-v6-c-page__main-container {
12076
+ --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
12077
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12078
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12079
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
12080
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
12081
+ }
12082
+ }
11850
12083
 
11851
12084
  .pf-v6-c-page__main-container,
11852
12085
  .pf-v6-c-page__drawer {
@@ -12709,9 +12942,11 @@ ul.pf-v6-c-list {
12709
12942
  }
12710
12943
 
12711
12944
  .pf-v6-c-popover__title-text {
12945
+ min-width: 0;
12712
12946
  font-size: var(--pf-v6-c-popover__title-text--FontSize);
12713
12947
  font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
12714
12948
  color: var(--pf-v6-c-popover__title-text--Color);
12949
+ overflow-wrap: break-word;
12715
12950
  }
12716
12951
 
12717
12952
  .pf-v6-c-popover__body {
@@ -12726,6 +12961,7 @@ ul.pf-v6-c-list {
12726
12961
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
12727
12962
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
12728
12963
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12964
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
12729
12965
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
12730
12966
  --pf-v6-c-progress__status--Gap: var(--pf-t--global--spacer--sm);
12731
12967
  --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -12867,7 +13103,9 @@ ul.pf-v6-c-list {
12867
13103
  grid-column: 1/3;
12868
13104
  align-self: center;
12869
13105
  height: var(--pf-v6-c-progress__bar--Height);
13106
+ overflow: hidden;
12870
13107
  background-color: var(--pf-v6-c-progress__bar--BackgroundColor);
13108
+ border-radius: var(--pf-v6-c-progress__bar--BorderRadius);
12871
13109
  }
12872
13110
 
12873
13111
  .pf-v6-c-progress__indicator {
@@ -13204,7 +13442,8 @@ ul.pf-v6-c-list {
13204
13442
  .pf-v6-c-progress-stepper__step-title.pf-m-help-text {
13205
13443
  padding-inline-start: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
13206
13444
  padding-inline-end: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
13207
- text-decoration: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine) var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
13445
+ text-decoration-line: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine);
13446
+ text-decoration-style: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
13208
13447
  text-underline-offset: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
13209
13448
  cursor: pointer;
13210
13449
  }
@@ -13957,7 +14196,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
13957
14196
  font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
13958
14197
  color: var(--pf-v6-c-simple-list__item-link--Color);
13959
14198
  text-align: start;
13960
- text-decoration: none;
14199
+ text-decoration-line: none;
13961
14200
  background-color: var(--pf-v6-c-simple-list__item-link--BackgroundColor);
13962
14201
  border: none;
13963
14202
  border-radius: var(--pf-v6-c-simple-list__item-link--BorderRadius);
@@ -13970,7 +14209,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
13970
14209
  .pf-v6-c-simple-list__item-link:is(:hover, :focus) {
13971
14210
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--hover--BackgroundColor);
13972
14211
  --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--hover--Color);
13973
- text-decoration: none;
14212
+ text-decoration-line: none;
13974
14213
  }
13975
14214
  .pf-v6-c-simple-list__item-link.pf-m-current {
13976
14215
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--m-current--BackgroundColor);
@@ -14501,7 +14740,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14501
14740
  --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
14502
14741
  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
14503
14742
  --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
14504
- --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
14743
+ --pf-v6-c-switch__toggle--before--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
14744
+ --pf-v6-c-switch__toggle--before--TransitionDuration: var(--pf-t--global--motion--duration--md);
14745
+ --pf-v6-c-switch__toggle--before--Transition: transform var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration), background-color var(--pf-v6-c-switch__toggle--before--TransitionTimingFunction) var(--pf-v6-c-switch__toggle--before--TransitionDuration);
14505
14746
  --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
14506
14747
  }
14507
14748
 
@@ -16816,13 +17057,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
16816
17057
  vertical-align: baseline;
16817
17058
  }
16818
17059
 
16819
- .pf-v6-c-table__favorite .pf-v6-c-button {
17060
+ .pf-v6-c-table__favorite .pf-v6-c-button:not(.pf-m-favorite) {
16820
17061
  --pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
16821
17062
  }
16822
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
17063
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited) {
16823
17064
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16824
17065
  }
16825
- .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
17066
+ .pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:not(.pf-m-favorited):is(:hover, :focus) {
16826
17067
  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
16827
17068
  }
16828
17069
 
@@ -18482,7 +18723,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18482
18723
  padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
18483
18724
  font-size: var(--pf-v6-c-tabs__link--FontSize);
18484
18725
  color: var(--pf-v6-c-tabs__link--Color);
18485
- text-decoration: none;
18726
+ text-decoration-line: none;
18486
18727
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
18487
18728
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
18488
18729
  }
@@ -19122,7 +19363,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19122
19363
  }
19123
19364
  .pf-v6-c-timestamp.pf-m-help-text {
19124
19365
  --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
19125
- text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
19366
+ text-decoration-line: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine);
19367
+ text-decoration-style: var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
19126
19368
  text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
19127
19369
  cursor: pointer;
19128
19370
  }
@@ -19335,7 +19577,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19335
19577
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
19336
19578
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
19337
19579
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
19338
- text-decoration: none;
19580
+ text-decoration-line: none;
19339
19581
  }
19340
19582
  .pf-v6-c-toggle-group__button.pf-m-selected {
19341
19583
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--m-selected--BackgroundColor);
@@ -19583,13 +19825,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19583
19825
  }
19584
19826
  .pf-v6-c-toolbar.pf-m-full-height {
19585
19827
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
19586
- --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
19828
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
19587
19829
  }
19588
19830
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
19589
19831
  .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
19590
19832
  align-items: stretch;
19591
19833
  align-self: stretch;
19592
19834
  }
19835
+ .pf-v6-c-toolbar.pf-m-no-padding {
19836
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
19837
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
19838
+ --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
19839
+ }
19593
19840
  .pf-v6-c-toolbar.pf-m-primary {
19594
19841
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
19595
19842
  }
@@ -22286,7 +22533,7 @@ label.pf-v6-c-tree-view__node-text {
22286
22533
  padding-inline: 0;
22287
22534
  color: var(--pf-v6-c-wizard__nav-link--Color);
22288
22535
  text-align: start;
22289
- text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
22536
+ text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
22290
22537
  word-break: break-word;
22291
22538
  counter-increment: wizard-nav-count;
22292
22539
  background-color: transparent;