@patternfly/react-styles 6.5.0-prerelease.1 → 6.5.0-prerelease.11

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 (135) hide show
  1. package/CHANGELOG.md +48 -0
  2. package/README.md +1 -1
  3. package/css/components/AboutModalBox/about-modal-box.css +36 -26
  4. package/css/components/Accordion/accordion.css +16 -13
  5. package/css/components/Alert/alert.css +5 -4
  6. package/css/components/Avatar/avatar.css +12 -4
  7. package/css/components/BackgroundImage/background-image.css +6 -3
  8. package/css/components/Banner/banner.css +8 -6
  9. package/css/components/Brand/brand.css +3 -1
  10. package/css/components/Breadcrumb/breadcrumb.css +4 -3
  11. package/css/components/Button/button.css +21 -9
  12. package/css/components/CalendarMonth/calendar-month.css +4 -3
  13. package/css/components/Card/card.css +13 -6
  14. package/css/components/Card/card.d.ts +1 -0
  15. package/css/components/Card/card.js +1 -0
  16. package/css/components/Card/card.mjs +1 -0
  17. package/css/components/ClipboardCopy/clipboard-copy.css +4 -3
  18. package/css/components/CodeEditor/code-editor.css +1 -1
  19. package/css/components/Compass/compass.css +181 -72
  20. package/css/components/Compass/compass.d.ts +12 -5
  21. package/css/components/Compass/compass.js +12 -5
  22. package/css/components/Compass/compass.mjs +12 -5
  23. package/css/components/DataList/data-list.css +28 -21
  24. package/css/components/DescriptionList/description-list.css +7 -5
  25. package/css/components/Divider/divider.css +7 -5
  26. package/css/components/Drawer/drawer.css +110 -56
  27. package/css/components/Drawer/drawer.d.ts +2 -0
  28. package/css/components/Drawer/drawer.js +2 -0
  29. package/css/components/Drawer/drawer.mjs +2 -0
  30. package/css/components/DualListSelector/dual-list-selector.css +17 -11
  31. package/css/components/ExpandableSection/expandable-section.css +19 -14
  32. package/css/components/Form/form.css +1 -1
  33. package/css/components/FormControl/form-control.css +1 -1
  34. package/css/components/Hero/hero.css +74 -0
  35. package/css/components/Hero/hero.d.ts +11 -0
  36. package/css/components/Hero/hero.js +12 -0
  37. package/css/components/Hero/hero.mjs +10 -0
  38. package/css/components/JumpLinks/jump-links.css +4 -3
  39. package/css/components/Label/label-group.css +2 -2
  40. package/css/components/Label/label.css +4 -3
  41. package/css/components/Login/login.css +51 -37
  42. package/css/components/Masthead/masthead.css +70 -16
  43. package/css/components/Masthead/masthead.d.ts +1 -0
  44. package/css/components/Masthead/masthead.js +1 -0
  45. package/css/components/Masthead/masthead.mjs +1 -0
  46. package/css/components/Menu/menu.css +23 -14
  47. package/css/components/ModalBox/modal-box.css +9 -7
  48. package/css/components/Nav/nav.css +72 -9
  49. package/css/components/Nav/nav.d.ts +3 -1
  50. package/css/components/Nav/nav.js +3 -1
  51. package/css/components/Nav/nav.mjs +3 -1
  52. package/css/components/NotificationDrawer/notification-drawer.css +6 -6
  53. package/css/components/Page/page.css +55 -29
  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/Sidebar/sidebar.css +1 -1
  58. package/css/components/Skeleton/skeleton.css +16 -15
  59. package/css/components/Slider/slider.css +32 -18
  60. package/css/components/Switch/switch.css +3 -1
  61. package/css/components/Table/table-tree-view.css +4 -2
  62. package/css/components/Table/table.css +31 -27
  63. package/css/components/Tabs/tabs.css +17 -16
  64. package/css/components/Toolbar/toolbar.css +46 -14
  65. package/css/components/Toolbar/toolbar.d.ts +1 -0
  66. package/css/components/Toolbar/toolbar.js +1 -0
  67. package/css/components/Toolbar/toolbar.mjs +1 -0
  68. package/css/components/TreeView/tree-view.css +44 -13
  69. package/css/components/TreeView/tree-view.d.ts +1 -0
  70. package/css/components/TreeView/tree-view.js +1 -0
  71. package/css/components/TreeView/tree-view.mjs +1 -0
  72. package/css/components/Wizard/wizard.css +20 -16
  73. package/css/components/_index.css +1164 -592
  74. package/css/components/_index.d.ts +15 -3
  75. package/css/components/_index.js +15 -3
  76. package/css/components/_index.mjs +15 -3
  77. package/css/docs/components/Compass/examples/Compass.css +8 -2
  78. package/css/docs/components/Compass/examples/Compass.d.ts +4 -1
  79. package/css/docs/components/Compass/examples/Compass.js +4 -1
  80. package/css/docs/components/Compass/examples/Compass.mjs +4 -1
  81. package/css/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  82. package/css/docs/layouts/Bullseye/examples/Bullseye.d.ts +1 -1
  83. package/css/docs/layouts/Bullseye/examples/Bullseye.js +1 -1
  84. package/css/docs/layouts/Bullseye/examples/Bullseye.mjs +1 -1
  85. package/css/docs/layouts/Flex/examples/Flex.css +3 -3
  86. package/css/docs/layouts/Flex/examples/Flex.d.ts +2 -2
  87. package/css/docs/layouts/Flex/examples/Flex.js +2 -2
  88. package/css/docs/layouts/Flex/examples/Flex.mjs +2 -2
  89. package/css/docs/layouts/Gallery/examples/Gallery.css +2 -2
  90. package/css/docs/layouts/Gallery/examples/Gallery.d.ts +1 -1
  91. package/css/docs/layouts/Gallery/examples/Gallery.js +1 -1
  92. package/css/docs/layouts/Gallery/examples/Gallery.mjs +1 -1
  93. package/css/docs/layouts/Grid/examples/Grid.css +1 -1
  94. package/css/docs/layouts/Grid/examples/Grid.d.ts +1 -1
  95. package/css/docs/layouts/Grid/examples/Grid.js +1 -1
  96. package/css/docs/layouts/Grid/examples/Grid.mjs +1 -1
  97. package/css/docs/layouts/Level/examples/Level.css +3 -3
  98. package/css/docs/layouts/Level/examples/Level.d.ts +1 -1
  99. package/css/docs/layouts/Level/examples/Level.js +1 -1
  100. package/css/docs/layouts/Level/examples/Level.mjs +1 -1
  101. package/css/docs/layouts/Split/examples/Split.css +1 -1
  102. package/css/docs/layouts/Split/examples/Split.d.ts +1 -1
  103. package/css/docs/layouts/Split/examples/Split.js +1 -1
  104. package/css/docs/layouts/Split/examples/Split.mjs +1 -1
  105. package/css/docs/layouts/Stack/examples/Stack.css +3 -3
  106. package/css/docs/layouts/Stack/examples/Stack.d.ts +1 -1
  107. package/css/docs/layouts/Stack/examples/Stack.js +1 -1
  108. package/css/docs/layouts/Stack/examples/Stack.mjs +1 -1
  109. package/css/docs/utilities/Alignment/examples/Alignment.css +4 -4
  110. package/css/docs/utilities/Alignment/examples/Alignment.d.ts +1 -1
  111. package/css/docs/utilities/Alignment/examples/Alignment.js +1 -1
  112. package/css/docs/utilities/Alignment/examples/Alignment.mjs +1 -1
  113. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  114. package/css/docs/utilities/BoxShadow/examples/box-shadow.d.ts +1 -1
  115. package/css/docs/utilities/BoxShadow/examples/box-shadow.js +1 -1
  116. package/css/docs/utilities/BoxShadow/examples/box-shadow.mjs +1 -1
  117. package/css/docs/utilities/Display/examples/Display.css +1 -1
  118. package/css/docs/utilities/Display/examples/Display.d.ts +1 -1
  119. package/css/docs/utilities/Display/examples/Display.js +1 -1
  120. package/css/docs/utilities/Display/examples/Display.mjs +1 -1
  121. package/css/docs/utilities/Flex/examples/Flex.css +7 -7
  122. package/css/docs/utilities/Flex/examples/Flex.d.ts +1 -1
  123. package/css/docs/utilities/Flex/examples/Flex.js +1 -1
  124. package/css/docs/utilities/Flex/examples/Flex.mjs +1 -1
  125. package/css/docs/utilities/Float/examples/Float.css +2 -2
  126. package/css/docs/utilities/Float/examples/Float.d.ts +1 -1
  127. package/css/docs/utilities/Float/examples/Float.js +1 -1
  128. package/css/docs/utilities/Float/examples/Float.mjs +1 -1
  129. package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
  130. package/css/docs/utilities/Spacing/examples/Spacing.d.ts +1 -1
  131. package/css/docs/utilities/Spacing/examples/Spacing.js +1 -1
  132. package/css/docs/utilities/Spacing/examples/Spacing.mjs +1 -1
  133. package/css/layouts/Gallery/gallery.css +6 -2
  134. package/css/layouts/_index.css +6 -2
  135. package/package.json +4 -4
@@ -1,4 +1,3 @@
1
- @charset "UTF-8";
2
1
  .pf-v6-c-about-modal-box {
3
2
  --pf-v6-c-about-modal-box--BackgroundImage: none;
4
3
  --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
@@ -18,31 +17,6 @@
18
17
  --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
19
18
  --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
20
19
  --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
21
- --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
22
- --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
23
- --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
24
- --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
25
- --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
26
- --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
27
- --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
28
- --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
29
- --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
30
- --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31
- --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
32
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
33
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
34
- --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
35
- --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
36
- --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
37
- --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
38
- --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
39
- --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
40
- --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
41
- --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
42
- --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
43
- --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
44
- --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
45
- --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
46
20
  }
47
21
  @media screen and (min-width: 36rem) {
48
22
  .pf-v6-c-about-modal-box {
@@ -51,6 +25,14 @@
51
25
  --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
52
26
  }
53
27
  }
28
+ .pf-v6-c-about-modal-box {
29
+ --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
30
+ --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
31
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
32
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
33
+ --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
34
+ --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
35
+ }
54
36
  @media only screen and (min-width: 36rem) {
55
37
  .pf-v6-c-about-modal-box {
56
38
  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
@@ -61,17 +43,42 @@
61
43
  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
62
44
  }
63
45
  }
46
+ .pf-v6-c-about-modal-box {
47
+ --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
48
+ --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
49
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
50
+ --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
52
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
53
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
54
+ }
64
55
  @media only screen and (min-width: 36rem) {
65
56
  .pf-v6-c-about-modal-box {
66
57
  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
67
58
  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
68
59
  }
69
60
  }
61
+ .pf-v6-c-about-modal-box {
62
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
63
+ --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
64
+ --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
65
+ --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
66
+ }
70
67
  @media only screen and (min-width: 36rem) {
71
68
  .pf-v6-c-about-modal-box {
72
69
  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
73
70
  }
74
71
  }
72
+ .pf-v6-c-about-modal-box {
73
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
74
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
75
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
76
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
77
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
78
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
79
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
80
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
81
+ }
75
82
  @media only screen and (min-width: 36rem) {
76
83
  .pf-v6-c-about-modal-box {
77
84
  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
@@ -95,7 +102,6 @@
95
102
  background-repeat: no-repeat;
96
103
  background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
97
104
  background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
98
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
99
105
  }
100
106
  @media only screen and (min-width: 36rem) {
101
107
  .pf-v6-c-about-modal-box {
@@ -111,6 +117,9 @@
111
117
  grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
112
118
  }
113
119
  }
120
+ .pf-v6-c-about-modal-box {
121
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
122
+ }
114
123
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
115
124
  --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
116
125
  }
@@ -251,6 +260,18 @@
251
260
  --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
252
261
  --pf-v6-c-accordion__expandable-content--TranslateY: 0;
253
262
  --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
263
+ }
264
+ @media screen and (prefers-reduced-motion: no-preference) {
265
+ .pf-v6-c-accordion {
266
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
267
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
268
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
269
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
270
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
271
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
272
+ }
273
+ }
274
+ .pf-v6-c-accordion {
254
275
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
255
276
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
256
277
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -276,16 +297,6 @@
276
297
  --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
277
298
  --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
278
299
  }
279
- @media screen and (prefers-reduced-motion: no-preference) {
280
- .pf-v6-c-accordion {
281
- --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
282
- --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
283
- --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
284
- --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
285
- --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
286
- --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
287
- }
288
- }
289
300
 
290
301
  .pf-v6-c-accordion {
291
302
  display: flex;
@@ -396,13 +407,14 @@
396
407
  color: var(--pf-v6-c-accordion__toggle-text--Color);
397
408
  }
398
409
 
410
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
411
+ scale: -1 1;
412
+ }
413
+
399
414
  .pf-v6-c-accordion__toggle-icon {
400
415
  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
401
416
  transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
402
417
  }
403
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
404
- scale: -1 1;
405
- }
406
418
 
407
419
  .pf-v6-c-accordion__expandable-content:where([hidden]) {
408
420
  display: revert;
@@ -622,14 +634,15 @@
622
634
  margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
623
635
  }
624
636
 
637
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
638
+ scale: -1 1;
639
+ }
640
+
625
641
  .pf-v6-c-alert__toggle-icon {
626
642
  display: inline-block;
627
643
  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
628
644
  transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
629
645
  }
630
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
631
- scale: -1 1;
632
- }
633
646
 
634
647
  .pf-v6-c-alert__icon {
635
648
  grid-area: icon;
@@ -646,9 +659,9 @@
646
659
  }
647
660
  .pf-v6-c-alert__title.pf-m-truncate {
648
661
  display: -webkit-box;
662
+ overflow: hidden;
649
663
  -webkit-box-orient: vertical;
650
664
  -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
651
- overflow: hidden;
652
665
  }
653
666
 
654
667
  .pf-v6-c-alert__description {
@@ -885,7 +898,6 @@
885
898
  }
886
899
  .pf-v6-c-avatar.pf-m-sm {
887
900
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
888
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
889
901
  }
890
902
  @media (min-width: 36rem) {
891
903
  .pf-v6-c-avatar.pf-m-sm {
@@ -912,6 +924,9 @@
912
924
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
913
925
  }
914
926
  }
927
+ .pf-v6-c-avatar.pf-m-sm {
928
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
929
+ }
915
930
  @media (min-width: 36rem) {
916
931
  .pf-v6-c-avatar.pf-m-sm {
917
932
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
@@ -939,7 +954,6 @@
939
954
  }
940
955
  .pf-v6-c-avatar.pf-m-md {
941
956
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
942
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
943
957
  }
944
958
  @media (min-width: 36rem) {
945
959
  .pf-v6-c-avatar.pf-m-md {
@@ -966,6 +980,9 @@
966
980
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
967
981
  }
968
982
  }
983
+ .pf-v6-c-avatar.pf-m-md {
984
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
985
+ }
969
986
  @media (min-width: 36rem) {
970
987
  .pf-v6-c-avatar.pf-m-md {
971
988
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
@@ -993,7 +1010,6 @@
993
1010
  }
994
1011
  .pf-v6-c-avatar.pf-m-lg {
995
1012
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
996
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
997
1013
  }
998
1014
  @media (min-width: 36rem) {
999
1015
  .pf-v6-c-avatar.pf-m-lg {
@@ -1020,6 +1036,9 @@
1020
1036
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
1021
1037
  }
1022
1038
  }
1039
+ .pf-v6-c-avatar.pf-m-lg {
1040
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
1041
+ }
1023
1042
  @media (min-width: 36rem) {
1024
1043
  .pf-v6-c-avatar.pf-m-lg {
1025
1044
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
@@ -1047,7 +1066,6 @@
1047
1066
  }
1048
1067
  .pf-v6-c-avatar.pf-m-xl {
1049
1068
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
1050
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
1051
1069
  }
1052
1070
  @media (min-width: 36rem) {
1053
1071
  .pf-v6-c-avatar.pf-m-xl {
@@ -1074,6 +1092,9 @@
1074
1092
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
1075
1093
  }
1076
1094
  }
1095
+ .pf-v6-c-avatar.pf-m-xl {
1096
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
1097
+ }
1077
1098
  @media (min-width: 36rem) {
1078
1099
  .pf-v6-c-avatar.pf-m-xl {
1079
1100
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));
@@ -1131,6 +1152,12 @@
1131
1152
 
1132
1153
  .pf-v6-c-background-image {
1133
1154
  --pf-v6-c-background-image--BackgroundPosition: bottom right;
1155
+ }
1156
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
1157
+ --pf-v6-c-background-image--BackgroundPosition: bottom left;
1158
+ }
1159
+
1160
+ .pf-v6-c-background-image {
1134
1161
  position: fixed;
1135
1162
  inset-block-start: 0;
1136
1163
  inset-inline-start: 0;
@@ -1143,9 +1170,6 @@
1143
1170
  background-position: var(--pf-v6-c-background-image--BackgroundPosition);
1144
1171
  background-size: var(--pf-v6-c-background-image--BackgroundSize);
1145
1172
  }
1146
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
1147
- --pf-v6-c-background-image--BackgroundPosition: bottom left;
1148
- }
1149
1173
 
1150
1174
  .pf-v6-c-back-to-top {
1151
1175
  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
@@ -1263,6 +1287,14 @@
1263
1287
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1264
1288
  --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
1265
1289
  --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1290
+ }
1291
+ @media (min-width: 48rem) {
1292
+ .pf-v6-c-banner {
1293
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
1294
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
1295
+ }
1296
+ }
1297
+ .pf-v6-c-banner {
1266
1298
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1267
1299
  --pf-v6-c-banner--link--TextDecoration: underline;
1268
1300
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -1296,12 +1328,6 @@
1296
1328
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
1297
1329
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1298
1330
  }
1299
- @media (min-width: 48rem) {
1300
- .pf-v6-c-banner {
1301
- --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
1302
- --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
1303
- }
1304
- }
1305
1331
 
1306
1332
  .pf-v6-c-banner {
1307
1333
  flex-shrink: 0;
@@ -1404,7 +1430,6 @@
1404
1430
  width: var(--pf-v6-c-brand--Width--base);
1405
1431
  height: var(--pf-v6-c-brand--Height--base);
1406
1432
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
1407
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
1408
1433
  }
1409
1434
  @media (min-width: 36rem) {
1410
1435
  .pf-v6-c-brand {
@@ -1431,6 +1456,9 @@
1431
1456
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
1432
1457
  }
1433
1458
  }
1459
+ .pf-v6-c-brand {
1460
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
1461
+ }
1434
1462
  @media (min-width: 36rem) {
1435
1463
  .pf-v6-c-brand {
1436
1464
  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
@@ -1511,15 +1539,16 @@
1511
1539
  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
1512
1540
  }
1513
1541
 
1542
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
1543
+ scale: -1 1;
1544
+ }
1545
+
1514
1546
  .pf-v6-c-breadcrumb__item-divider {
1515
1547
  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
1516
1548
  font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
1517
1549
  line-height: 1;
1518
1550
  color: var(--pf-v6-c-breadcrumb__item-divider--Color);
1519
1551
  }
1520
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
1521
- scale: -1 1;
1522
- }
1523
1552
 
1524
1553
  .pf-v6-c-breadcrumb__link {
1525
1554
  padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
@@ -1685,10 +1714,17 @@ button.pf-v6-c-breadcrumb__link {
1685
1714
  --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
1686
1715
  --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
1687
1716
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
1717
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1688
1718
  --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1689
1719
  --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1720
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
1721
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1690
1722
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1691
1723
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1724
+ --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
1725
+ --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
1726
+ --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
1727
+ --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);
1692
1728
  --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
1693
1729
  --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));
1694
1730
  --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -1698,10 +1734,8 @@ button.pf-v6-c-breadcrumb__link {
1698
1734
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
1699
1735
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
1700
1736
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
1701
- --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
1702
1737
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
1703
1738
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
1704
- --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
1705
1739
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
1706
1740
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
1707
1741
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -2016,6 +2050,12 @@ button.pf-v6-c-breadcrumb__link {
2016
2050
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
2017
2051
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
2018
2052
  }
2053
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2054
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
2055
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
2056
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2057
+ }
2058
+
2019
2059
  .pf-v6-c-button.pf-m-link.pf-m-inline {
2020
2060
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
2021
2061
  --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
@@ -2026,12 +2066,13 @@ button.pf-v6-c-breadcrumb__link {
2026
2066
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
2027
2067
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
2028
2068
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
2069
+ --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
2070
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
2071
+ --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
2029
2072
  --pf-v6-c-button--BackgroundColor: transparent;
2030
2073
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
2031
2074
  --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
2032
2075
  --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
2033
- --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2034
- --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2035
2076
  --pf-v6-c-button--hover--BackgroundColor: transparent;
2036
2077
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
2037
2078
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -2040,6 +2081,8 @@ button.pf-v6-c-breadcrumb__link {
2040
2081
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
2041
2082
  --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
2042
2083
  --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
2084
+ --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
2085
+ --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
2043
2086
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
2044
2087
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
2045
2088
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -2047,16 +2090,14 @@ button.pf-v6-c-breadcrumb__link {
2047
2090
  --pf-v6-c-button--hover--BorderWidth: 0;
2048
2091
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
2049
2092
  text-align: start;
2093
+ text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
2050
2094
  white-space: normal;
2051
2095
  background: transparent;
2052
2096
  outline-offset: 0.125rem;
2053
2097
  }
2054
- span.pf-v6-c-button.pf-m-link.pf-m-inline {
2055
- --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
2056
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
2057
- --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
2098
+ .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
2099
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
2058
2100
  }
2059
-
2060
2101
  .pf-v6-c-button.pf-m-link.pf-m-danger {
2061
2102
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
2062
2103
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -2526,13 +2567,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2526
2567
  margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
2527
2568
  }
2528
2569
 
2570
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
2571
+ scale: -1 1;
2572
+ }
2573
+
2529
2574
  .pf-v6-c-calendar-month__header-nav-control {
2530
2575
  margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
2531
2576
  margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
2532
2577
  }
2533
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
2534
- scale: -1 1;
2535
- }
2536
2578
 
2537
2579
  .pf-v6-c-calendar-month__header-month {
2538
2580
  flex-grow: 1;
@@ -2882,12 +2924,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2882
2924
  flex-wrap: wrap;
2883
2925
  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
2884
2926
  }
2885
- .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2886
- margin-inline-start: 0;
2887
- }
2888
2927
  .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
2889
2928
  margin-inline-end: auto;
2890
2929
  }
2930
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
2931
+ margin-inline-start: 0;
2932
+ }
2891
2933
 
2892
2934
  .pf-v6-c-card__header-main {
2893
2935
  flex-grow: 1;
@@ -2901,15 +2943,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2901
2943
  margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
2902
2944
  }
2903
2945
 
2946
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2947
+ scale: -1 1;
2948
+ }
2949
+
2904
2950
  .pf-v6-c-card__header-toggle-icon {
2905
2951
  display: inline-block;
2906
2952
  transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2907
2953
  transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
2908
2954
  transition-property: transform;
2909
2955
  }
2910
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2911
- scale: -1 1;
2912
- }
2913
2956
 
2914
2957
  .pf-v6-c-card__title-text {
2915
2958
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
@@ -2920,6 +2963,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2920
2963
  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
2921
2964
  }
2922
2965
 
2966
+ .pf-v6-c-card__subtitle {
2967
+ padding-block-start: var(--pf-t--global--spacer--sm);
2968
+ font-size: var(--pf-t--global--font--size--body--sm);
2969
+ color: var(--pf-t--global--text--color--subtle);
2970
+ }
2971
+
2923
2972
  .pf-v6-c-card__actions {
2924
2973
  display: flex;
2925
2974
  gap: var(--pf-v6-c-card__actions--Gap);
@@ -3169,13 +3218,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3169
3218
  gap: var(--pf-v6-c-clipboard-copy__group--Gap);
3170
3219
  }
3171
3220
 
3172
- .pf-v6-c-clipboard-copy__toggle-icon {
3173
- transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
3174
- }
3175
3221
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
3176
3222
  scale: -1 1;
3177
3223
  }
3178
3224
 
3225
+ .pf-v6-c-clipboard-copy__toggle-icon {
3226
+ transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
3227
+ }
3228
+
3179
3229
  .pf-v6-c-clipboard-copy__expandable-content {
3180
3230
  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
3181
3231
  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
@@ -3346,8 +3396,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3346
3396
 
3347
3397
  .pf-v6-c-code-editor__container {
3348
3398
  display: flex;
3349
- flex-direction: column;
3350
3399
  flex-grow: 1;
3400
+ flex-direction: column;
3351
3401
  }
3352
3402
 
3353
3403
  .pf-v6-c-code-editor__header {
@@ -3494,65 +3544,142 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3494
3544
  --pf-v6-c-compass--BackgroundImage--light: none;
3495
3545
  --pf-v6-c-compass--BackgroundImage--dark: none;
3496
3546
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3497
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
3498
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
3547
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
3499
3548
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3500
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3549
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3550
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3551
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3552
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3553
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3554
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3555
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3556
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3557
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3558
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3501
3559
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3502
- --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,255,255;
3503
- --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .8;
3504
- --pf-v6-c-compass__panel--BackgroundColor--light: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--light), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--light));
3505
- --pf-v6-c-compass__panel--BackgroundColor--rgb--dark: 0,0,0;
3506
- --pf-v6-c-compass__panel--BackgroundColor--opacity--dark: .8;
3507
- --pf-v6-c-compass__panel--BackgroundColor--dark: rgba(var(--pf-v6-c-compass__panel--BackgroundColor--rgb--dark), var(--pf-v6-c-compass__panel--BackgroundColor--opacity--dark));
3508
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--light);
3509
- --pf-v6-c-compass__panel--BackdropFilter--light: blur(75px);
3510
- --pf-v6-c-compass__panel--BackdropFilter--dark: blur(75px);
3511
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3560
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3561
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3562
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3512
3563
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3513
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3514
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3564
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3565
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3566
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3567
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3568
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3569
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3515
3570
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3571
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3572
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3516
3573
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3517
3574
  --pf-v6-c-compass__message-bar--Width: 450px;
3518
3575
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3519
3576
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3520
- --pf-v6-c-compass__hero--gradient--angle: 109deg;
3521
- --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
3522
- --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
3523
- --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
3524
- --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
3525
- --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
3526
- --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
3527
- --pf-v6-c-compass__hero--BackgroundImage--light: none;
3528
- --pf-v6-c-compass__hero--BackgroundImage--dark: none;
3529
- --pf-v6-c-compass__hero-body--Width: 800px;
3530
- --pf-v6-c-compass__hero-body--MaxWidth: 80%;
3577
+ --pf-v6-c-compass--section--slide--length--header: 100%;
3578
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
3579
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
3580
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
3581
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
3582
+ --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3583
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
3584
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3585
+ --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);
3586
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
3587
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
3588
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3589
+ }
3590
+ @media screen and (prefers-reduced-motion: no-preference) {
3591
+ .pf-v6-c-compass {
3592
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3593
+ --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);
3594
+ --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;
3595
+ }
3596
+ .pf-v6-c-compass.pf-m-animate-smoothly {
3597
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3598
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
3599
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
3600
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
3601
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
3602
+ --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);
3603
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3604
+ --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);
3605
+ }
3531
3606
  }
3532
3607
 
3533
3608
  .pf-v6-c-compass {
3609
+ interpolate-size: allow-keywords;
3534
3610
  display: grid;
3535
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
3536
- grid-template-rows: auto 1fr auto;
3611
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3612
+ grid-template-rows: auto 1fr;
3537
3613
  grid-template-columns: auto 1fr auto;
3538
- gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3614
+ grid-auto-rows: auto;
3539
3615
  align-items: center;
3540
3616
  justify-content: center;
3541
3617
  height: 100dvh;
3542
3618
  padding: var(--pf-v6-c-compass--Padding);
3543
- margin-inline: auto;
3619
+ overflow: hidden;
3544
3620
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3545
3621
  background-size: cover;
3546
3622
  }
3623
+ .pf-v6-c-compass.pf-m-dock {
3624
+ grid-template-areas: "dock main";
3625
+ grid-template-rows: auto;
3626
+ grid-template-columns: auto 1fr;
3627
+ align-items: stretch;
3628
+ padding: 0;
3629
+ }
3630
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
3631
+ padding: var(--pf-v6-c-compass--Padding);
3632
+ }
3547
3633
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3548
3634
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3549
3635
  }
3636
+ .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3637
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3638
+ }
3639
+
3640
+ .pf-v6-c-compass__header,
3641
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3642
+ .pf-v6-c-compass__main-footer,
3643
+ .pf-v6-c-compass__footer {
3644
+ margin: 0;
3645
+ visibility: hidden;
3646
+ opacity: 0;
3647
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
3648
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
3649
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
3650
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
3651
+ }
3652
+ .pf-v6-c-compass__header.pf-m-expanded,
3653
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
3654
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3655
+ .pf-v6-c-compass__footer.pf-m-expanded {
3656
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
3657
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
3658
+ visibility: visible;
3659
+ opacity: 1;
3660
+ translate: 0;
3661
+ }
3662
+
3663
+ .pf-v6-c-compass__header,
3664
+ .pf-v6-c-compass__main-footer,
3665
+ .pf-v6-c-compass__footer {
3666
+ height: 0;
3667
+ }
3668
+ .pf-v6-c-compass__header.pf-m-expanded,
3669
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3670
+ .pf-v6-c-compass__footer.pf-m-expanded {
3671
+ height: auto;
3672
+ }
3550
3673
 
3551
3674
  .pf-v6-c-compass__header {
3552
3675
  display: grid;
3553
3676
  grid-area: header;
3554
3677
  grid-template-columns: 1fr auto 1fr;
3555
3678
  align-items: start;
3679
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
3680
+ }
3681
+ .pf-v6-c-compass__header.pf-m-expanded {
3682
+ margin-block-end: var(--pf-v6-c-compass--Gap);
3556
3683
  }
3557
3684
 
3558
3685
  .pf-v6-c-compass__profile {
@@ -3563,6 +3690,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3563
3690
  }
3564
3691
 
3565
3692
  .pf-v6-c-compass__nav {
3693
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3694
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3695
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3696
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3566
3697
  display: flex;
3567
3698
  flex-direction: column;
3568
3699
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3570,12 +3701,53 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3570
3701
  justify-self: stretch;
3571
3702
  }
3572
3703
 
3704
+ .pf-v6-c-compass__nav-content {
3705
+ display: flex;
3706
+ align-items: center;
3707
+ }
3708
+
3709
+ .pf-v6-c-compass__nav-main {
3710
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3711
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3712
+ }
3713
+
3573
3714
  .pf-v6-c-compass__sidebar {
3574
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
3715
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3716
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3717
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3718
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3719
+ display: flex;
3720
+ width: 0;
3721
+ }
3722
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
3723
+ width: auto;
3575
3724
  }
3725
+ .pf-v6-c-compass__sidebar.pf-m-start {
3726
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3727
+ }
3728
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3729
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3730
+ }
3731
+
3576
3732
  .pf-v6-c-compass__sidebar.pf-m-start {
3577
3733
  grid-area: sidebar-start;
3578
3734
  }
3735
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
3736
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
3737
+ }
3738
+ .pf-v6-c-compass__sidebar.pf-m-end {
3739
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3740
+ }
3741
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
3742
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3743
+ }
3744
+
3745
+ .pf-v6-c-compass__sidebar.pf-m-end {
3746
+ grid-area: sidebar-end;
3747
+ }
3748
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
3749
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
3750
+ }
3579
3751
 
3580
3752
  .pf-v6-c-compass__main {
3581
3753
  display: flex;
@@ -3586,6 +3758,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3586
3758
  min-height: 0;
3587
3759
  }
3588
3760
 
3761
+ .pf-v6-c-compass__main-header-content {
3762
+ display: flex;
3763
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
3764
+ }
3765
+
3766
+ .pf-v6-c-compass__main-header-title {
3767
+ flex-grow: 1;
3768
+ }
3769
+
3589
3770
  .pf-v6-c-compass__content {
3590
3771
  display: flex;
3591
3772
  flex: 1 0 0;
@@ -3598,15 +3779,24 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3598
3779
  max-height: 100%;
3599
3780
  }
3600
3781
 
3601
- .pf-v6-c-compass__sidebar.pf-m-end {
3602
- grid-area: sidebar-end;
3603
- padding: var(--pf-t--global--spacer--sm);
3782
+ .pf-v6-c-compass__main-footer {
3783
+ display: flex;
3784
+ justify-content: center;
3785
+ min-height: 0;
3786
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3787
+ }
3788
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
3789
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3604
3790
  }
3605
3791
 
3606
3792
  .pf-v6-c-compass__footer {
3607
3793
  display: flex;
3608
- grid-area: footer;
3794
+ grid-column: 1/-1;
3609
3795
  justify-content: center;
3796
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3797
+ }
3798
+ .pf-v6-c-compass__footer.pf-m-expanded {
3799
+ margin-block-start: var(--pf-v6-c-compass--Gap);
3610
3800
  }
3611
3801
 
3612
3802
  .pf-v6-c-compass__message-bar {
@@ -3616,17 +3806,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3616
3806
  }
3617
3807
 
3618
3808
  .pf-v6-c-compass__panel {
3619
- padding: var(--pf-v6-c-compass__panel--Padding);
3620
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor, var(--pf-v6-c-compass__panel--BackgroundColor--light));
3621
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter, var(--pf-v6-c-compass__panel--BackdropFilter--light));
3809
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3810
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3811
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3812
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3813
+ background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3814
+ backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3622
3815
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3623
3816
  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3624
3817
  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3625
3818
  }
3626
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__panel {
3627
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-v6-c-compass__panel--BackdropFilter--dark);
3628
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-v6-c-compass__panel--BackgroundColor--dark);
3629
- }
3630
3819
  .pf-v6-c-compass__panel.pf-m-no-border {
3631
3820
  border-width: 0;
3632
3821
  }
@@ -3643,36 +3832,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3643
3832
  overflow: auto;
3644
3833
  }
3645
3834
 
3646
- .pf-v6-c-compass__hero {
3647
- display: flex;
3648
- padding-block-start: 32px;
3649
- padding-block-end: 32px;
3650
- padding-inline-start: 72px;
3651
- padding-inline-end: 0;
3652
- background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
3653
- background-repeat: no-repeat;
3654
- background-position: right center;
3655
- background-size: contain;
3656
- border-radius: 24px 72px;
3657
- }
3658
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
3659
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
3660
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
3661
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
3662
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
3663
- }
3664
-
3665
- .pf-v6-c-compass__hero-body {
3666
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3667
- }
3668
-
3669
- :where(:root.pf-v6-theme-no-glass) .pf-v6-c-compass {
3670
- --pf-v6-c-compass--glass--opacity: 100%;
3671
- --pf-v6-c-compass--glass--border: var(--pf-t--global--border--color--default);
3672
- --pf-v6-c-compass--glass--blend-mode: none;
3673
- --pf-v6-c-compass--glass--blend-mode--dark: none;
3674
- }
3675
-
3676
3835
  /* stylelint-disable */
3677
3836
  @media (max-width: 1200px) {
3678
3837
  .pf-v6-c-compass * {
@@ -4394,6 +4553,14 @@ ul) {
4394
4553
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
4395
4554
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
4396
4555
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
4556
+ }
4557
+ @media screen and (min-width: 36rem) {
4558
+ .pf-v6-c-data-list {
4559
+ --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
4560
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
4561
+ }
4562
+ }
4563
+ .pf-v6-c-data-list {
4397
4564
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4398
4565
  --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
4399
4566
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -4403,6 +4570,14 @@ ul) {
4403
4570
  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
4404
4571
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
4405
4572
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
4573
+ }
4574
+ @media screen and (min-width: 36rem) {
4575
+ .pf-v6-c-data-list {
4576
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
4577
+ --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
4578
+ }
4579
+ }
4580
+ .pf-v6-c-data-list {
4406
4581
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4407
4582
  --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md);
4408
4583
  --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -4498,18 +4673,6 @@ ul) {
4498
4673
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
4499
4674
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4500
4675
  }
4501
- @media screen and (min-width: 36rem) {
4502
- .pf-v6-c-data-list {
4503
- --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
4504
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
4505
- }
4506
- }
4507
- @media screen and (min-width: 36rem) {
4508
- .pf-v6-c-data-list {
4509
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
4510
- --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
4511
- }
4512
- }
4513
4676
 
4514
4677
  .pf-v6-c-data-list {
4515
4678
  font-size: var(--pf-v6-c-data-list--FontSize);
@@ -4672,12 +4835,6 @@ ul) {
4672
4835
  --pf-v6-hidden-visible--hidden--Display: none;
4673
4836
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4674
4837
  display: var(--pf-v6-hidden-visible--Display);
4675
- gap: var(--pf-v6-c-data-list__item-action--Gap);
4676
- align-content: flex-start;
4677
- align-items: flex-start;
4678
- padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
4679
- padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
4680
- margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
4681
4838
  }
4682
4839
  .pf-v6-c-data-list__item-action.pf-m-hidden {
4683
4840
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -4722,6 +4879,14 @@ ul) {
4722
4879
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
4723
4880
  }
4724
4881
  }
4882
+ .pf-v6-c-data-list__item-action {
4883
+ gap: var(--pf-v6-c-data-list__item-action--Gap);
4884
+ align-content: flex-start;
4885
+ align-items: flex-start;
4886
+ padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
4887
+ padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
4888
+ margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
4889
+ }
4725
4890
 
4726
4891
  .pf-v6-c-data-list__toggle {
4727
4892
  margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
@@ -4729,15 +4894,16 @@ ul) {
4729
4894
  margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
4730
4895
  }
4731
4896
 
4897
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
4898
+ scale: -1 1;
4899
+ }
4900
+
4732
4901
  .pf-v6-c-data-list__toggle-icon {
4733
4902
  height: var(--pf-v6-c-data-list__toggle-icon--Height);
4734
4903
  pointer-events: none;
4735
4904
  transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
4736
4905
  transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
4737
4906
  }
4738
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
4739
- scale: -1 1;
4740
- }
4741
4907
 
4742
4908
  .pf-v6-c-data-list__item-content {
4743
4909
  display: grid;
@@ -4832,6 +4998,13 @@ ul) {
4832
4998
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
4833
4999
  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
4834
5000
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
5001
+ }
5002
+ @media screen and (min-width: 36rem) {
5003
+ .pf-v6-c-description-list {
5004
+ --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
5005
+ }
5006
+ }
5007
+ .pf-v6-c-description-list {
4835
5008
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
4836
5009
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
4837
5010
  --pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -4860,11 +5033,6 @@ ul) {
4860
5033
  --pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
4861
5034
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
4862
5035
  }
4863
- @media screen and (min-width: 36rem) {
4864
- .pf-v6-c-description-list {
4865
- --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
4866
- }
4867
- }
4868
5036
  @media (min-width: 36rem) {
4869
5037
  .pf-v6-c-description-list {
4870
5038
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
@@ -5246,6 +5414,15 @@ ul) {
5246
5414
  --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
5247
5415
  --pf-v6-c-dual-list-selector__list--TranslateY: 0;
5248
5416
  --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
5417
+ }
5418
+ @media screen and (prefers-reduced-motion: no-preference) {
5419
+ .pf-v6-c-dual-list-selector {
5420
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
5421
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
5422
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
5423
+ }
5424
+ }
5425
+ .pf-v6-c-dual-list-selector {
5249
5426
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
5250
5427
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
5251
5428
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -5287,13 +5464,6 @@ ul) {
5287
5464
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
5288
5465
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
5289
5466
  }
5290
- @media screen and (prefers-reduced-motion: no-preference) {
5291
- .pf-v6-c-dual-list-selector {
5292
- --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
5293
- --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
5294
- --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
5295
- }
5296
- }
5297
5467
 
5298
5468
  .pf-v6-c-dual-list-selector {
5299
5469
  display: grid;
@@ -5364,8 +5534,6 @@ ul) {
5364
5534
 
5365
5535
  .pf-v6-c-dual-list-selector__list {
5366
5536
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
5367
- display: flex;
5368
- flex-direction: column;
5369
5537
  }
5370
5538
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
5371
5539
  --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
@@ -5373,16 +5541,22 @@ ul) {
5373
5541
  }
5374
5542
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5375
5543
  transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
5376
- position: absolute;
5377
- inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
5378
5544
  }
5379
5545
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5380
5546
  transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
5381
5547
  }
5382
5548
 
5549
+ .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
5550
+ position: absolute;
5551
+ inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
5552
+ }
5383
5553
  .pf-v6-c-dual-list-selector__list.pf-m-drag-over {
5384
5554
  overflow-anchor: none;
5385
5555
  }
5556
+ .pf-v6-c-dual-list-selector__list {
5557
+ display: flex;
5558
+ flex-direction: column;
5559
+ }
5386
5560
 
5387
5561
  .pf-v6-c-dual-list-selector__list-item:focus-visible {
5388
5562
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
@@ -5667,11 +5841,6 @@ ul) {
5667
5841
  --pf-v6-hidden-visible--hidden--Display: none;
5668
5842
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5669
5843
  display: var(--pf-v6-hidden-visible--Display);
5670
- flex-shrink: 0;
5671
- align-items: stretch;
5672
- align-self: stretch;
5673
- justify-content: center;
5674
- border: 0;
5675
5844
  }
5676
5845
  .pf-v6-c-divider.pf-m-hidden {
5677
5846
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -5716,6 +5885,13 @@ ul) {
5716
5885
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
5717
5886
  }
5718
5887
  }
5888
+ .pf-v6-c-divider {
5889
+ flex-shrink: 0;
5890
+ align-items: stretch;
5891
+ align-self: stretch;
5892
+ justify-content: center;
5893
+ border: 0;
5894
+ }
5719
5895
  .pf-v6-c-divider::before {
5720
5896
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
5721
5897
  content: "";
@@ -5960,6 +6136,7 @@ ul) {
5960
6136
  }
5961
6137
 
5962
6138
  .pf-v6-c-drawer {
6139
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
5963
6140
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5964
6141
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5965
6142
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -5990,6 +6167,7 @@ ul) {
5990
6167
  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
5991
6168
  --pf-v6-c-drawer__panel--Opacity: 0;
5992
6169
  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
6170
+ --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
5993
6171
  --pf-v6-c-drawer__panel--FlexBasis: 100%;
5994
6172
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
5995
6173
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -6005,6 +6183,29 @@ ul) {
6005
6183
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
6006
6184
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
6007
6185
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
6186
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
6187
+ --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
6188
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
6189
+ --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
6190
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
6191
+ --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
6192
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6193
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
6194
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
6195
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6196
+ }
6197
+ @media screen and (prefers-reduced-motion: no-preference) {
6198
+ .pf-v6-c-drawer {
6199
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
6200
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
6201
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
6202
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
6203
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
6204
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
6205
+ --pf-v6-c-drawer__panel--Opacity: 1;
6206
+ }
6207
+ }
6208
+ .pf-v6-c-drawer {
6008
6209
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6009
6210
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6010
6211
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6067,6 +6268,17 @@ ul) {
6067
6268
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
6068
6269
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
6069
6270
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
6271
+ }
6272
+ @media screen and (min-width: 75rem) {
6273
+ .pf-v6-c-drawer {
6274
+ --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
6275
+ }
6276
+ .pf-v6-c-drawer.pf-m-panel-bottom {
6277
+ --pf-v6-c-drawer__panel--MinWidth: auto;
6278
+ --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
6279
+ }
6280
+ }
6281
+ .pf-v6-c-drawer {
6070
6282
  --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
6071
6283
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
6072
6284
  --pf-v6-c-drawer__panel--BoxShadow: none;
@@ -6081,46 +6293,32 @@ ul) {
6081
6293
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
6082
6294
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
6083
6295
  }
6084
- @media screen and (prefers-reduced-motion: no-preference) {
6085
- .pf-v6-c-drawer {
6086
- --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
6087
- --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
6088
- --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
6089
- --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
6090
- --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
6091
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
6092
- --pf-v6-c-drawer__panel--Opacity: 1;
6093
- }
6094
- }
6095
- @media screen and (min-width: 75rem) {
6096
- .pf-v6-c-drawer {
6097
- --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
6098
- }
6099
- .pf-v6-c-drawer.pf-m-panel-bottom {
6100
- --pf-v6-c-drawer__panel--MinWidth: auto;
6101
- --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
6102
- }
6103
- }
6104
6296
 
6105
6297
  .pf-v6-c-drawer {
6106
6298
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
6107
- --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
6108
- display: flex;
6109
- flex-direction: column;
6110
- height: 100%;
6111
- overflow-x: hidden;
6112
6299
  }
6113
6300
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
6114
6301
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
6115
6302
  }
6116
6303
 
6304
+ .pf-v6-c-drawer {
6305
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
6306
+ }
6117
6307
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
6118
6308
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
6119
6309
  }
6120
6310
 
6311
+ .pf-v6-c-drawer {
6312
+ display: flex;
6313
+ flex-direction: column;
6314
+ height: 100%;
6315
+ overflow-x: hidden;
6316
+ }
6121
6317
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
6122
6318
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
6123
6319
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6320
+ --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6321
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
6124
6322
  }
6125
6323
  .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) {
6126
6324
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -6144,19 +6342,21 @@ ul) {
6144
6342
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
6145
6343
  }
6146
6344
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6147
- transform: translateX(-100%);
6148
- --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
6149
- visibility: visible;
6345
+ transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6150
6346
  }
6151
6347
  :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 {
6152
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
6348
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
6153
6349
  }
6154
6350
 
6351
+ .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6352
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
6353
+ visibility: visible;
6354
+ }
6155
6355
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6156
6356
  transform: translateX(0);
6157
6357
  }
6158
6358
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6159
- transform: translate(0, -100%);
6359
+ transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6160
6360
  }
6161
6361
  .pf-v6-c-drawer.pf-m-resizing {
6162
6362
  --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -6165,6 +6365,26 @@ ul) {
6165
6365
  .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
6166
6366
  pointer-events: auto;
6167
6367
  }
6368
+ @media screen and (min-width: 48rem) {
6369
+ .pf-v6-c-drawer.pf-m-pill {
6370
+ --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
6371
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
6372
+ --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
6373
+ --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6374
+ --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
6375
+ }
6376
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6377
+ border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
6378
+ border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
6379
+ border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6380
+ border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6381
+ }
6382
+ .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6383
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6384
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6385
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6386
+ }
6387
+ }
6168
6388
 
6169
6389
  .pf-v6-c-drawer__section {
6170
6390
  flex-grow: 0;
@@ -6180,6 +6400,7 @@ ul) {
6180
6400
  .pf-v6-c-drawer__main {
6181
6401
  display: flex;
6182
6402
  flex: 1;
6403
+ gap: var(--pf-v6-c-drawer__main--Gap, 0);
6183
6404
  overflow: hidden;
6184
6405
  }
6185
6406
 
@@ -6187,8 +6408,8 @@ ul) {
6187
6408
  .pf-v6-c-drawer__panel,
6188
6409
  .pf-v6-c-drawer__panel-main {
6189
6410
  display: flex;
6190
- flex-direction: column;
6191
6411
  flex-shrink: 0;
6412
+ flex-direction: column;
6192
6413
  overflow: auto;
6193
6414
  }
6194
6415
 
@@ -6218,6 +6439,8 @@ ul) {
6218
6439
  row-gap: var(--pf-v6-c-drawer__panel--RowGap);
6219
6440
  order: 1;
6220
6441
  max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
6442
+ margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
6443
+ margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
6221
6444
  overflow: auto;
6222
6445
  visibility: hidden;
6223
6446
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -6226,6 +6449,7 @@ ul) {
6226
6449
  border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
6227
6450
  border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
6228
6451
  border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
6452
+ border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
6229
6453
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
6230
6454
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
6231
6455
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -6413,7 +6637,7 @@ ul) {
6413
6637
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
6414
6638
  }
6415
6639
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6416
- transform: translateX(0);
6640
+ transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
6417
6641
  }
6418
6642
  .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 {
6419
6643
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -6425,6 +6649,8 @@ ul) {
6425
6649
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
6426
6650
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
6427
6651
  --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
6652
+ --pf-v6-c-drawer__panel--MarginBlock: initial;
6653
+ --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
6428
6654
  min-width: auto;
6429
6655
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
6430
6656
  }
@@ -6472,82 +6698,86 @@ ul) {
6472
6698
  }
6473
6699
  @media (min-width: 48rem) {
6474
6700
  .pf-v6-c-drawer__panel.pf-m-width-25 {
6475
- --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)));
6476
6702
  }
6477
6703
  .pf-v6-c-drawer__panel.pf-m-width-33 {
6478
- --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)));
6479
6705
  }
6480
6706
  .pf-v6-c-drawer__panel.pf-m-width-50 {
6481
- --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)));
6482
6708
  }
6483
6709
  .pf-v6-c-drawer__panel.pf-m-width-66 {
6484
- --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)));
6485
6711
  }
6486
6712
  .pf-v6-c-drawer__panel.pf-m-width-75 {
6487
- --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)));
6488
6714
  }
6489
6715
  .pf-v6-c-drawer__panel.pf-m-width-100 {
6490
- --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;
6491
6718
  }
6492
6719
  }
6493
6720
  @media (min-width: 62rem) {
6494
6721
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
6495
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6722
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6496
6723
  }
6497
6724
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
6498
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6725
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6499
6726
  }
6500
6727
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
6501
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6728
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6502
6729
  }
6503
6730
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
6504
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6731
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6505
6732
  }
6506
6733
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
6507
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6734
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6508
6735
  }
6509
6736
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
6510
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6737
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6738
+ --pf-v6-c-drawer__main--Gap: 0;
6511
6739
  }
6512
6740
  }
6513
6741
  @media (min-width: 75rem) {
6514
6742
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
6515
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6743
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6516
6744
  }
6517
6745
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
6518
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6746
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6519
6747
  }
6520
6748
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
6521
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6749
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6522
6750
  }
6523
6751
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
6524
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6752
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6525
6753
  }
6526
6754
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
6527
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6755
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6528
6756
  }
6529
6757
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
6530
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6758
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6759
+ --pf-v6-c-drawer__main--Gap: 0;
6531
6760
  }
6532
6761
  }
6533
6762
  @media (min-width: 90.625rem) {
6534
6763
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
6535
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6764
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6536
6765
  }
6537
6766
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
6538
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6767
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6539
6768
  }
6540
6769
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
6541
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6770
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6542
6771
  }
6543
6772
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
6544
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6773
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6545
6774
  }
6546
6775
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
6547
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6776
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6548
6777
  }
6549
6778
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
6550
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6779
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6780
+ --pf-v6-c-drawer__main--Gap: 0;
6551
6781
  }
6552
6782
  }
6553
6783
  @media (min-width: 48rem) {
@@ -6979,10 +7209,24 @@ ul) {
6979
7209
  --pf-v6-c-expandable-section__content--Opacity: 0;
6980
7210
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6981
7211
  --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
7212
+ --pf-v6-c-expandable-section__content--MaxHeight: 0px;
7213
+ --pf-v6-c-expandable-section__content--Visibility: hidden;
7214
+ --pf-v6-c-expandable-section__content--Opacity: 0;
6982
7215
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6983
7216
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6984
7217
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
6985
7218
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
7219
+ }
7220
+ @media screen and (prefers-reduced-motion: no-preference) {
7221
+ .pf-v6-c-expandable-section {
7222
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7223
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7224
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
7225
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
7226
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
7227
+ }
7228
+ }
7229
+ .pf-v6-c-expandable-section {
6986
7230
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
6987
7231
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
6988
7232
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6999,15 +7243,6 @@ ul) {
6999
7243
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
7000
7244
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
7001
7245
  }
7002
- @media screen and (prefers-reduced-motion: no-preference) {
7003
- .pf-v6-c-expandable-section {
7004
- --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
7005
- --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
7006
- --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
7007
- --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
7008
- --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
7009
- }
7010
- }
7011
7246
 
7012
7247
  .pf-v6-c-expandable-section {
7013
7248
  display: flex;
@@ -7066,9 +7301,13 @@ ul) {
7066
7301
  }
7067
7302
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
7068
7303
  display: -webkit-box;
7304
+ overflow: hidden;
7069
7305
  -webkit-box-orient: vertical;
7070
7306
  -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
7071
- overflow: hidden;
7307
+ }
7308
+
7309
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
7310
+ scale: -1 1;
7072
7311
  }
7073
7312
 
7074
7313
  .pf-v6-c-expandable-section__toggle-icon {
@@ -7078,10 +7317,6 @@ ul) {
7078
7317
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
7079
7318
  transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
7080
7319
  }
7081
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
7082
- scale: -1 1;
7083
- }
7084
-
7085
7320
  .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
7086
7321
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
7087
7322
  }
@@ -7664,8 +7899,8 @@ ul) {
7664
7899
 
7665
7900
  .pf-v6-c-form__field-group-header-main {
7666
7901
  display: flex;
7667
- flex-direction: column;
7668
7902
  flex-grow: 1;
7903
+ flex-direction: column;
7669
7904
  }
7670
7905
 
7671
7906
  .pf-v6-c-form__field-group-header-title {
@@ -7906,8 +8141,8 @@ ul) {
7906
8141
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--textarea--PaddingInlineEnd);
7907
8142
  }
7908
8143
  .pf-v6-c-form-control.pf-m-textarea > textarea {
7909
- outline-offset: 0;
7910
8144
  scrollbar-gutter: stable;
8145
+ outline-offset: 0;
7911
8146
  }
7912
8147
  .pf-v6-c-form-control.pf-m-textarea .pf-v6-c-form-control__utilities {
7913
8148
  padding-block-start: var(--pf-v6-c-form-control__utilities--textarea--PaddingBlockStart);
@@ -8087,81 +8322,6 @@ ul) {
8087
8322
  pointer-events: none;
8088
8323
  }
8089
8324
 
8090
- .pf-v6-c-hint {
8091
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8092
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8093
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8094
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8095
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8096
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8097
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8098
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8099
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8100
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8101
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8102
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8103
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8104
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8105
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8106
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8107
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8108
- }
8109
-
8110
- .pf-v6-c-hint {
8111
- display: grid;
8112
- grid-template-columns: 1fr auto;
8113
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8114
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8115
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8116
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8117
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8118
- color: var(--pf-v6-c-hint--Color);
8119
- background-color: var(--pf-v6-c-hint--BackgroundColor);
8120
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8121
- border-radius: var(--pf-v6-c-hint--BorderRadius);
8122
- }
8123
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8124
- text-align: start;
8125
- white-space: normal;
8126
- }
8127
-
8128
- .pf-v6-c-hint__actions {
8129
- display: inline-grid;
8130
- grid-row: 1;
8131
- grid-column: 2;
8132
- grid-auto-flow: column;
8133
- align-self: start;
8134
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8135
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8136
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8137
- text-align: end;
8138
- }
8139
- .pf-v6-c-hint__actions.pf-m-no-offset {
8140
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8141
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8142
- }
8143
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8144
- grid-column: 1;
8145
- }
8146
-
8147
- .pf-v6-c-hint__title {
8148
- align-self: center;
8149
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
8150
- }
8151
-
8152
- .pf-v6-c-hint__body {
8153
- grid-column: 1/-1;
8154
- font-size: var(--pf-v6-c-hint__body--FontSize);
8155
- }
8156
-
8157
- .pf-v6-c-hint__footer {
8158
- grid-column: 1/-1;
8159
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8160
- }
8161
- .pf-v6-c-hint__footer > :not(:last-child) {
8162
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8163
- }
8164
-
8165
8325
  .pf-v6-c-helper-text {
8166
8326
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
8167
8327
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8247,6 +8407,156 @@ ul) {
8247
8407
  color: var(--pf-v6-c-helper-text__item-text--Color);
8248
8408
  }
8249
8409
 
8410
+ .pf-v6-c-hero {
8411
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
8412
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
8413
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
8414
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8415
+ --pf-v6-c-hero--gradient--angle: 109deg;
8416
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8417
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
8418
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
8419
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8420
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8421
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8422
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
8423
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
8424
+ --pf-v6-c-hero--BackgroundImage--light: none;
8425
+ --pf-v6-c-hero--BackgroundImage--dark: none;
8426
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
8427
+ --pf-v6-c-hero--BackgroundPosition: right center;
8428
+ --pf-v6-c-hero--BackgroundSize: contain;
8429
+ --pf-v6-c-hero--BorderStyle: solid;
8430
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
8431
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
8432
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
8433
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
8434
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
8435
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
8436
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
8437
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
8438
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
8439
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
8440
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
8441
+ --pf-v6-c-hero__body--Width: 800px;
8442
+ --pf-v6-c-hero__body--MaxWidth: 80%;
8443
+ }
8444
+
8445
+ .pf-v6-c-hero {
8446
+ display: flex;
8447
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
8448
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
8449
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
8450
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
8451
+ 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%);
8452
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
8453
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
8454
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
8455
+ border-color: var(--pf-v6-c-hero--BorderColor);
8456
+ border-style: var(--pf-v6-c-hero--BorderStyle);
8457
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
8458
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
8459
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
8460
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
8461
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
8462
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
8463
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
8464
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
8465
+ }
8466
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
8467
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
8468
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
8469
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
8470
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
8471
+ }
8472
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
8473
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8474
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8475
+ }
8476
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
8477
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
8478
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
8479
+ }
8480
+
8481
+ .pf-v6-c-hero__body {
8482
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
8483
+ }
8484
+
8485
+ .pf-v6-c-hint {
8486
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8487
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8488
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8489
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8490
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8491
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8492
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8493
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8494
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8495
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8496
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8497
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8498
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8499
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8500
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8501
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8502
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8503
+ }
8504
+
8505
+ .pf-v6-c-hint {
8506
+ display: grid;
8507
+ grid-template-columns: 1fr auto;
8508
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8509
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8510
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8511
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8512
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8513
+ color: var(--pf-v6-c-hint--Color);
8514
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
8515
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8516
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
8517
+ }
8518
+ .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8519
+ text-align: start;
8520
+ white-space: normal;
8521
+ }
8522
+
8523
+ .pf-v6-c-hint__actions {
8524
+ display: inline-grid;
8525
+ grid-row: 1;
8526
+ grid-column: 2;
8527
+ grid-auto-flow: column;
8528
+ align-self: start;
8529
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8530
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8531
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8532
+ text-align: end;
8533
+ }
8534
+ .pf-v6-c-hint__actions.pf-m-no-offset {
8535
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8536
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8537
+ }
8538
+ .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8539
+ grid-column: 1;
8540
+ }
8541
+
8542
+ .pf-v6-c-hint__title {
8543
+ align-self: center;
8544
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
8545
+ }
8546
+
8547
+ .pf-v6-c-hint__body {
8548
+ grid-column: 1/-1;
8549
+ font-size: var(--pf-v6-c-hint__body--FontSize);
8550
+ }
8551
+
8552
+ .pf-v6-c-hint__footer {
8553
+ grid-column: 1/-1;
8554
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8555
+ }
8556
+ .pf-v6-c-hint__footer > :not(:last-child) {
8557
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8558
+ }
8559
+
8250
8560
  .pf-v6-c-icon {
8251
8561
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8252
8562
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
@@ -8975,6 +9285,10 @@ label.pf-v6-c-input-group__text {
8975
9285
  margin-block-end: var(--pf-v6-c-jump-links__toggle--MarginBlockEnd);
8976
9286
  }
8977
9287
 
9288
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
9289
+ scale: -1 1;
9290
+ }
9291
+
8978
9292
  .pf-v6-c-jump-links__toggle-icon {
8979
9293
  display: inline-block;
8980
9294
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
@@ -8983,9 +9297,6 @@ label.pf-v6-c-input-group__text {
8983
9297
  transition-property: transform;
8984
9298
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
8985
9299
  }
8986
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
8987
- scale: -1 1;
8988
- }
8989
9300
 
8990
9301
  .pf-v6-c-label {
8991
9302
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -9482,6 +9793,10 @@ input.pf-v6-c-label__content {
9482
9793
  .pf-v6-c-label__actions {
9483
9794
  margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
9484
9795
  }
9796
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
9797
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
9798
+ }
9799
+
9485
9800
  .pf-v6-c-label__actions .pf-v6-c-button {
9486
9801
  --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
9487
9802
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
@@ -9492,9 +9807,6 @@ input.pf-v6-c-label__content {
9492
9807
  margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
9493
9808
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
9494
9809
  }
9495
- .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
9496
- --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
9497
- }
9498
9810
 
9499
9811
  .pf-v6-c-label-group {
9500
9812
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
@@ -9635,9 +9947,9 @@ input.pf-v6-c-label__content {
9635
9947
  padding-inline-end: var(--pf-v6-c-label-group__textarea--PaddingInlineEnd);
9636
9948
  white-space: nowrap;
9637
9949
  resize: none;
9638
- border: 0;
9639
- -ms-overflow-style: none;
9640
9950
  scrollbar-width: none;
9951
+ -ms-overflow-style: none;
9952
+ border: 0;
9641
9953
  }
9642
9954
  .pf-v6-c-label-group__textarea::-webkit-scrollbar {
9643
9955
  display: none;
@@ -9723,18 +10035,48 @@ ul.pf-v6-c-list {
9723
10035
  --pf-v6-c-login__container--PaddingInlineStart: 6.125rem;
9724
10036
  --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem;
9725
10037
  --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
10038
+ }
10039
+ @media (min-width: 75rem) {
10040
+ .pf-v6-c-login {
10041
+ --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
10042
+ }
10043
+ }
10044
+ .pf-v6-c-login {
9726
10045
  --pf-v6-c-login__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
9727
10046
  --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
9728
10047
  --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10048
+ }
10049
+ @media (min-width: 36rem) {
10050
+ .pf-v6-c-login {
10051
+ --pf-v6-c-login__header--PaddingInlineEnd: 0;
10052
+ --pf-v6-c-login__header--PaddingInlineStart: 0;
10053
+ }
10054
+ }
10055
+ .pf-v6-c-login {
9729
10056
  --pf-v6-c-login__header--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
9730
10057
  --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl);
9731
10058
  --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9732
10059
  --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
10060
+ }
10061
+ @media (min-width: 75rem) {
10062
+ .pf-v6-c-login {
10063
+ --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
10064
+ --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
10065
+ }
10066
+ }
10067
+ .pf-v6-c-login {
9733
10068
  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9734
10069
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9735
10070
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
9736
10071
  --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9737
10072
  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
10073
+ }
10074
+ @media (min-width: 75rem) {
10075
+ .pf-v6-c-login {
10076
+ --pf-v6-c-login__main--MarginBlockEnd: 0;
10077
+ }
10078
+ }
10079
+ .pf-v6-c-login {
9738
10080
  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
9739
10081
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
9740
10082
  --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -9746,11 +10088,28 @@ ul.pf-v6-c-list {
9746
10088
  --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-t--global--spacer--sm);
9747
10089
  --pf-v6-c-login__main-header-desc--md--MarginBlockEnd: 0;
9748
10090
  --pf-v6-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
10091
+ }
10092
+ @media (min-width: 48rem) {
10093
+ .pf-v6-c-login {
10094
+ --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
10095
+ --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
10096
+ --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
10097
+ }
10098
+ }
10099
+ .pf-v6-c-login {
9749
10100
  --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
9750
10101
  --pf-v6-c-login__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
9751
10102
  --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-t--global--spacer--xl);
9752
10103
  --pf-v6-c-login__main-body--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
9753
10104
  --pf-v6-c-login__main-body--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
10105
+ }
10106
+ @media (min-width: 48rem) {
10107
+ .pf-v6-c-login {
10108
+ --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
10109
+ --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
10110
+ }
10111
+ }
10112
+ .pf-v6-c-login {
9754
10113
  --pf-v6-c-login__main-footer--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
9755
10114
  --pf-v6-c-login__main-footer--c-title--MarginBlockEnd: var(--pf-t--global--spacer--md);
9756
10115
  --pf-v6-c-login__main-footer-links--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -9768,43 +10127,6 @@ ul.pf-v6-c-list {
9768
10127
  --pf-v6-c-login__main-footer-band-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
9769
10128
  --pf-v6-c-login__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
9770
10129
  --pf-v6-c-login__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9771
- --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
9772
- --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
9773
- }
9774
- @media (min-width: 75rem) {
9775
- .pf-v6-c-login {
9776
- --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
9777
- }
9778
- }
9779
- @media (min-width: 36rem) {
9780
- .pf-v6-c-login {
9781
- --pf-v6-c-login__header--PaddingInlineEnd: 0;
9782
- --pf-v6-c-login__header--PaddingInlineStart: 0;
9783
- }
9784
- }
9785
- @media (min-width: 75rem) {
9786
- .pf-v6-c-login {
9787
- --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
9788
- --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
9789
- }
9790
- }
9791
- @media (min-width: 75rem) {
9792
- .pf-v6-c-login {
9793
- --pf-v6-c-login__main--MarginBlockEnd: 0;
9794
- }
9795
- }
9796
- @media (min-width: 48rem) {
9797
- .pf-v6-c-login {
9798
- --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
9799
- --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
9800
- --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
9801
- }
9802
- }
9803
- @media (min-width: 48rem) {
9804
- .pf-v6-c-login {
9805
- --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
9806
- --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
9807
- }
9808
10130
  }
9809
10131
  @media (min-width: 36rem) {
9810
10132
  .pf-v6-c-login {
@@ -9812,6 +10134,10 @@ ul.pf-v6-c-list {
9812
10134
  --pf-v6-c-login__footer--PaddingInlineStart: 0;
9813
10135
  }
9814
10136
  }
10137
+ .pf-v6-c-login {
10138
+ --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
10139
+ --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
10140
+ }
9815
10141
  @media (min-width: 75rem) {
9816
10142
  .pf-v6-c-login {
9817
10143
  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
@@ -10007,12 +10333,26 @@ ul.pf-v6-c-list {
10007
10333
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
10008
10334
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
10009
10335
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
10336
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
10337
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
10338
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10339
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10340
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10341
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10342
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
10343
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
10344
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
10010
10345
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
10011
10346
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
10012
10347
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
10013
10348
  --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
10014
10349
  }
10015
10350
 
10351
+ .pf-v6-c-masthead .pf-v6-c-toolbar {
10352
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
10353
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
10354
+ --pf-v6-c-toolbar__content--MinWidth: 0;
10355
+ }
10016
10356
  .pf-v6-c-masthead {
10017
10357
  --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
10018
10358
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
@@ -10026,22 +10366,6 @@ ul.pf-v6-c-list {
10026
10366
  --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
10027
10367
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
10028
10368
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
10029
- display: grid;
10030
- grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
10031
- row-gap: var(--pf-v6-c-masthead--RowGap);
10032
- column-gap: var(--pf-v6-c-masthead--ColumnGap);
10033
- align-items: start;
10034
- min-width: 0;
10035
- padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
10036
- padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
10037
- padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
10038
- padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
10039
- background-color: var(--pf-v6-c-masthead--BackgroundColor);
10040
- }
10041
- .pf-v6-c-masthead .pf-v6-c-toolbar {
10042
- --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
10043
- --pf-v6-c-toolbar--PaddingBlockEnd: 0;
10044
- --pf-v6-c-toolbar__content--MinWidth: 0;
10045
10369
  }
10046
10370
  @media screen and (min-width: 48rem) {
10047
10371
  :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
@@ -10059,6 +10383,62 @@ ul.pf-v6-c-list {
10059
10383
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10060
10384
  }
10061
10385
  }
10386
+ .pf-v6-c-masthead {
10387
+ display: grid;
10388
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
10389
+ grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
10390
+ row-gap: var(--pf-v6-c-masthead--RowGap);
10391
+ column-gap: var(--pf-v6-c-masthead--ColumnGap);
10392
+ align-items: start;
10393
+ min-width: 0;
10394
+ padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
10395
+ padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
10396
+ padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
10397
+ padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
10398
+ background-color: var(--pf-v6-c-masthead--BackgroundColor);
10399
+ }
10400
+ .pf-v6-c-masthead.pf-m-docked {
10401
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
10402
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
10403
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
10404
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
10405
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
10406
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
10407
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
10408
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
10409
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
10410
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
10411
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
10412
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10413
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
10414
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
10415
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
10416
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
10417
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
10418
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
10419
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
10420
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
10421
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
10422
+ --pf-v6-c-masthead__main--GridColumn: auto;
10423
+ --pf-v6-c-masthead__content--GridColumn: auto;
10424
+ --pf-v6-c-masthead__logo--Width: auto;
10425
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
10426
+ display: flex;
10427
+ flex-direction: column;
10428
+ align-items: center;
10429
+ width: fit-content;
10430
+ height: 100%;
10431
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
10432
+ }
10433
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
10434
+ flex-grow: 1;
10435
+ flex-direction: column;
10436
+ align-self: revert;
10437
+ }
10438
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
10439
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
10440
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
10441
+ }
10062
10442
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
10063
10443
  flex-wrap: nowrap;
10064
10444
  min-width: 0;
@@ -10522,6 +10902,13 @@ ul.pf-v6-c-list {
10522
10902
  --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
10523
10903
  --pf-v6-c-menu--TransitionDuration: 0s;
10524
10904
  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
10905
+ }
10906
+ @media (prefers-reduced-motion: no-preference) {
10907
+ .pf-v6-c-menu {
10908
+ --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10909
+ }
10910
+ }
10911
+ .pf-v6-c-menu {
10525
10912
  --pf-v6-c-menu--m-plain--BoxShadow: none;
10526
10913
  --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
10527
10914
  --pf-v6-c-menu__content--Height: auto;
@@ -10601,33 +10988,34 @@ ul.pf-v6-c-list {
10601
10988
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
10602
10989
  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10603
10990
  --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
10604
- --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
10605
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
10606
- --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
10607
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
10608
- --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
10609
- --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
10610
- }
10611
- @media (prefers-reduced-motion: no-preference) {
10612
- .pf-v6-c-menu {
10613
- --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
10614
- }
10615
10991
  }
10616
10992
  @media (prefers-reduced-motion: no-preference) {
10617
10993
  .pf-v6-c-menu {
10618
10994
  --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
10619
10995
  }
10620
10996
  }
10997
+ .pf-v6-c-menu {
10998
+ --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
10999
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
11000
+ --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
11001
+ }
10621
11002
  @media (prefers-reduced-motion: no-preference) {
10622
11003
  .pf-v6-c-menu {
10623
11004
  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10624
11005
  }
10625
11006
  }
11007
+ .pf-v6-c-menu {
11008
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
11009
+ --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
11010
+ }
10626
11011
  @media (prefers-reduced-motion: no-preference) {
10627
11012
  .pf-v6-c-menu {
10628
11013
  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
10629
11014
  }
10630
11015
  }
11016
+ .pf-v6-c-menu {
11017
+ --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
11018
+ }
10631
11019
 
10632
11020
  .pf-v6-c-menu__content,
10633
11021
  .pf-v6-c-menu__list-item,
@@ -11085,13 +11473,14 @@ ul.pf-v6-c-list {
11085
11473
  --pf-v6-c-check__input--TranslateY: none;
11086
11474
  }
11087
11475
 
11088
- .pf-v6-c-menu__item-toggle-icon {
11089
- color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
11090
- }
11091
11476
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
11092
11477
  scale: -1 1;
11093
11478
  }
11094
11479
 
11480
+ .pf-v6-c-menu__item-toggle-icon {
11481
+ color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
11482
+ }
11483
+
11095
11484
  .pf-v6-c-menu__item-icon {
11096
11485
  color: var(--pf-v6-c-menu__item--icon--Color, inherit);
11097
11486
  }
@@ -11682,6 +12071,13 @@ ul.pf-v6-c-list {
11682
12071
  --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
11683
12072
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
11684
12073
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
12074
+ }
12075
+ @media (min-width: 75rem) {
12076
+ .pf-v6-c-modal-box {
12077
+ --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
12078
+ }
12079
+ }
12080
+ .pf-v6-c-modal-box {
11685
12081
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11686
12082
  --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11687
12083
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -11713,11 +12109,6 @@ ul.pf-v6-c-list {
11713
12109
  --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
11714
12110
  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
11715
12111
  }
11716
- @media (min-width: 75rem) {
11717
- .pf-v6-c-modal-box {
11718
- --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
11719
- }
11720
- }
11721
12112
 
11722
12113
  .pf-v6-c-modal-box {
11723
12114
  position: relative;
@@ -11779,8 +12170,8 @@ ul.pf-v6-c-list {
11779
12170
 
11780
12171
  .pf-v6-c-modal-box__header {
11781
12172
  display: flex;
11782
- flex-direction: column;
11783
12173
  flex-shrink: 0;
12174
+ flex-direction: column;
11784
12175
  gap: var(--pf-v6-c-modal-box__header--Gap);
11785
12176
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
11786
12177
  padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
@@ -11797,8 +12188,8 @@ ul.pf-v6-c-list {
11797
12188
 
11798
12189
  .pf-v6-c-modal-box__header-main {
11799
12190
  display: flex;
11800
- flex-direction: column;
11801
12191
  flex-grow: 1;
12192
+ flex-direction: column;
11802
12193
  gap: var(--pf-v6-c-modal-box__header-main--Gap);
11803
12194
  min-width: 0;
11804
12195
  padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);
@@ -12107,6 +12498,15 @@ ul.pf-v6-c-list {
12107
12498
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
12108
12499
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
12109
12500
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
12501
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
12502
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
12503
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
12504
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
12505
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
12506
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
12507
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
12508
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12509
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12110
12510
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
12111
12511
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
12112
12512
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -12131,6 +12531,7 @@ ul.pf-v6-c-list {
12131
12531
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
12132
12532
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
12133
12533
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
12534
+ --pf-v6-c-nav__link-text--FontSize: initial;
12134
12535
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
12135
12536
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
12136
12537
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -12142,6 +12543,15 @@ ul.pf-v6-c-list {
12142
12543
  --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
12143
12544
  --pf-v6-c-nav__subnav--TranslateY: 0;
12144
12545
  --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
12546
+ }
12547
+ @media screen and (prefers-reduced-motion: no-preference) {
12548
+ .pf-v6-c-nav {
12549
+ --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
12550
+ --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
12551
+ --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
12552
+ }
12553
+ }
12554
+ .pf-v6-c-nav {
12145
12555
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
12146
12556
  --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
12147
12557
  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -12171,13 +12581,11 @@ ul.pf-v6-c-list {
12171
12581
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
12172
12582
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
12173
12583
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12174
- }
12175
- @media screen and (prefers-reduced-motion: no-preference) {
12176
- .pf-v6-c-nav {
12177
- --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
12178
- --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
12179
- --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
12180
- }
12584
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12585
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12586
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12587
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
12588
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
12181
12589
  }
12182
12590
 
12183
12591
  .pf-v6-c-nav,
@@ -12212,6 +12620,25 @@ ul.pf-v6-c-list {
12212
12620
  .pf-v6-c-nav.pf-m-fill {
12213
12621
  flex-grow: 1;
12214
12622
  }
12623
+ .pf-v6-c-nav.pf-m-docked {
12624
+ --pf-v6-c-nav--PaddingBlockStart: 0;
12625
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
12626
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
12627
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
12628
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
12629
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
12630
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
12631
+ width: fit-content;
12632
+ }
12633
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
12634
+ position: relative;
12635
+ align-self: center;
12636
+ min-width: 1lh;
12637
+ text-align: center;
12638
+ }
12639
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
12640
+ display: none;
12641
+ }
12215
12642
  .pf-v6-c-nav .pf-v6-c-menu {
12216
12643
  --pf-v6-c-menu--MinWidth: 100%;
12217
12644
  }
@@ -12275,14 +12702,34 @@ ul.pf-v6-c-list {
12275
12702
  }
12276
12703
 
12277
12704
  .pf-v6-c-nav__item {
12705
+ position: relative;
12278
12706
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
12279
12707
  }
12708
+ .pf-v6-c-nav__item::before {
12709
+ position: absolute;
12710
+ inset-block-start: 0;
12711
+ inset-block-end: 0;
12712
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
12713
+ width: var(--pf-v6-c-nav__item--accent--size);
12714
+ pointer-events: none;
12715
+ content: var(--pf-v6-c-nav__item--accent--content, "");
12716
+ background-color: var(--pf-v6-c-nav__item--accent--color);
12717
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
12718
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
12719
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
12720
+ transition-property: scale;
12721
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
12722
+ }
12280
12723
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
12281
12724
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
12282
12725
  }
12283
12726
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
12284
12727
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
12285
12728
  }
12729
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
12730
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
12731
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
12732
+ }
12286
12733
 
12287
12734
  .pf-v6-c-nav__section {
12288
12735
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -12344,6 +12791,10 @@ ul.pf-v6-c-list {
12344
12791
  color: var(--pf-v6-c-nav__link-icon--Color);
12345
12792
  }
12346
12793
 
12794
+ .pf-v6-c-nav__link-text {
12795
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
12796
+ }
12797
+
12347
12798
  .pf-v6-c-nav__toggle {
12348
12799
  flex: none;
12349
12800
  align-self: start;
@@ -12399,6 +12850,7 @@ ul.pf-v6-c-list {
12399
12850
  }
12400
12851
 
12401
12852
  .pf-v6-c-nav:where(.pf-m-horizontal) {
12853
+ --pf-v6-c-nav__item--accent--content: none;
12402
12854
  padding: 0;
12403
12855
  overflow: hidden;
12404
12856
  }
@@ -12419,12 +12871,14 @@ ul.pf-v6-c-list {
12419
12871
  scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
12420
12872
  scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
12421
12873
  -webkit-overflow-scrolling: touch;
12422
- scrollbar-width: none;
12423
- -ms-overflow-style: -ms-autohiding-scrollbar;
12424
12874
  }
12425
12875
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
12426
12876
  display: none;
12427
12877
  }
12878
+ .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
12879
+ scrollbar-width: none;
12880
+ -ms-overflow-style: -ms-autohiding-scrollbar;
12881
+ }
12428
12882
  .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
12429
12883
  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
12430
12884
  }
@@ -12639,9 +13093,9 @@ ul.pf-v6-c-list {
12639
13093
  }
12640
13094
  .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
12641
13095
  display: -webkit-box;
13096
+ overflow: hidden;
12642
13097
  -webkit-box-orient: vertical;
12643
13098
  -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
12644
- overflow: hidden;
12645
13099
  }
12646
13100
 
12647
13101
  .pf-v6-c-notification-drawer__list-item-action {
@@ -12695,9 +13149,9 @@ ul.pf-v6-c-list {
12695
13149
 
12696
13150
  .pf-v6-c-notification-drawer__group-toggle-title {
12697
13151
  display: -webkit-box;
13152
+ overflow: hidden;
12698
13153
  -webkit-box-orient: vertical;
12699
13154
  -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
12700
- overflow: hidden;
12701
13155
  flex: 1;
12702
13156
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
12703
13157
  font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
@@ -12710,15 +13164,15 @@ ul.pf-v6-c-list {
12710
13164
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
12711
13165
  }
12712
13166
 
13167
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
13168
+ scale: -1 1;
13169
+ }
13170
+
12713
13171
  .pf-v6-c-notification-drawer__group-toggle-icon {
12714
13172
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
12715
13173
  color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
12716
13174
  transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
12717
13175
  }
12718
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
12719
- scale: -1 1;
12720
- }
12721
-
12722
13176
  .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
12723
13177
  transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
12724
13178
  }
@@ -12764,6 +13218,7 @@ ul.pf-v6-c-list {
12764
13218
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12765
13219
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
12766
13220
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13221
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
12767
13222
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
12768
13223
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
12769
13224
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -12786,6 +13241,15 @@ ul.pf-v6-c-list {
12786
13241
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
12787
13242
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12788
13243
  --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
13244
+ }
13245
+ @media screen and (prefers-reduced-motion: no-preference) {
13246
+ .pf-v6-c-page {
13247
+ --pf-v6-c-page__sidebar--Opacity: 1;
13248
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
13249
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
13250
+ }
13251
+ }
13252
+ .pf-v6-c-page {
12789
13253
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12790
13254
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
12791
13255
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -12801,6 +13265,15 @@ ul.pf-v6-c-list {
12801
13265
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
12802
13266
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12803
13267
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
13268
+ }
13269
+ @media screen and (min-width: 75rem) {
13270
+ .pf-v6-c-page {
13271
+ --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
13272
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
13273
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
13274
+ }
13275
+ }
13276
+ .pf-v6-c-page {
12804
13277
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
12805
13278
  --pf-v6-c-page__main-container--GridArea: main;
12806
13279
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
@@ -12823,6 +13296,17 @@ ul.pf-v6-c-list {
12823
13296
  --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
12824
13297
  --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
12825
13298
  --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
13299
+ }
13300
+ @media screen and (max-width: calc(48rem - 1px)) {
13301
+ .pf-v6-c-page {
13302
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
13303
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
13304
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
13305
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
13306
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
13307
+ }
13308
+ }
13309
+ .pf-v6-c-page {
12826
13310
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
12827
13311
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12828
13312
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12871,29 +13355,9 @@ ul.pf-v6-c-list {
12871
13355
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12872
13356
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12873
13357
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12874
- }
12875
- @media screen and (prefers-reduced-motion: no-preference) {
12876
- .pf-v6-c-page {
12877
- --pf-v6-c-page__sidebar--Opacity: 1;
12878
- --pf-v6-c-page__sidebar--TransitionProperty: transform;
12879
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
12880
- }
12881
- }
12882
- @media screen and (min-width: 75rem) {
12883
- .pf-v6-c-page {
12884
- --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
12885
- --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
12886
- --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
12887
- }
12888
- }
12889
- @media screen and (max-width: calc(48rem - 1px)) {
12890
- .pf-v6-c-page {
12891
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12892
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12893
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
12894
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
12895
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
12896
- }
13358
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13359
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13360
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12897
13361
  }
12898
13362
 
12899
13363
  .pf-v6-c-page {
@@ -12913,6 +13377,16 @@ ul.pf-v6-c-list {
12913
13377
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
12914
13378
  }
12915
13379
  }
13380
+ .pf-v6-c-page.pf-m-dock {
13381
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
13382
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
13383
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
13384
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
13385
+ grid-template-areas: "dock main";
13386
+ grid-template-rows: auto;
13387
+ grid-template-columns: auto 1fr;
13388
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
13389
+ }
12916
13390
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12917
13391
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12918
13392
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -12959,15 +13433,20 @@ ul.pf-v6-c-list {
12959
13433
  }
12960
13434
  }
12961
13435
 
12962
- .pf-v6-c-page > .pf-v6-c-masthead {
12963
- z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
12964
- grid-area: header;
12965
- }
12966
13436
  @media (min-width: 75rem) {
12967
13437
  .pf-v6-c-page > .pf-v6-c-masthead {
12968
13438
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
12969
13439
  }
12970
13440
  }
13441
+ .pf-v6-c-page > .pf-v6-c-masthead {
13442
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
13443
+ grid-area: header;
13444
+ }
13445
+
13446
+ .pf-v6-c-page__dock {
13447
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
13448
+ grid-area: dock;
13449
+ }
12971
13450
 
12972
13451
  .pf-v6-c-page__sidebar {
12973
13452
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -13079,8 +13558,8 @@ ul.pf-v6-c-list {
13079
13558
  .pf-v6-c-page__main-group,
13080
13559
  .pf-v6-c-page__main-subnav {
13081
13560
  display: flex;
13082
- flex-direction: column;
13083
13561
  flex-shrink: 0;
13562
+ flex-direction: column;
13084
13563
  }
13085
13564
  .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
13086
13565
  .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
@@ -13272,6 +13751,7 @@ ul.pf-v6-c-list {
13272
13751
  flex-direction: column;
13273
13752
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
13274
13753
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
13754
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
13275
13755
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13276
13756
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13277
13757
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -13323,8 +13803,8 @@ ul.pf-v6-c-list {
13323
13803
  .pf-v6-c-page__main-drawer,
13324
13804
  .pf-v6-c-page__main-group {
13325
13805
  display: flex;
13326
- flex-direction: column;
13327
13806
  flex-grow: 1;
13807
+ flex-direction: column;
13328
13808
  }
13329
13809
 
13330
13810
  .pf-v6-c-page__main {
@@ -15238,8 +15718,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15238
15718
  position: var(--pf-v6-c-sidebar__panel--Position);
15239
15719
  inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
15240
15720
  z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
15241
- flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
15242
15721
  flex-shrink: 0;
15722
+ flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
15243
15723
  order: var(--pf-v6-c-sidebar__panel--Order);
15244
15724
  padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
15245
15725
  padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);
@@ -15536,7 +16016,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15536
16016
  --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
15537
16017
  --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
15538
16018
  --pf-v6-c-skeleton--before--Height: auto;
15539
- --pf-v6-c-skeleton--before--Content: " ";
16019
+ --pf-v6-c-skeleton--before--Content: "\00a0";
15540
16020
  --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
15541
16021
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
15542
16022
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
@@ -15547,6 +16027,17 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15547
16027
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
15548
16028
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
15549
16029
  --pf-v6-c-skeleton--after--AnimationDelay: .5s;
16030
+ }
16031
+ @media screen and (prefers-reduced-motion: no-preference) {
16032
+ .pf-v6-c-skeleton {
16033
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
16034
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
16035
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
16036
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
16037
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
16038
+ }
16039
+ }
16040
+ .pf-v6-c-skeleton {
15550
16041
  --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
15551
16042
  --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
15552
16043
  --pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
@@ -15574,15 +16065,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15574
16065
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
15575
16066
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
15576
16067
  }
15577
- @media screen and (prefers-reduced-motion: no-preference) {
15578
- .pf-v6-c-skeleton {
15579
- --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
15580
- --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
15581
- --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
15582
- --pf-v6-c-skeleton--after--TranslateX: -100%;
15583
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
15584
- }
15585
- }
15586
16068
 
15587
16069
  .pf-v6-c-skeleton {
15588
16070
  position: relative;
@@ -15599,6 +16081,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15599
16081
  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
15600
16082
  content: var(--pf-v6-c-skeleton--before--Content);
15601
16083
  }
16084
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
16085
+ scale: -1 1;
16086
+ }
16087
+
15602
16088
  .pf-v6-c-skeleton::after {
15603
16089
  position: absolute;
15604
16090
  inset: 0;
@@ -15608,10 +16094,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15608
16094
  transform: translate3d(var(--pf-v6-c-skeleton--after--TranslateX), 0, 0);
15609
16095
  animation: var(--pf-v6-c-skeleton--after--AnimationName) var(--pf-v6-c-skeleton--after--AnimationDuration) var(--pf-v6-c-skeleton--after--AnimationTimingFunction) var(--pf-v6-c-skeleton--after--AnimationDelay) var(--pf-v6-c-skeleton--after--AnimationIterationCount);
15610
16096
  }
15611
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
15612
- scale: -1 1;
15613
- }
15614
-
15615
16097
  .pf-v6-c-skeleton.pf-m-circle {
15616
16098
  --pf-v6-c-skeleton--BorderRadius: var(--pf-v6-c-skeleton--m-circle--BorderRadius);
15617
16099
  }
@@ -15799,12 +16281,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15799
16281
 
15800
16282
  .pf-v6-c-slider {
15801
16283
  --pf-v6-c-slider__rail-track--before--fill--direction: right;
15802
- display: flex;
15803
16284
  }
15804
16285
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
15805
16286
  --pf-v6-c-slider__rail-track--before--fill--direction: left;
15806
16287
  }
15807
16288
 
16289
+ .pf-v6-c-slider {
16290
+ display: flex;
16291
+ }
15808
16292
  .pf-v6-c-slider.pf-m-disabled {
15809
16293
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
15810
16294
  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -15867,6 +16351,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15867
16351
 
15868
16352
  .pf-v6-c-slider__step-tick {
15869
16353
  transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
16354
+ }
16355
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
16356
+ transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
16357
+ }
16358
+
16359
+ .pf-v6-c-slider__step-tick {
15870
16360
  position: absolute;
15871
16361
  inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
15872
16362
  inset-inline-start: 0;
@@ -15876,22 +16366,28 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15876
16366
  border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
15877
16367
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
15878
16368
  }
15879
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
15880
- transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
15881
- }
15882
16369
 
15883
16370
  .pf-v6-c-slider__step-label {
15884
16371
  transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
15885
- position: absolute;
15886
- inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
15887
- word-break: normal;
15888
16372
  }
15889
16373
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
15890
16374
  transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
15891
16375
  }
15892
16376
 
16377
+ .pf-v6-c-slider__step-label {
16378
+ position: absolute;
16379
+ inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
16380
+ word-break: normal;
16381
+ }
16382
+
15893
16383
  .pf-v6-c-slider__thumb {
15894
16384
  transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
16385
+ }
16386
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
16387
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
16388
+ }
16389
+
16390
+ .pf-v6-c-slider__thumb {
15895
16391
  position: absolute;
15896
16392
  inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
15897
16393
  inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
@@ -15903,12 +16399,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15903
16399
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
15904
16400
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
15905
16401
  }
15906
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
15907
- transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
16402
+ .pf-v6-c-slider__thumb::before {
16403
+ transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
16404
+ }
16405
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
16406
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
15908
16407
  }
15909
16408
 
15910
16409
  .pf-v6-c-slider__thumb::before {
15911
- transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
15912
16410
  position: absolute;
15913
16411
  inset-block-start: 50%;
15914
16412
  inset-inline-start: 50%;
@@ -15917,10 +16415,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15917
16415
  content: "";
15918
16416
  border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
15919
16417
  }
15920
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
15921
- transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
15922
- }
15923
-
15924
16418
  .pf-v6-c-slider__thumb:hover {
15925
16419
  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
15926
16420
  }
@@ -15937,16 +16431,18 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15937
16431
  }
15938
16432
  .pf-v6-c-slider__value.pf-m-floating {
15939
16433
  transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
16434
+ }
16435
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
16436
+ transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
16437
+ }
16438
+
16439
+ .pf-v6-c-slider__value.pf-m-floating {
15940
16440
  --pf-v6-c-slider__value--MarginInlineStart: 0;
15941
16441
  position: absolute;
15942
16442
  inset-block-start: 0;
15943
16443
  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
15944
16444
  z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
15945
16445
  }
15946
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
15947
- transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
15948
- }
15949
-
15950
16446
  .pf-v6-c-slider__value .pf-v6-c-form-control {
15951
16447
  width: var(--pf-v6-c-slider__value--c-form-control--Width);
15952
16448
  }
@@ -16124,12 +16620,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16124
16620
  }
16125
16621
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
16126
16622
  transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
16127
- background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
16128
16623
  }
16129
16624
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
16130
16625
  transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
16131
16626
  }
16132
16627
 
16628
+ .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
16629
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
16630
+ }
16133
16631
  .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
16134
16632
  color: var(--pf-v6-c-switch__input--not-checked__label--Color);
16135
16633
  }
@@ -17951,6 +18449,15 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17951
18449
  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
17952
18450
  --pf-v6-c-table__expandable-row--TranslateY: 0;
17953
18451
  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
18452
+ }
18453
+ @media screen and (prefers-reduced-motion: no-preference) {
18454
+ .pf-v6-c-table {
18455
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
18456
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
18457
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
18458
+ }
18459
+ }
18460
+ .pf-v6-c-table {
17954
18461
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
17955
18462
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
17956
18463
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -18019,13 +18526,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18019
18526
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
18020
18527
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
18021
18528
  }
18022
- @media screen and (prefers-reduced-motion: no-preference) {
18023
- .pf-v6-c-table {
18024
- --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
18025
- --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
18026
- --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
18027
- }
18028
- }
18029
18529
 
18030
18530
  .pf-v6-c-table {
18031
18531
  width: 100%;
@@ -18090,22 +18590,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18090
18590
  --pf-v6-hidden-visible--hidden--Display: none;
18091
18591
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
18092
18592
  display: var(--pf-v6-hidden-visible--Display);
18093
- position: relative;
18094
- width: var(--pf-v6-c-table--cell--Width);
18095
- min-width: var(--pf-v6-c-table--cell--MinWidth);
18096
- max-width: var(--pf-v6-c-table--cell--MaxWidth);
18097
- padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
18098
- padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
18099
- padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
18100
- padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
18101
- overflow: var(--pf-v6-c-table--cell--Overflow);
18102
- font-size: var(--pf-v6-c-table--cell--FontSize);
18103
- font-weight: var(--pf-v6-c-table--cell--FontWeight);
18104
- line-height: var(--pf-v6-c-table--cell--LineHeight);
18105
- color: var(--pf-v6-c-table--cell--Color);
18106
- text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
18107
- word-break: var(--pf-v6-c-table--cell--WordBreak);
18108
- white-space: var(--pf-v6-c-table--cell--WhiteSpace);
18109
18593
  }
18110
18594
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
18111
18595
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -18150,6 +18634,24 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18150
18634
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
18151
18635
  }
18152
18636
  }
18637
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
18638
+ position: relative;
18639
+ width: var(--pf-v6-c-table--cell--Width);
18640
+ min-width: var(--pf-v6-c-table--cell--MinWidth);
18641
+ max-width: var(--pf-v6-c-table--cell--MaxWidth);
18642
+ padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
18643
+ padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
18644
+ padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
18645
+ padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
18646
+ overflow: var(--pf-v6-c-table--cell--Overflow);
18647
+ font-size: var(--pf-v6-c-table--cell--FontSize);
18648
+ font-weight: var(--pf-v6-c-table--cell--FontWeight);
18649
+ line-height: var(--pf-v6-c-table--cell--LineHeight);
18650
+ color: var(--pf-v6-c-table--cell--Color);
18651
+ text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
18652
+ word-break: var(--pf-v6-c-table--cell--WordBreak);
18653
+ white-space: var(--pf-v6-c-table--cell--WhiteSpace);
18654
+ }
18153
18655
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
18154
18656
  padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
18155
18657
  }
@@ -18506,16 +19008,16 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18506
19008
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
18507
19009
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
18508
19010
  }
19011
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
19012
+ scale: -1 1;
19013
+ }
19014
+
18509
19015
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
18510
19016
  transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
18511
19017
  transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
18512
19018
  transition-property: transform;
18513
19019
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
18514
19020
  }
18515
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
18516
- scale: -1 1;
18517
- }
18518
-
18519
19021
  .pf-v6-c-table__toggle svg {
18520
19022
  pointer-events: none;
18521
19023
  }
@@ -18992,13 +19494,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18992
19494
  }
18993
19495
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
18994
19496
  transform: translateX(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX));
18995
- position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
18996
- inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
18997
19497
  }
18998
19498
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
18999
19499
  transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
19000
19500
  }
19001
19501
 
19502
+ .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
19503
+ position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
19504
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
19505
+ }
19002
19506
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
19003
19507
  min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
19004
19508
  }
@@ -20048,8 +20552,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20048
20552
  }
20049
20553
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list {
20050
20554
  position: relative;
20051
- flex-direction: column;
20052
20555
  flex-grow: 1;
20556
+ flex-direction: column;
20053
20557
  max-width: var(--pf-v6-c-tabs--m-vertical--MaxWidth);
20054
20558
  }
20055
20559
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list::before {
@@ -20194,7 +20698,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20194
20698
  .pf-v6-c-tabs.pf-m-nav {
20195
20699
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20196
20700
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-v6-c-tabs--m-nav__link--disabled--Color);
20197
- --pf-v6-c-tabs__link--hover--BorderColor: transparent;
20198
20701
  --pf-v6-c-tabs__link--BorderRadius: var(--pf-v6-c-tabs--m-nav__link--BorderRadius);
20199
20702
  }
20200
20703
  .pf-v6-c-tabs.pf-m-nav::before,
@@ -20215,15 +20718,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20215
20718
  white-space: normal;
20216
20719
  }
20217
20720
 
20721
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
20722
+ scale: -1 1;
20723
+ }
20724
+
20218
20725
  .pf-v6-c-tabs__toggle-icon {
20219
20726
  display: inline-block;
20220
20727
  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
20221
20728
  transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
20222
20729
  }
20223
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
20224
- scale: -1 1;
20225
- }
20226
20730
 
20731
+ .pf-v6-c-tabs__list::-webkit-scrollbar {
20732
+ display: none;
20733
+ }
20227
20734
  .pf-v6-c-tabs__list {
20228
20735
  scrollbar-width: none;
20229
20736
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -20235,20 +20742,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20235
20742
  scroll-snap-type: var(--pf-v6-c-tabs__list--ScrollSnapType);
20236
20743
  -webkit-overflow-scrolling: touch;
20237
20744
  }
20238
- .pf-v6-c-tabs__list::-webkit-scrollbar {
20239
- display: none;
20240
- }
20241
20745
 
20242
20746
  .pf-v6-c-tabs__item {
20243
20747
  position: relative;
20244
20748
  display: flex;
20245
20749
  flex: none;
20246
20750
  column-gap: var(--pf-v6-c-tabs__item--ColumnGap);
20247
- scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
20248
20751
  padding-block-start: var(--pf-v6-c-tabs__item--PaddingBlockStart);
20249
20752
  padding-block-end: var(--pf-v6-c-tabs__item--PaddingBlockEnd);
20250
20753
  padding-inline-start: var(--pf-v6-c-tabs__item--PaddingInlineStart);
20251
20754
  padding-inline-end: var(--pf-v6-c-tabs__item--PaddingInlineEnd);
20755
+ scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
20252
20756
  background-color: var(--pf-v6-c-tabs__item--BackgroundColor);
20253
20757
  }
20254
20758
  .pf-v6-c-tabs__item.pf-m-current {
@@ -20301,6 +20805,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20301
20805
  border: 0;
20302
20806
  }
20303
20807
 
20808
+ .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
20809
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
20810
+ }
20811
+
20304
20812
  .pf-v6-c-tabs__link {
20305
20813
  display: flex;
20306
20814
  flex: 1;
@@ -20318,10 +20826,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20318
20826
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
20319
20827
  transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
20320
20828
  }
20321
- .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
20322
- --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
20323
- }
20324
-
20325
20829
  .pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
20326
20830
  pointer-events: none;
20327
20831
  border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
@@ -20376,6 +20880,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20376
20880
  --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
20377
20881
  }
20378
20882
 
20883
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
20884
+ scale: -1 1;
20885
+ }
20886
+
20379
20887
  .pf-v6-c-tabs__link-toggle-icon {
20380
20888
  align-self: end;
20381
20889
  font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
@@ -20383,9 +20891,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20383
20891
  transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
20384
20892
  transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
20385
20893
  }
20386
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
20387
- scale: -1 1;
20388
- }
20389
20894
 
20390
20895
  .pf-v6-c-tabs__item-action {
20391
20896
  display: flex;
@@ -21306,6 +21811,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21306
21811
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21307
21812
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21308
21813
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
21814
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
21309
21815
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
21310
21816
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
21311
21817
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -21402,9 +21908,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21402
21908
  --pf-v6-hidden-visible--hidden--Display: none;
21403
21909
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
21404
21910
  display: var(--pf-v6-hidden-visible--Display);
21405
- row-gap: var(--pf-v6-c-toolbar__content--RowGap);
21406
- padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
21407
- padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
21408
21911
  }
21409
21912
  .pf-v6-c-toolbar__content.pf-m-hidden {
21410
21913
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -21449,6 +21952,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21449
21952
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
21450
21953
  }
21451
21954
  }
21955
+ .pf-v6-c-toolbar__content {
21956
+ row-gap: var(--pf-v6-c-toolbar__content--RowGap);
21957
+ padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
21958
+ padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
21959
+ }
21452
21960
 
21453
21961
  .pf-v6-c-toolbar__content-section {
21454
21962
  flex-wrap: wrap;
@@ -21509,14 +22017,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21509
22017
  .pf-v6-c-toolbar.pf-m-no-background {
21510
22018
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
21511
22019
  }
22020
+ .pf-v6-c-toolbar.pf-m-vertical {
22021
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
22022
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
22023
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
22024
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
22025
+ }
22026
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
22027
+ flex-direction: column;
22028
+ align-items: center;
22029
+ }
21512
22030
 
21513
22031
  .pf-v6-c-toolbar__item {
21514
22032
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
21515
- --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
21516
- row-gap: var(--pf-v6-c-toolbar__item--RowGap);
21517
- column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
21518
- width: var(--pf-v6-c-toolbar__item--Width--base);
21519
- min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
21520
22033
  }
21521
22034
  @media (min-width: 36rem) {
21522
22035
  .pf-v6-c-toolbar__item {
@@ -21543,6 +22056,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21543
22056
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
21544
22057
  }
21545
22058
  }
22059
+ .pf-v6-c-toolbar__item {
22060
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
22061
+ }
21546
22062
  @media (min-width: 36rem) {
21547
22063
  .pf-v6-c-toolbar__item {
21548
22064
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
@@ -21568,6 +22084,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21568
22084
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
21569
22085
  }
21570
22086
  }
22087
+ .pf-v6-c-toolbar__item {
22088
+ row-gap: var(--pf-v6-c-toolbar__item--RowGap);
22089
+ column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
22090
+ width: var(--pf-v6-c-toolbar__item--Width--base);
22091
+ min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
22092
+ }
21571
22093
  .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
21572
22094
  --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
21573
22095
  }
@@ -21588,6 +22110,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21588
22110
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
21589
22111
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21590
22112
  }
22113
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
22114
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
22115
+ }
21591
22116
  .pf-v6-c-toolbar__group.pf-m-filter-group {
21592
22117
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
21593
22118
  }
@@ -21599,9 +22124,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21599
22124
  .pf-v6-c-toolbar__group.pf-m-action-group {
21600
22125
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21601
22126
  }
22127
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
22128
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
22129
+ }
21602
22130
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21603
22131
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21604
22132
  }
22133
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
22134
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
22135
+ }
21605
22136
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
21606
22137
  flex-wrap: wrap;
21607
22138
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -21678,7 +22209,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21678
22209
  }
21679
22210
  .pf-v6-c-toolbar__group.pf-m-align-end,
21680
22211
  .pf-v6-c-toolbar__item.pf-m-align-end {
21681
- margin-inline-start: auto;
22212
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22213
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21682
22214
  }
21683
22215
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
21684
22216
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -21933,7 +22465,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21933
22465
  }
21934
22466
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
21935
22467
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
21936
- margin-inline-start: auto;
22468
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22469
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21937
22470
  }
21938
22471
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
21939
22472
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -22185,7 +22718,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22185
22718
  }
22186
22719
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
22187
22720
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
22188
- margin-inline-start: auto;
22721
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22722
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22189
22723
  }
22190
22724
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
22191
22725
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -22437,7 +22971,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22437
22971
  }
22438
22972
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
22439
22973
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
22440
- margin-inline-start: auto;
22974
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22975
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22441
22976
  }
22442
22977
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
22443
22978
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -22689,7 +23224,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22689
23224
  }
22690
23225
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
22691
23226
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
22692
- margin-inline-start: auto;
23227
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23228
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22693
23229
  }
22694
23230
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
22695
23231
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -22941,7 +23477,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22941
23477
  }
22942
23478
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
22943
23479
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
22944
- margin-inline-start: auto;
23480
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23481
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22945
23482
  }
22946
23483
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
22947
23484
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
@@ -23426,6 +23963,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23426
23963
  --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
23427
23964
  --pf-v6-c-tree-view__list--TranslateY: 0;
23428
23965
  --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
23966
+ }
23967
+ @media screen and (prefers-reduced-motion: no-preference) {
23968
+ .pf-v6-c-tree-view {
23969
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
23970
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
23971
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
23972
+ }
23973
+ }
23974
+ .pf-v6-c-tree-view {
23429
23975
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
23430
23976
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
23431
23977
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -23454,6 +24000,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23454
24000
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
23455
24001
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
23456
24002
  --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
24003
+ --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
24004
+ --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
24005
+ --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
23457
24006
  --pf-v6-c-tree-view__node-text--max-lines: 1;
23458
24007
  --pf-v6-c-tree-view__node-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
23459
24008
  --pf-v6-c-tree-view__action--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -23509,6 +24058,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23509
24058
  --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart: var(--pf-t--global--spacer--lg);
23510
24059
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
23511
24060
  --pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd: 0;
24061
+ --pf-v6-c-tree-view--m-compact__node-container--nested--Color: initial;
24062
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: var(--pf-t--global--text--color--on-disabled);
24063
+ --pf-v6-c-tree-view--m-compact__node-icon--nested--Color: initial;
24064
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
24065
+ --pf-v6-c-tree-view--m-compact__node-toggle--nested--Color: initial;
24066
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
23512
24067
  --pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
23513
24068
  --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--sm);
23514
24069
  --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
@@ -23518,13 +24073,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23518
24073
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
23519
24074
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
23520
24075
  }
23521
- @media screen and (prefers-reduced-motion: no-preference) {
23522
- .pf-v6-c-tree-view {
23523
- --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
23524
- --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
23525
- --pf-v6-c-tree-view__list--TranslateY: -.5rem;
23526
- }
23527
- }
23528
24076
 
23529
24077
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
23530
24078
  position: relative;
@@ -23605,11 +24153,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23605
24153
  padding-block-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd);
23606
24154
  padding-inline-start: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart);
23607
24155
  padding-inline-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd);
24156
+ color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--Color, inherit);
23608
24157
  background-color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor);
23609
24158
  }
23610
24159
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-toggle {
23611
24160
  margin-inline-start: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart);
23612
24161
  margin-inline-end: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd);
24162
+ color: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--Color, inherit);
24163
+ }
24164
+ .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-icon {
24165
+ color: var(--pf-v6-c-tree-view--m-compact__node-icon--nested--Color, inherit);
23613
24166
  }
23614
24167
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__node-container {
23615
24168
  padding-block-start: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart);
@@ -23634,6 +24187,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23634
24187
  }
23635
24188
  .pf-v6-c-tree-view.pf-m-no-background {
23636
24189
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor);
24190
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: initial;
24191
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: initial;
24192
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: initial;
24193
+ }
24194
+
24195
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
24196
+ scale: -1 1;
23637
24197
  }
23638
24198
 
23639
24199
  .pf-v6-c-tree-view__node-toggle-icon {
@@ -23643,9 +24203,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23643
24203
  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
23644
24204
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
23645
24205
  }
23646
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
23647
- scale: -1 1;
23648
- }
23649
24206
 
23650
24207
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
23651
24208
  max-height: 0;
@@ -23709,6 +24266,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23709
24266
  .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
23710
24267
  margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
23711
24268
  }
24269
+ .pf-v6-c-tree-view__node.pf-m-disabled {
24270
+ --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-disabled--Color);
24271
+ --pf-v6-c-tree-view__node-icon--Color: var(--pf-v6-c-tree-view__node-icon--m-disabled--Color);
24272
+ --pf-v6-c-tree-view--m-compact__node-container--nested--Color: var(--pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color);
24273
+ --pf-v6-c-tree-view--m-compact__node-icon--nested--Color: var(--pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color);
24274
+ }
23712
24275
 
23713
24276
  .pf-v6-c-tree-view__node-container {
23714
24277
  display: var(--pf-v6-c-tree-view__node-container--Display);
@@ -23751,6 +24314,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23751
24314
  transform: translateX(calc(var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
23752
24315
  }
23753
24316
 
24317
+ .pf-v6-c-tree-view__node-toggle.pf-m-disabled {
24318
+ --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--m-disabled--Color);
24319
+ }
24320
+
23754
24321
  .pf-v6-c-tree-view__node-title.pf-m-truncate,
23755
24322
  .pf-v6-c-tree-view__node-text.pf-m-truncate {
23756
24323
  --pf-v6-c-tree-view__node-content--Overflow: hidden;
@@ -23766,6 +24333,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23766
24333
  white-space: nowrap;
23767
24334
  }
23768
24335
 
24336
+ label.pf-v6-c-tree-view__node-text {
24337
+ cursor: pointer;
24338
+ }
24339
+
23769
24340
  .pf-v6-c-tree-view__node-text {
23770
24341
  font-weight: inherit;
23771
24342
  color: inherit;
@@ -23773,9 +24344,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23773
24344
  background-color: transparent;
23774
24345
  border: 0;
23775
24346
  }
23776
- label.pf-v6-c-tree-view__node-text {
23777
- cursor: pointer;
23778
- }
23779
24347
 
23780
24348
  .pf-v6-c-tree-view__node-title {
23781
24349
  font-weight: var(--pf-v6-c-tree-view__node-title--FontWeight);
@@ -24004,6 +24572,15 @@ label.pf-v6-c-tree-view__node-text {
24004
24572
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
24005
24573
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
24006
24574
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
24575
+ }
24576
+ @media screen and (min-width: 62rem) {
24577
+ .pf-v6-c-wizard {
24578
+ --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
24579
+ --pf-v6-c-wizard__nav--BoxShadow: none;
24580
+ --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
24581
+ }
24582
+ }
24583
+ .pf-v6-c-wizard {
24007
24584
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24008
24585
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
24009
24586
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -24028,13 +24605,6 @@ label.pf-v6-c-tree-view__node-text {
24028
24605
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
24029
24606
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
24030
24607
  }
24031
- @media screen and (min-width: 62rem) {
24032
- .pf-v6-c-wizard {
24033
- --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
24034
- --pf-v6-c-wizard__nav--BoxShadow: none;
24035
- --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
24036
- }
24037
- }
24038
24608
 
24039
24609
  .pf-v6-c-wizard {
24040
24610
  position: relative;
@@ -24170,13 +24740,14 @@ label.pf-v6-c-tree-view__node-text {
24170
24740
  color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
24171
24741
  }
24172
24742
 
24173
- .pf-v6-c-wizard__toggle-separator {
24174
- color: var(--pf-v6-c-wizard__toggle-separator--Color);
24175
- }
24176
24743
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
24177
24744
  scale: -1 1;
24178
24745
  }
24179
24746
 
24747
+ .pf-v6-c-wizard__toggle-separator {
24748
+ color: var(--pf-v6-c-wizard__toggle-separator--Color);
24749
+ }
24750
+
24180
24751
  .pf-v6-c-wizard__toggle-icon {
24181
24752
  line-height: var(--pf-v6-c-wizard__toggle-icon--LineHeight);
24182
24753
  }
@@ -24184,8 +24755,8 @@ label.pf-v6-c-tree-view__node-text {
24184
24755
  .pf-v6-c-wizard__outer-wrap {
24185
24756
  position: relative;
24186
24757
  display: flex;
24187
- flex-direction: column;
24188
24758
  flex-grow: 1;
24759
+ flex-direction: column;
24189
24760
  min-height: var(--pf-v6-c-wizard__outer-wrap--MinHeight);
24190
24761
  background-color: var(--pf-v6-c-wizard__outer-wrap--BackgroundColor);
24191
24762
  }
@@ -24198,8 +24769,8 @@ label.pf-v6-c-tree-view__node-text {
24198
24769
  .pf-v6-c-wizard__inner-wrap {
24199
24770
  position: relative;
24200
24771
  display: flex;
24201
- flex-direction: column;
24202
24772
  flex-grow: 1;
24773
+ flex-direction: column;
24203
24774
  min-height: 0;
24204
24775
  }
24205
24776
  @media screen and (min-width: 62rem) {
@@ -24377,6 +24948,10 @@ label.pf-v6-c-tree-view__node-text {
24377
24948
  color: var(--pf-v6-c-wizard__nav-link-toggle--Color);
24378
24949
  }
24379
24950
 
24951
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
24952
+ scale: -1 1;
24953
+ }
24954
+
24380
24955
  .pf-v6-c-wizard__nav-link-toggle-icon {
24381
24956
  display: inline-block;
24382
24957
  transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
@@ -24384,15 +24959,12 @@ label.pf-v6-c-tree-view__node-text {
24384
24959
  transition-property: transform;
24385
24960
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
24386
24961
  }
24387
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
24388
- scale: -1 1;
24389
- }
24390
24962
 
24391
24963
  .pf-v6-c-wizard__main {
24392
24964
  z-index: var(--pf-v6-c-wizard__main--ZIndex);
24393
24965
  display: flex;
24394
- flex-direction: column;
24395
24966
  flex-grow: 1;
24967
+ flex-direction: column;
24396
24968
  overflow-x: hidden;
24397
24969
  overflow-y: auto;
24398
24970
  word-break: break-word;