@patternfly/react-styles 6.4.0 → 6.5.0-prerelease.10

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 (134) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/README.md +1 -1
  3. package/css/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/css/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/css/assets/images/RHServerStackIcon.svg +16 -0
  6. package/css/assets/images/compass--hero-bg.png +0 -0
  7. package/css/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/css/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/css/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/css/assets/images/compass--wallpaper-light.png +0 -0
  11. package/css/components/ActionList/action-list.css +9 -0
  12. package/css/components/ActionList/action-list.d.ts +2 -1
  13. package/css/components/ActionList/action-list.js +2 -1
  14. package/css/components/ActionList/action-list.mjs +2 -1
  15. package/css/components/Button/button.css +34 -4
  16. package/css/components/Button/button.d.ts +1 -0
  17. package/css/components/Button/button.js +1 -0
  18. package/css/components/Button/button.mjs +1 -0
  19. package/css/components/Card/card.css +12 -0
  20. package/css/components/Card/card.d.ts +3 -1
  21. package/css/components/Card/card.js +3 -1
  22. package/css/components/Card/card.mjs +3 -1
  23. package/css/components/Compass/compass.css +316 -0
  24. package/css/components/Compass/compass.d.ts +36 -0
  25. package/css/components/Compass/compass.js +37 -0
  26. package/css/components/Compass/compass.mjs +35 -0
  27. package/css/components/DataList/data-list.css +5 -1
  28. package/css/components/DataList/data-list.d.ts +1 -0
  29. package/css/components/DataList/data-list.js +1 -0
  30. package/css/components/DataList/data-list.mjs +1 -0
  31. package/css/components/Drawer/drawer.css +72 -28
  32. package/css/components/Drawer/drawer.d.ts +2 -0
  33. package/css/components/Drawer/drawer.js +2 -0
  34. package/css/components/Drawer/drawer.mjs +2 -0
  35. package/css/components/ExpandableSection/expandable-section.css +3 -0
  36. package/css/components/Hero/hero.css +74 -0
  37. package/css/components/Hero/hero.d.ts +11 -0
  38. package/css/components/Hero/hero.js +12 -0
  39. package/css/components/Hero/hero.mjs +10 -0
  40. package/css/components/Masthead/masthead.css +52 -0
  41. package/css/components/Masthead/masthead.d.ts +1 -0
  42. package/css/components/Masthead/masthead.js +1 -0
  43. package/css/components/Masthead/masthead.mjs +1 -0
  44. package/css/components/Menu/menu.css +1 -1
  45. package/css/components/MenuToggle/menu-toggle.css +4 -0
  46. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  47. package/css/components/MenuToggle/menu-toggle.js +1 -0
  48. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  49. package/css/components/Nav/nav.css +59 -0
  50. package/css/components/Nav/nav.d.ts +3 -1
  51. package/css/components/Nav/nav.js +3 -1
  52. package/css/components/Nav/nav.mjs +3 -1
  53. package/css/components/Page/page.css +20 -0
  54. package/css/components/Page/page.d.ts +2 -0
  55. package/css/components/Page/page.js +2 -0
  56. package/css/components/Page/page.mjs +2 -0
  57. package/css/components/Panel/panel.css +1 -1
  58. package/css/components/Spinner/spinner.css +3 -0
  59. package/css/components/Spinner/spinner.d.ts +1 -0
  60. package/css/components/Spinner/spinner.js +1 -0
  61. package/css/components/Spinner/spinner.mjs +1 -0
  62. package/css/components/Table/table.css +3 -0
  63. package/css/components/Table/table.d.ts +1 -0
  64. package/css/components/Table/table.js +1 -0
  65. package/css/components/Table/table.mjs +1 -0
  66. package/css/components/Tabs/tabs.css +16 -1
  67. package/css/components/Tabs/tabs.d.ts +1 -0
  68. package/css/components/Tabs/tabs.js +1 -0
  69. package/css/components/Tabs/tabs.mjs +1 -0
  70. package/css/components/Toolbar/toolbar.css +32 -6
  71. package/css/components/Toolbar/toolbar.d.ts +1 -0
  72. package/css/components/Toolbar/toolbar.js +1 -0
  73. package/css/components/Toolbar/toolbar.mjs +1 -0
  74. package/css/components/_index.css +792 -117
  75. package/css/components/_index.d.ts +34 -4
  76. package/css/components/_index.js +34 -4
  77. package/css/components/_index.mjs +34 -4
  78. package/css/docs/components/Compass/examples/Compass.css +17 -0
  79. package/css/docs/components/Compass/examples/Compass.d.ts +6 -0
  80. package/css/docs/components/Compass/examples/Compass.js +7 -0
  81. package/css/docs/components/Compass/examples/Compass.mjs +5 -0
  82. package/css/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  83. package/css/docs/layouts/Bullseye/examples/Bullseye.d.ts +1 -1
  84. package/css/docs/layouts/Bullseye/examples/Bullseye.js +1 -1
  85. package/css/docs/layouts/Bullseye/examples/Bullseye.mjs +1 -1
  86. package/css/docs/layouts/Flex/examples/Flex.css +3 -3
  87. package/css/docs/layouts/Flex/examples/Flex.d.ts +2 -2
  88. package/css/docs/layouts/Flex/examples/Flex.js +2 -2
  89. package/css/docs/layouts/Flex/examples/Flex.mjs +2 -2
  90. package/css/docs/layouts/Gallery/examples/Gallery.css +2 -2
  91. package/css/docs/layouts/Gallery/examples/Gallery.d.ts +1 -1
  92. package/css/docs/layouts/Gallery/examples/Gallery.js +1 -1
  93. package/css/docs/layouts/Gallery/examples/Gallery.mjs +1 -1
  94. package/css/docs/layouts/Grid/examples/Grid.css +1 -1
  95. package/css/docs/layouts/Grid/examples/Grid.d.ts +1 -1
  96. package/css/docs/layouts/Grid/examples/Grid.js +1 -1
  97. package/css/docs/layouts/Grid/examples/Grid.mjs +1 -1
  98. package/css/docs/layouts/Level/examples/Level.css +3 -3
  99. package/css/docs/layouts/Level/examples/Level.d.ts +1 -1
  100. package/css/docs/layouts/Level/examples/Level.js +1 -1
  101. package/css/docs/layouts/Level/examples/Level.mjs +1 -1
  102. package/css/docs/layouts/Split/examples/Split.css +1 -1
  103. package/css/docs/layouts/Split/examples/Split.d.ts +1 -1
  104. package/css/docs/layouts/Split/examples/Split.js +1 -1
  105. package/css/docs/layouts/Split/examples/Split.mjs +1 -1
  106. package/css/docs/layouts/Stack/examples/Stack.css +3 -3
  107. package/css/docs/layouts/Stack/examples/Stack.d.ts +1 -1
  108. package/css/docs/layouts/Stack/examples/Stack.js +1 -1
  109. package/css/docs/layouts/Stack/examples/Stack.mjs +1 -1
  110. package/css/docs/utilities/Alignment/examples/Alignment.css +4 -4
  111. package/css/docs/utilities/Alignment/examples/Alignment.d.ts +1 -1
  112. package/css/docs/utilities/Alignment/examples/Alignment.js +1 -1
  113. package/css/docs/utilities/Alignment/examples/Alignment.mjs +1 -1
  114. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  115. package/css/docs/utilities/BoxShadow/examples/box-shadow.d.ts +1 -1
  116. package/css/docs/utilities/BoxShadow/examples/box-shadow.js +1 -1
  117. package/css/docs/utilities/BoxShadow/examples/box-shadow.mjs +1 -1
  118. package/css/docs/utilities/Display/examples/Display.css +1 -1
  119. package/css/docs/utilities/Display/examples/Display.d.ts +1 -1
  120. package/css/docs/utilities/Display/examples/Display.js +1 -1
  121. package/css/docs/utilities/Display/examples/Display.mjs +1 -1
  122. package/css/docs/utilities/Flex/examples/Flex.css +7 -7
  123. package/css/docs/utilities/Flex/examples/Flex.d.ts +1 -1
  124. package/css/docs/utilities/Flex/examples/Flex.js +1 -1
  125. package/css/docs/utilities/Flex/examples/Flex.mjs +1 -1
  126. package/css/docs/utilities/Float/examples/Float.css +2 -2
  127. package/css/docs/utilities/Float/examples/Float.d.ts +1 -1
  128. package/css/docs/utilities/Float/examples/Float.js +1 -1
  129. package/css/docs/utilities/Float/examples/Float.mjs +1 -1
  130. package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
  131. package/css/docs/utilities/Spacing/examples/Spacing.d.ts +1 -1
  132. package/css/docs/utilities/Spacing/examples/Spacing.js +1 -1
  133. package/css/docs/utilities/Spacing/examples/Spacing.mjs +1 -1
  134. package/package.json +3 -3
@@ -445,7 +445,9 @@
445
445
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
446
446
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);
447
447
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
448
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);
448
449
  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
450
+ --pf-v6-c-action-list--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
449
451
  }
450
452
 
451
453
  .pf-v6-c-action-list,
@@ -460,8 +462,15 @@
460
462
  }
461
463
  .pf-v6-c-action-list.pf-m-icons {
462
464
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
465
+ --pf-v6-c-action-list--m-vertical--RowGap: var(--pf-v6-c-action-list--m-vertical--m-icons--RowGap);
463
466
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
464
467
  }
468
+ .pf-v6-c-action-list.pf-m-vertical, .pf-v6-c-action-list.pf-m-vertical .pf-v6-c-action-list__group {
469
+ flex-direction: column;
470
+ }
471
+ .pf-v6-c-action-list.pf-m-vertical {
472
+ row-gap: var(--pf-v6-c-action-list--m-vertical--RowGap);
473
+ }
465
474
 
466
475
  .pf-v6-c-action-list__group {
467
476
  row-gap: var(--pf-v6-c-action-list__group--RowGap, var(--pf-v6-c-action-list--RowGap));
@@ -1676,10 +1685,17 @@ button.pf-v6-c-breadcrumb__link {
1676
1685
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1677
1686
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1678
1687
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1688
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1679
1689
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1680
1690
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1691
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1692
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1681
1693
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1682
1694
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1695
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1696
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1697
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1698
+ --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
1683
1699
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1684
1700
  --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
1685
1701
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -1689,10 +1705,8 @@ button.pf-v6-c-breadcrumb__link {
1689
1705
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1690
1706
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1691
1707
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1692
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
1693
1708
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1694
1709
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1695
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
1696
1710
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1697
1711
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1698
1712
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -1878,6 +1892,14 @@ button.pf-v6-c-breadcrumb__link {
1878
1892
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1879
1893
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1880
1894
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
1895
+ --pf-v6-c-button--m-circle--ScaleX: 1.29;
1896
+ --pf-v6-c-button--m-circle--ScaleY: 1.29;
1897
+ --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1898
+ --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
1899
+ --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
1900
+ --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
1901
+ --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
1902
+ --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
1881
1903
  }
1882
1904
 
1883
1905
  .pf-v6-c-button {
@@ -2009,12 +2031,13 @@ button.pf-v6-c-breadcrumb__link {
2009
2031
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2010
2032
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2011
2033
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2034
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
2035
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
2036
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
2012
2037
  --pf-v6-c-button--BackgroundColor: transparent;
2013
2038
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2014
2039
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2015
2040
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
2016
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2017
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2018
2041
  --pf-v6-c-button--hover--BackgroundColor: transparent;
2019
2042
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2020
2043
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -2023,6 +2046,8 @@ button.pf-v6-c-breadcrumb__link {
2023
2046
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
2024
2047
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
2025
2048
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
2049
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2050
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2026
2051
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2027
2052
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2028
2053
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -2030,6 +2055,7 @@ button.pf-v6-c-breadcrumb__link {
2030
2055
  --pf-v6-c-button--hover--BorderWidth: 0;
2031
2056
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2032
2057
  text-align: start;
2058
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2033
2059
  white-space: normal;
2034
2060
  background: transparent;
2035
2061
  outline-offset: 0.125rem;
@@ -2040,6 +2066,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2040
2066
  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2041
2067
  }
2042
2068
 
2069
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2070
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2071
+ }
2043
2072
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2044
2073
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2045
2074
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -2245,6 +2274,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2245
2274
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
2246
2275
  --pf-v6-c-button--hover__icon--ScaleX: 1;
2247
2276
  }
2277
+ .pf-v6-c-button.pf-m-circle {
2278
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
2279
+ --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
2280
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
2281
+ --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
2282
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
2283
+ }
2284
+ .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
2285
+ scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
2286
+ }
2248
2287
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2249
2288
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
2250
2289
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -2782,6 +2821,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2782
2821
  .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
2783
2822
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
2784
2823
  }
2824
+ .pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
2825
+ --pf-v6-c-card__actions--PaddingInlineStart: 0;
2826
+ --pf-v6-c-card__actions--MarginBlockStart: 0;
2827
+ --pf-v6-c-card__actions--MarginBlockEnd: 0;
2828
+ }
2829
+
2785
2830
  .pf-v6-c-card.pf-m-compact {
2786
2831
  --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
2787
2832
  --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -2887,6 +2932,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2887
2932
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2888
2933
  }
2889
2934
 
2935
+ .pf-v6-c-card__subtitle {
2936
+ padding-block-start: var(--pf-t--global--spacer--sm);
2937
+ font-size: var(--pf-t--global--font--size--body--sm);
2938
+ color: var(--pf-t--global--text--color--subtle);
2939
+ }
2940
+
2890
2941
  .pf-v6-c-card__actions {
2891
2942
  display: flex;
2892
2943
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -3456,6 +3507,322 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3456
3507
  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
3457
3508
  }
3458
3509
 
3510
+ .pf-v6-c-compass {
3511
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
3512
+ --pf-v6-c-compass--BackgroundImage--light: none;
3513
+ --pf-v6-c-compass--BackgroundImage--dark: none;
3514
+ --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3515
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
3516
+ --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3517
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3518
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3519
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3520
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3521
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3522
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3523
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3524
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3525
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3526
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3527
+ --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3528
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3529
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3530
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3531
+ --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3532
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3533
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3534
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3535
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3536
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3537
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3538
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3539
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3540
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3541
+ --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3542
+ --pf-v6-c-compass__message-bar--Width: 450px;
3543
+ --pf-v6-c-compass__message-bar--MinWidth: 300px;
3544
+ --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3545
+ --pf-v6-c-compass--section--slide--length--header: 100%;
3546
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
3547
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
3548
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
3549
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
3550
+ --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3551
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
3552
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3553
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3554
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
3555
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
3556
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3557
+ }
3558
+ @media screen and (prefers-reduced-motion: no-preference) {
3559
+ .pf-v6-c-compass {
3560
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3561
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3562
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
3563
+ }
3564
+ .pf-v6-c-compass.pf-m-animate-smoothly {
3565
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3566
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
3567
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
3568
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
3569
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
3570
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3571
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3572
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
3573
+ }
3574
+ }
3575
+
3576
+ .pf-v6-c-compass {
3577
+ interpolate-size: allow-keywords;
3578
+ display: grid;
3579
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3580
+ grid-template-rows: auto 1fr;
3581
+ grid-template-columns: auto 1fr auto;
3582
+ grid-auto-rows: auto;
3583
+ align-items: center;
3584
+ justify-content: center;
3585
+ height: 100dvh;
3586
+ padding: var(--pf-v6-c-compass--Padding);
3587
+ overflow: hidden;
3588
+ background-image: var(--pf-v6-c-compass--BackgroundImage);
3589
+ background-size: cover;
3590
+ }
3591
+ .pf-v6-c-compass.pf-m-dock {
3592
+ grid-template-areas: "dock main";
3593
+ grid-template-rows: auto;
3594
+ grid-template-columns: auto 1fr;
3595
+ align-items: stretch;
3596
+ padding: 0;
3597
+ }
3598
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
3599
+ padding: var(--pf-v6-c-compass--Padding);
3600
+ }
3601
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3602
+ --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3603
+ }
3604
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3605
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3606
+ }
3607
+
3608
+ .pf-v6-c-compass__header,
3609
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3610
+ .pf-v6-c-compass__main-footer,
3611
+ .pf-v6-c-compass__footer {
3612
+ margin: 0;
3613
+ visibility: hidden;
3614
+ opacity: 0;
3615
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
3616
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
3617
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
3618
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
3619
+ }
3620
+ .pf-v6-c-compass__header.pf-m-expanded,
3621
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
3622
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3623
+ .pf-v6-c-compass__footer.pf-m-expanded {
3624
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
3625
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
3626
+ visibility: visible;
3627
+ opacity: 1;
3628
+ translate: 0;
3629
+ }
3630
+
3631
+ .pf-v6-c-compass__header,
3632
+ .pf-v6-c-compass__main-footer,
3633
+ .pf-v6-c-compass__footer {
3634
+ height: 0;
3635
+ }
3636
+ .pf-v6-c-compass__header.pf-m-expanded,
3637
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3638
+ .pf-v6-c-compass__footer.pf-m-expanded {
3639
+ height: auto;
3640
+ }
3641
+
3642
+ .pf-v6-c-compass__header {
3643
+ display: grid;
3644
+ grid-area: header;
3645
+ grid-template-columns: 1fr auto 1fr;
3646
+ align-items: start;
3647
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
3648
+ }
3649
+ .pf-v6-c-compass__header.pf-m-expanded {
3650
+ margin-block-end: var(--pf-v6-c-compass--Gap);
3651
+ }
3652
+
3653
+ .pf-v6-c-compass__profile {
3654
+ justify-self: end;
3655
+ }
3656
+ .pf-v6-c-compass__profile .pf-v6-c-menu-toggle.pf-m-plain {
3657
+ margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
3658
+ }
3659
+
3660
+ .pf-v6-c-compass__nav {
3661
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3662
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3663
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3664
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3665
+ display: flex;
3666
+ flex-direction: column;
3667
+ gap: var(--pf-v6-c-compass__nav--RowGap);
3668
+ align-items: center;
3669
+ justify-self: stretch;
3670
+ }
3671
+
3672
+ .pf-v6-c-compass__nav-content {
3673
+ display: flex;
3674
+ align-items: center;
3675
+ }
3676
+
3677
+ .pf-v6-c-compass__nav-main {
3678
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3679
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3680
+ }
3681
+
3682
+ .pf-v6-c-compass__sidebar {
3683
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3684
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3685
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3686
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3687
+ display: flex;
3688
+ width: 0;
3689
+ }
3690
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
3691
+ width: auto;
3692
+ }
3693
+ .pf-v6-c-compass__sidebar.pf-m-start {
3694
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3695
+ grid-area: sidebar-start;
3696
+ }
3697
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3698
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3699
+ }
3700
+
3701
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
3702
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
3703
+ }
3704
+ .pf-v6-c-compass__sidebar.pf-m-end {
3705
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3706
+ grid-area: sidebar-end;
3707
+ }
3708
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
3709
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3710
+ }
3711
+
3712
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
3713
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
3714
+ }
3715
+
3716
+ .pf-v6-c-compass__main {
3717
+ display: flex;
3718
+ flex-direction: column;
3719
+ grid-area: main;
3720
+ gap: var(--pf-v6-c-compass__main--RowGap);
3721
+ align-self: stretch;
3722
+ min-height: 0;
3723
+ }
3724
+
3725
+ .pf-v6-c-compass__main-header-content {
3726
+ display: flex;
3727
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
3728
+ }
3729
+
3730
+ .pf-v6-c-compass__main-header-title {
3731
+ flex-grow: 1;
3732
+ }
3733
+
3734
+ .pf-v6-c-compass__content {
3735
+ display: flex;
3736
+ flex: 1 0 0;
3737
+ flex-direction: column;
3738
+ min-height: 0;
3739
+ overflow: auto;
3740
+ }
3741
+ .pf-v6-c-compass__content > *:last-child {
3742
+ flex-grow: 1;
3743
+ max-height: 100%;
3744
+ }
3745
+
3746
+ .pf-v6-c-compass__main-footer {
3747
+ display: flex;
3748
+ justify-content: center;
3749
+ min-height: 0;
3750
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3751
+ }
3752
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
3753
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3754
+ }
3755
+
3756
+ .pf-v6-c-compass__footer {
3757
+ display: flex;
3758
+ grid-column: 1/-1;
3759
+ justify-content: center;
3760
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3761
+ }
3762
+ .pf-v6-c-compass__footer.pf-m-expanded {
3763
+ margin-block-start: var(--pf-v6-c-compass--Gap);
3764
+ }
3765
+
3766
+ .pf-v6-c-compass__message-bar {
3767
+ width: var(--pf-v6-c-compass__message-bar--Width);
3768
+ min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
3769
+ max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
3770
+ }
3771
+
3772
+ .pf-v6-c-compass__panel {
3773
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3774
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3775
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3776
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3777
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3778
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3779
+ border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3780
+ border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3781
+ box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3782
+ }
3783
+ .pf-v6-c-compass__panel.pf-m-no-border {
3784
+ border-width: 0;
3785
+ }
3786
+ .pf-v6-c-compass__panel.pf-m-no-padding {
3787
+ padding: 0;
3788
+ }
3789
+ .pf-v6-c-compass__panel.pf-m-full-height {
3790
+ height: 100%;
3791
+ }
3792
+ .pf-v6-c-compass__panel.pf-m-pill {
3793
+ border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
3794
+ }
3795
+ .pf-v6-c-compass__panel.pf-m-scrollable {
3796
+ overflow: auto;
3797
+ }
3798
+
3799
+ /* stylelint-disable */
3800
+ @media (max-width: 1200px) {
3801
+ .pf-v6-c-compass * {
3802
+ display: none;
3803
+ }
3804
+ .pf-v6-c-compass {
3805
+ position: relative;
3806
+ display: grid;
3807
+ grid-template-columns: auto;
3808
+ grid-template-rows: auto;
3809
+ place-content: center;
3810
+ gap: 0;
3811
+ }
3812
+ .pf-v6-c-compass::after {
3813
+ padding: 1em;
3814
+ border-radius: var(--pf-t--global--border--radius--large);
3815
+ background: var(--pf-t--global--background--color--primary--default);
3816
+ content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
3817
+ width: 80%;
3818
+ width: 300px;
3819
+ border: 1px solid var(--pf-t--global--border--color--default);
3820
+ box-shadow: var(--pf-t--global--box-shadow--md);
3821
+ white-space: pre-wrap;
3822
+ text-align: center;
3823
+ }
3824
+ }
3825
+ /* stylelint-enable */
3459
3826
  :root {
3460
3827
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
3461
3828
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -4150,7 +4517,8 @@ ul) {
4150
4517
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4151
4518
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4152
4519
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
4153
- --pf-v6-c-data-list__item--BackgroundColor: var( --pf-t--global--background--color--primary--default);
4520
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4521
+ --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
4154
4522
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
4155
4523
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
4156
4524
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -4305,6 +4673,9 @@ ul) {
4305
4673
  .pf-v6-c-data-list.pf-m-drag-over {
4306
4674
  overflow-anchor: none;
4307
4675
  }
4676
+ .pf-v6-c-data-list.pf-m-plain {
4677
+ --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
4678
+ }
4308
4679
 
4309
4680
  .pf-v6-c-data-list.pf-m-truncate,
4310
4681
  .pf-v6-c-data-list__item-row.pf-m-truncate,
@@ -5712,6 +6083,7 @@ ul) {
5712
6083
  }
5713
6084
 
5714
6085
  .pf-v6-c-drawer {
6086
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
5715
6087
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5716
6088
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5717
6089
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -5742,6 +6114,7 @@ ul) {
5742
6114
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5743
6115
  --pf-v6-c-drawer__panel--Opacity: 0;
5744
6116
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
6117
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
5745
6118
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5746
6119
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5747
6120
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -5757,6 +6130,16 @@ ul) {
5757
6130
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
5758
6131
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
5759
6132
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
6133
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
6134
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
6135
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
6136
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
6137
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6138
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6139
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6140
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
6141
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
6142
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
5760
6143
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
5761
6144
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5762
6145
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -5873,6 +6256,8 @@ ul) {
5873
6256
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
5874
6257
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
5875
6258
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6259
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6260
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
5876
6261
  }
5877
6262
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
5878
6263
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -5896,19 +6281,19 @@ ul) {
5896
6281
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
5897
6282
  }
5898
6283
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5899
- transform: translateX(-100%);
6284
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
5900
6285
  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
5901
6286
  visibility: visible;
5902
6287
  }
5903
6288
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5904
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
6289
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
5905
6290
  }
5906
6291
 
5907
6292
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5908
6293
  transform: translateX(0);
5909
6294
  }
5910
6295
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
5911
- transform: translate(0, -100%);
6296
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
5912
6297
  }
5913
6298
  .pf-v6-c-drawer.pf-m-resizing {
5914
6299
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -5917,6 +6302,26 @@ ul) {
5917
6302
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
5918
6303
  pointer-events: auto;
5919
6304
  }
6305
+ @media screen and (min-width: 48rem) {
6306
+ .pf-v6-c-drawer.pf-m-pill {
6307
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
6308
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
6309
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
6310
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6311
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6312
+ }
6313
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6314
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
6315
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
6316
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6317
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6318
+ }
6319
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6320
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6321
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6322
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6323
+ }
6324
+ }
5920
6325
 
5921
6326
  .pf-v6-c-drawer__section {
5922
6327
  flex-grow: 0;
@@ -5932,6 +6337,7 @@ ul) {
5932
6337
  .pf-v6-c-drawer__main {
5933
6338
  display: flex;
5934
6339
  flex: 1;
6340
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
5935
6341
  overflow: hidden;
5936
6342
  }
5937
6343
 
@@ -5970,6 +6376,8 @@ ul) {
5970
6376
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
5971
6377
  order: 1;
5972
6378
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
6379
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
6380
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
5973
6381
  overflow: auto;
5974
6382
  visibility: hidden;
5975
6383
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -5978,6 +6386,7 @@ ul) {
5978
6386
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
5979
6387
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
5980
6388
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
6389
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
5981
6390
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
5982
6391
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
5983
6392
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -6165,7 +6574,7 @@ ul) {
6165
6574
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
6166
6575
  }
6167
6576
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6168
- transform: translateX(0);
6577
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
6169
6578
  }
6170
6579
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
6171
6580
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -6177,6 +6586,8 @@ ul) {
6177
6586
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
6178
6587
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
6179
6588
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
6589
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
6590
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
6180
6591
  min-width: auto;
6181
6592
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
6182
6593
  }
@@ -6224,82 +6635,86 @@ ul) {
6224
6635
  }
6225
6636
  @media (min-width: 48rem) {
6226
6637
  .pf-v6-c-drawer__panel.pf-m-width-25 {
6227
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6638
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6228
6639
  }
6229
6640
  .pf-v6-c-drawer__panel.pf-m-width-33 {
6230
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6641
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6231
6642
  }
6232
6643
  .pf-v6-c-drawer__panel.pf-m-width-50 {
6233
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6644
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6234
6645
  }
6235
6646
  .pf-v6-c-drawer__panel.pf-m-width-66 {
6236
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6647
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6237
6648
  }
6238
6649
  .pf-v6-c-drawer__panel.pf-m-width-75 {
6239
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6650
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6240
6651
  }
6241
6652
  .pf-v6-c-drawer__panel.pf-m-width-100 {
6242
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6653
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6654
+ --pf-v6-c-drawer__main--Gap: 0;
6243
6655
  }
6244
6656
  }
6245
6657
  @media (min-width: 62rem) {
6246
6658
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
6247
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6659
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6248
6660
  }
6249
6661
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
6250
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6662
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6251
6663
  }
6252
6664
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
6253
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6665
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6254
6666
  }
6255
6667
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
6256
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6668
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6257
6669
  }
6258
6670
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
6259
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6671
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6260
6672
  }
6261
6673
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
6262
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6674
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6675
+ --pf-v6-c-drawer__main--Gap: 0;
6263
6676
  }
6264
6677
  }
6265
6678
  @media (min-width: 75rem) {
6266
6679
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
6267
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6680
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6268
6681
  }
6269
6682
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
6270
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6683
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6271
6684
  }
6272
6685
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
6273
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6686
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6274
6687
  }
6275
6688
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
6276
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6689
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6277
6690
  }
6278
6691
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
6279
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6692
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6280
6693
  }
6281
6694
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
6282
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6695
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6696
+ --pf-v6-c-drawer__main--Gap: 0;
6283
6697
  }
6284
6698
  }
6285
6699
  @media (min-width: 90.625rem) {
6286
6700
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
6287
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6701
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6288
6702
  }
6289
6703
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
6290
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6704
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6291
6705
  }
6292
6706
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
6293
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6707
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6294
6708
  }
6295
6709
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
6296
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6710
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6297
6711
  }
6298
6712
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
6299
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6713
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6300
6714
  }
6301
6715
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
6302
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6716
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6717
+ --pf-v6-c-drawer__main--Gap: 0;
6303
6718
  }
6304
6719
  }
6305
6720
  @media (min-width: 48rem) {
@@ -6731,6 +7146,9 @@ ul) {
6731
7146
  --pf-v6-c-expandable-section__content--Opacity: 0;
6732
7147
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6733
7148
  --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
7149
+ --pf-v6-c-expandable-section__content--MaxHeight: 0px;
7150
+ --pf-v6-c-expandable-section__content--Visibility: hidden;
7151
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6734
7152
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6735
7153
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6736
7154
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -7839,81 +8257,6 @@ ul) {
7839
8257
  pointer-events: none;
7840
8258
  }
7841
8259
 
7842
- .pf-v6-c-hint {
7843
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
7844
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
7845
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
7846
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
7847
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
7848
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
7849
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
7850
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
7851
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
7852
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
7853
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
7854
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
7855
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
7856
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
7857
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
7858
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7859
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
7860
- }
7861
-
7862
- .pf-v6-c-hint {
7863
- display: grid;
7864
- grid-template-columns: 1fr auto;
7865
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
7866
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
7867
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
7868
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
7869
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
7870
- color: var(--pf-v6-c-hint--Color);
7871
- background-color: var(--pf-v6-c-hint--BackgroundColor);
7872
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
7873
- border-radius: var(--pf-v6-c-hint--BorderRadius);
7874
- }
7875
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
7876
- text-align: start;
7877
- white-space: normal;
7878
- }
7879
-
7880
- .pf-v6-c-hint__actions {
7881
- display: inline-grid;
7882
- grid-row: 1;
7883
- grid-column: 2;
7884
- grid-auto-flow: column;
7885
- align-self: start;
7886
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
7887
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
7888
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
7889
- text-align: end;
7890
- }
7891
- .pf-v6-c-hint__actions.pf-m-no-offset {
7892
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
7893
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
7894
- }
7895
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
7896
- grid-column: 1;
7897
- }
7898
-
7899
- .pf-v6-c-hint__title {
7900
- align-self: center;
7901
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
7902
- }
7903
-
7904
- .pf-v6-c-hint__body {
7905
- grid-column: 1/-1;
7906
- font-size: var(--pf-v6-c-hint__body--FontSize);
7907
- }
7908
-
7909
- .pf-v6-c-hint__footer {
7910
- grid-column: 1/-1;
7911
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
7912
- }
7913
- .pf-v6-c-hint__footer > :not(:last-child) {
7914
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
7915
- }
7916
-
7917
8260
  .pf-v6-c-helper-text {
7918
8261
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
7919
8262
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -7999,6 +8342,156 @@ ul) {
7999
8342
  color: var(--pf-v6-c-helper-text__item-text--Color);
8000
8343
  }
8001
8344
 
8345
+ .pf-v6-c-hero {
8346
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
8347
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
8348
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
8349
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8350
+ --pf-v6-c-hero--gradient--angle: 109deg;
8351
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8352
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
8353
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
8354
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8355
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8356
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8357
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
8358
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
8359
+ --pf-v6-c-hero--BackgroundImage--light: none;
8360
+ --pf-v6-c-hero--BackgroundImage--dark: none;
8361
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
8362
+ --pf-v6-c-hero--BackgroundPosition: right center;
8363
+ --pf-v6-c-hero--BackgroundSize: contain;
8364
+ --pf-v6-c-hero--BorderStyle: solid;
8365
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
8366
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
8367
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
8368
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
8369
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
8370
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
8371
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
8372
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
8373
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
8374
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
8375
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
8376
+ --pf-v6-c-hero__body--Width: 800px;
8377
+ --pf-v6-c-hero__body--MaxWidth: 80%;
8378
+ }
8379
+
8380
+ .pf-v6-c-hero {
8381
+ display: flex;
8382
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
8383
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
8384
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
8385
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
8386
+ background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
8387
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
8388
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
8389
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
8390
+ border-color: var(--pf-v6-c-hero--BorderColor);
8391
+ border-style: var(--pf-v6-c-hero--BorderStyle);
8392
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
8393
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
8394
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
8395
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
8396
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
8397
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
8398
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
8399
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
8400
+ }
8401
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
8402
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
8403
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
8404
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
8405
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
8406
+ }
8407
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
8408
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8409
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8410
+ }
8411
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
8412
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
8413
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
8414
+ }
8415
+
8416
+ .pf-v6-c-hero__body {
8417
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
8418
+ }
8419
+
8420
+ .pf-v6-c-hint {
8421
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8422
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8423
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8424
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8425
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8426
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8427
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8428
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8429
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8430
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8431
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8432
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8433
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8434
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8435
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8436
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8437
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8438
+ }
8439
+
8440
+ .pf-v6-c-hint {
8441
+ display: grid;
8442
+ grid-template-columns: 1fr auto;
8443
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8444
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8445
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8446
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8447
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8448
+ color: var(--pf-v6-c-hint--Color);
8449
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
8450
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8451
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
8452
+ }
8453
+ .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8454
+ text-align: start;
8455
+ white-space: normal;
8456
+ }
8457
+
8458
+ .pf-v6-c-hint__actions {
8459
+ display: inline-grid;
8460
+ grid-row: 1;
8461
+ grid-column: 2;
8462
+ grid-auto-flow: column;
8463
+ align-self: start;
8464
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8465
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8466
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8467
+ text-align: end;
8468
+ }
8469
+ .pf-v6-c-hint__actions.pf-m-no-offset {
8470
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8471
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8472
+ }
8473
+ .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8474
+ grid-column: 1;
8475
+ }
8476
+
8477
+ .pf-v6-c-hint__title {
8478
+ align-self: center;
8479
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
8480
+ }
8481
+
8482
+ .pf-v6-c-hint__body {
8483
+ grid-column: 1/-1;
8484
+ font-size: var(--pf-v6-c-hint__body--FontSize);
8485
+ }
8486
+
8487
+ .pf-v6-c-hint__footer {
8488
+ grid-column: 1/-1;
8489
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8490
+ }
8491
+ .pf-v6-c-hint__footer > :not(:last-child) {
8492
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8493
+ }
8494
+
8002
8495
  .pf-v6-c-icon {
8003
8496
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8004
8497
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
@@ -9759,6 +10252,15 @@ ul.pf-v6-c-list {
9759
10252
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
9760
10253
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
9761
10254
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
10255
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
10256
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
10257
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10258
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10259
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10260
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10261
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
10262
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
10263
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
9762
10264
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
9763
10265
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
9764
10266
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -9779,6 +10281,7 @@ ul.pf-v6-c-list {
9779
10281
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
9780
10282
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
9781
10283
  display: grid;
10284
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
9782
10285
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
9783
10286
  row-gap: var(--pf-v6-c-masthead--RowGap);
9784
10287
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -9811,6 +10314,48 @@ ul.pf-v6-c-list {
9811
10314
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
9812
10315
  }
9813
10316
  }
10317
+ .pf-v6-c-masthead.pf-m-docked {
10318
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
10319
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
10320
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
10321
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
10322
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
10323
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
10324
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
10325
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
10326
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
10327
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
10328
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
10329
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10330
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
10331
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
10332
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
10333
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
10334
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
10335
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
10336
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
10337
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
10338
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
10339
+ --pf-v6-c-masthead__main--GridColumn: auto;
10340
+ --pf-v6-c-masthead__content--GridColumn: auto;
10341
+ --pf-v6-c-masthead__logo--Width: auto;
10342
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
10343
+ display: flex;
10344
+ flex-direction: column;
10345
+ align-items: center;
10346
+ width: fit-content;
10347
+ height: 100%;
10348
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
10349
+ }
10350
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
10351
+ flex-direction: column;
10352
+ flex-grow: 1;
10353
+ align-self: revert;
10354
+ }
10355
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
10356
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
10357
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
10358
+ }
9814
10359
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
9815
10360
  flex-wrap: nowrap;
9816
10361
  min-width: 0;
@@ -10286,7 +10831,7 @@ ul.pf-v6-c-list {
10286
10831
  --pf-v6-c-menu__footer--BoxShadow: none;
10287
10832
  --pf-v6-c-menu__footer--BorderColor: transparent;
10288
10833
  --pf-v6-c-menu__footer--BorderWidth: 0;
10289
- --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
10834
+ --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
10290
10835
  --pf-v6-c-menu--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
10291
10836
  --pf-v6-c-menu--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
10292
10837
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
@@ -11012,6 +11557,7 @@ ul.pf-v6-c-list {
11012
11557
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
11013
11558
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
11014
11559
  --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
11560
+ --pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
11015
11561
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
11016
11562
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
11017
11563
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -11140,6 +11686,9 @@ ul.pf-v6-c-list {
11140
11686
  --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
11141
11687
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
11142
11688
  }
11689
+ .pf-v6-c-menu-toggle.pf-m-plain.pf-m-circle {
11690
+ --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--m-circle--BorderRadius);
11691
+ }
11143
11692
  .pf-v6-c-menu-toggle.pf-m-plain::before {
11144
11693
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
11145
11694
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
@@ -11855,6 +12404,15 @@ ul.pf-v6-c-list {
11855
12404
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
11856
12405
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
11857
12406
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
12407
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
12408
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
12409
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
12410
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
12411
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
12412
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
12413
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
12414
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12415
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
11858
12416
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
11859
12417
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
11860
12418
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -11879,6 +12437,7 @@ ul.pf-v6-c-list {
11879
12437
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
11880
12438
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
11881
12439
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
12440
+ --pf-v6-c-nav__link-text--FontSize: initial;
11882
12441
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
11883
12442
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
11884
12443
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -11919,6 +12478,11 @@ ul.pf-v6-c-list {
11919
12478
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11920
12479
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
11921
12480
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12481
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12482
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12483
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12484
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
12485
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11922
12486
  }
11923
12487
  @media screen and (prefers-reduced-motion: no-preference) {
11924
12488
  .pf-v6-c-nav {
@@ -11960,6 +12524,25 @@ ul.pf-v6-c-list {
11960
12524
  .pf-v6-c-nav.pf-m-fill {
11961
12525
  flex-grow: 1;
11962
12526
  }
12527
+ .pf-v6-c-nav.pf-m-docked {
12528
+ --pf-v6-c-nav--PaddingBlockStart: 0;
12529
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
12530
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
12531
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
12532
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
12533
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
12534
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
12535
+ width: fit-content;
12536
+ }
12537
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
12538
+ position: relative;
12539
+ align-self: center;
12540
+ min-width: 1lh;
12541
+ text-align: center;
12542
+ }
12543
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
12544
+ display: none;
12545
+ }
11963
12546
  .pf-v6-c-nav .pf-v6-c-menu {
11964
12547
  --pf-v6-c-menu--MinWidth: 100%;
11965
12548
  }
@@ -12023,14 +12606,34 @@ ul.pf-v6-c-list {
12023
12606
  }
12024
12607
 
12025
12608
  .pf-v6-c-nav__item {
12609
+ position: relative;
12026
12610
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
12027
12611
  }
12612
+ .pf-v6-c-nav__item::before {
12613
+ position: absolute;
12614
+ inset-block-start: 0;
12615
+ inset-block-end: 0;
12616
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
12617
+ width: var(--pf-v6-c-nav__item--accent--size);
12618
+ pointer-events: none;
12619
+ content: var(--pf-v6-c-nav__item--accent--content, "");
12620
+ background-color: var(--pf-v6-c-nav__item--accent--color);
12621
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
12622
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
12623
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
12624
+ transition-property: scale;
12625
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
12626
+ }
12028
12627
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
12029
12628
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
12030
12629
  }
12031
12630
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
12032
12631
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
12033
12632
  }
12633
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
12634
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
12635
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
12636
+ }
12034
12637
 
12035
12638
  .pf-v6-c-nav__section {
12036
12639
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -12092,6 +12695,10 @@ ul.pf-v6-c-list {
12092
12695
  color: var(--pf-v6-c-nav__link-icon--Color);
12093
12696
  }
12094
12697
 
12698
+ .pf-v6-c-nav__link-text {
12699
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
12700
+ }
12701
+
12095
12702
  .pf-v6-c-nav__toggle {
12096
12703
  flex: none;
12097
12704
  align-self: start;
@@ -12147,6 +12754,7 @@ ul.pf-v6-c-list {
12147
12754
  }
12148
12755
 
12149
12756
  .pf-v6-c-nav:where(.pf-m-horizontal) {
12757
+ --pf-v6-c-nav__item--accent--content: none;
12150
12758
  padding: 0;
12151
12759
  overflow: hidden;
12152
12760
  }
@@ -12512,6 +13120,7 @@ ul.pf-v6-c-list {
12512
13120
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12513
13121
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
12514
13122
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13123
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
12515
13124
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
12516
13125
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
12517
13126
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -12619,6 +13228,9 @@ ul.pf-v6-c-list {
12619
13228
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12620
13229
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12621
13230
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
13231
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13232
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13233
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12622
13234
  }
12623
13235
  @media screen and (prefers-reduced-motion: no-preference) {
12624
13236
  .pf-v6-c-page {
@@ -12661,6 +13273,16 @@ ul.pf-v6-c-list {
12661
13273
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
12662
13274
  }
12663
13275
  }
13276
+ .pf-v6-c-page.pf-m-dock {
13277
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
13278
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
13279
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
13280
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
13281
+ grid-template-areas: "dock main";
13282
+ grid-template-rows: auto;
13283
+ grid-template-columns: auto 1fr;
13284
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
13285
+ }
12664
13286
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12665
13287
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12666
13288
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -12717,6 +13339,11 @@ ul.pf-v6-c-list {
12717
13339
  }
12718
13340
  }
12719
13341
 
13342
+ .pf-v6-c-page__dock {
13343
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
13344
+ grid-area: dock;
13345
+ }
13346
+
12720
13347
  .pf-v6-c-page__sidebar {
12721
13348
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
12722
13349
  display: flex;
@@ -13020,6 +13647,7 @@ ul.pf-v6-c-list {
13020
13647
  flex-direction: column;
13021
13648
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
13022
13649
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
13650
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
13023
13651
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13024
13652
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13025
13653
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -13664,7 +14292,7 @@ ul.pf-v6-c-list {
13664
14292
  --pf-v6-c-panel__footer--BorderWidth: 0;
13665
14293
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
13666
14294
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
13667
- --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
14295
+ --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
13668
14296
  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
13669
14297
  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
13670
14298
  --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -15751,6 +16379,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15751
16379
  .pf-v6-c-spinner.pf-m-xl {
15752
16380
  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
15753
16381
  }
16382
+ .pf-v6-m-no-motion .pf-v6-c-spinner {
16383
+ --pf-v6-c-spinner--AnimationDuration: 0s;
16384
+ }
15754
16385
 
15755
16386
  .pf-v6-c-spinner__path {
15756
16387
  width: 100%;
@@ -17816,6 +18447,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17816
18447
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
17817
18448
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
17818
18449
  }
18450
+ .pf-v6-c-table.pf-m-plain {
18451
+ --pf-v6-c-table--BackgroundColor: transparent;
18452
+ }
17819
18453
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
17820
18454
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
17821
18455
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -19653,6 +20287,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19653
20287
  --pf-v6-c-tabs__add--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
19654
20288
  --pf-v6-c-tabs__add--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19655
20289
  --pf-v6-c-tabs__add--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
20290
+ --pf-v6-c-tabs--m-nav__link--BorderRadius: var(--pf-t--global--border--radius--pill);
20291
+ --pf-v6-c-tabs--m-nav__link--disabled--Color: var(--pf-t--global--text--color--disabled);
20292
+ --pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
19656
20293
  --pf-v6-c-tabs__link-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
19657
20294
  --pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19658
20295
  --pf-v6-c-tabs__link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -19930,6 +20567,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19930
20567
  .pf-v6-c-tabs.pf-m-overflow .pf-v6-c-tabs__list {
19931
20568
  overflow: visible;
19932
20569
  }
20570
+ .pf-v6-c-tabs.pf-m-nav {
20571
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20572
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
20573
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20574
+ }
20575
+ .pf-v6-c-tabs.pf-m-nav::before,
20576
+ .pf-v6-c-tabs.pf-m-nav .pf-v6-c-tabs__link::before {
20577
+ border: 0;
20578
+ }
20579
+ .pf-v6-c-tabs.pf-m-nav.pf-m-subtab .pf-v6-c-tabs__scroll-button .pf-v6-c-button {
20580
+ --pf-v6-c-button--FontSize: var(--pf-v6-c-tabs--m-nav--m-subtab__scroll-button--button--FontSize);
20581
+ }
19933
20582
 
19934
20583
  .pf-v6-c-tabs__toggle {
19935
20584
  display: var(--pf-v6-c-tabs__toggle--Display);
@@ -19979,7 +20628,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19979
20628
  }
19980
20629
  .pf-v6-c-tabs__item.pf-m-current {
19981
20630
  --pf-v6-c-tabs__link--Color: var(--pf-v6-c-tabs__item--m-current__link--Color);
19982
- --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
20631
+ --pf-v6-c-tabs__link--after--BorderColor: var(--pf-v6-c-tabs--link-accent--color);
19983
20632
  --pf-v6-c-tabs__link--after--BorderWidth: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
19984
20633
  --pf-v6-c-tabs__item--BackgroundColor: var(--pf-v6-c-tabs__item--m-current--BackgroundColor);
19985
20634
  }
@@ -21032,6 +21681,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21032
21681
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21033
21682
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21034
21683
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
21684
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
21035
21685
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
21036
21686
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
21037
21687
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -21235,6 +21885,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21235
21885
  .pf-v6-c-toolbar.pf-m-no-background {
21236
21886
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
21237
21887
  }
21888
+ .pf-v6-c-toolbar.pf-m-vertical {
21889
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
21890
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
21891
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
21892
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
21893
+ }
21894
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
21895
+ flex-direction: column;
21896
+ align-items: center;
21897
+ }
21238
21898
 
21239
21899
  .pf-v6-c-toolbar__item {
21240
21900
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -21314,6 +21974,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21314
21974
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
21315
21975
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21316
21976
  }
21977
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
21978
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21979
+ }
21317
21980
  .pf-v6-c-toolbar__group.pf-m-filter-group {
21318
21981
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
21319
21982
  }
@@ -21325,9 +21988,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21325
21988
  .pf-v6-c-toolbar__group.pf-m-action-group {
21326
21989
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21327
21990
  }
21991
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
21992
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21993
+ }
21328
21994
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21329
21995
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21330
21996
  }
21997
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21998
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21999
+ }
21331
22000
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
21332
22001
  flex-wrap: wrap;
21333
22002
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -21404,7 +22073,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21404
22073
  }
21405
22074
  .pf-v6-c-toolbar__group.pf-m-align-end,
21406
22075
  .pf-v6-c-toolbar__item.pf-m-align-end {
21407
- margin-inline-start: auto;
22076
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22077
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21408
22078
  }
21409
22079
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
21410
22080
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -21659,7 +22329,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21659
22329
  }
21660
22330
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
21661
22331
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
21662
- margin-inline-start: auto;
22332
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22333
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21663
22334
  }
21664
22335
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
21665
22336
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -21911,7 +22582,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21911
22582
  }
21912
22583
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
21913
22584
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
21914
- margin-inline-start: auto;
22585
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22586
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21915
22587
  }
21916
22588
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
21917
22589
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -22163,7 +22835,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22163
22835
  }
22164
22836
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
22165
22837
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
22166
- margin-inline-start: auto;
22838
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22839
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22167
22840
  }
22168
22841
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
22169
22842
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -22415,7 +23088,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22415
23088
  }
22416
23089
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
22417
23090
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
22418
- margin-inline-start: auto;
23091
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23092
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22419
23093
  }
22420
23094
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
22421
23095
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -22667,7 +23341,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22667
23341
  }
22668
23342
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
22669
23343
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
22670
- margin-inline-start: auto;
23344
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23345
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22671
23346
  }
22672
23347
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
22673
23348
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {