@patternfly/react-core 6.0.0-alpha.103 → 6.0.0-alpha.105

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 (146) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/components/package.json +1 -1
  3. package/deprecated/package.json +1 -1
  4. package/dist/dynamic/components/AboutModal/package.json +1 -1
  5. package/dist/dynamic/components/Accordion/package.json +1 -1
  6. package/dist/dynamic/components/ActionList/package.json +1 -1
  7. package/dist/dynamic/components/Alert/package.json +1 -1
  8. package/dist/dynamic/components/Avatar/package.json +1 -1
  9. package/dist/dynamic/components/BackToTop/package.json +1 -1
  10. package/dist/dynamic/components/Backdrop/package.json +1 -1
  11. package/dist/dynamic/components/BackgroundImage/package.json +1 -1
  12. package/dist/dynamic/components/Badge/package.json +1 -1
  13. package/dist/dynamic/components/Banner/package.json +1 -1
  14. package/dist/dynamic/components/Brand/package.json +1 -1
  15. package/dist/dynamic/components/Breadcrumb/package.json +1 -1
  16. package/dist/dynamic/components/Button/package.json +1 -1
  17. package/dist/dynamic/components/CalendarMonth/package.json +1 -1
  18. package/dist/dynamic/components/Card/package.json +1 -1
  19. package/dist/dynamic/components/Checkbox/package.json +1 -1
  20. package/dist/dynamic/components/ClipboardCopy/package.json +1 -1
  21. package/dist/dynamic/components/CodeBlock/package.json +1 -1
  22. package/dist/dynamic/components/Content/package.json +1 -1
  23. package/dist/dynamic/components/DataList/package.json +1 -1
  24. package/dist/dynamic/components/DatePicker/package.json +1 -1
  25. package/dist/dynamic/components/DescriptionList/package.json +1 -1
  26. package/dist/dynamic/components/Divider/package.json +1 -1
  27. package/dist/dynamic/components/Drawer/package.json +1 -1
  28. package/dist/dynamic/components/Dropdown/package.json +1 -1
  29. package/dist/dynamic/components/DualListSelector/package.json +1 -1
  30. package/dist/dynamic/components/EmptyState/package.json +1 -1
  31. package/dist/dynamic/components/ExpandableSection/package.json +1 -1
  32. package/dist/dynamic/components/FileUpload/package.json +1 -1
  33. package/dist/dynamic/components/Form/package.json +1 -1
  34. package/dist/dynamic/components/FormSelect/package.json +1 -1
  35. package/dist/dynamic/components/HelperText/package.json +1 -1
  36. package/dist/dynamic/components/Hint/package.json +1 -1
  37. package/dist/dynamic/components/Icon/package.json +1 -1
  38. package/dist/dynamic/components/InputGroup/package.json +1 -1
  39. package/dist/dynamic/components/JumpLinks/package.json +1 -1
  40. package/dist/dynamic/components/Label/package.json +1 -1
  41. package/dist/dynamic/components/List/package.json +1 -1
  42. package/dist/dynamic/components/LoginPage/package.json +1 -1
  43. package/dist/dynamic/components/Masthead/package.json +1 -1
  44. package/dist/dynamic/components/Menu/package.json +1 -1
  45. package/dist/dynamic/components/MenuToggle/package.json +1 -1
  46. package/dist/dynamic/components/Modal/package.json +1 -1
  47. package/dist/dynamic/components/MultipleFileUpload/package.json +1 -1
  48. package/dist/dynamic/components/Nav/package.json +1 -1
  49. package/dist/dynamic/components/NotificationBadge/package.json +1 -1
  50. package/dist/dynamic/components/NotificationDrawer/package.json +1 -1
  51. package/dist/dynamic/components/NumberInput/package.json +1 -1
  52. package/dist/dynamic/components/OverflowMenu/package.json +1 -1
  53. package/dist/dynamic/components/Page/package.json +1 -1
  54. package/dist/dynamic/components/Pagination/package.json +1 -1
  55. package/dist/dynamic/components/Panel/package.json +1 -1
  56. package/dist/dynamic/components/Popover/package.json +1 -1
  57. package/dist/dynamic/components/Progress/package.json +1 -1
  58. package/dist/dynamic/components/ProgressStepper/package.json +1 -1
  59. package/dist/dynamic/components/Radio/package.json +1 -1
  60. package/dist/dynamic/components/SearchInput/package.json +1 -1
  61. package/dist/dynamic/components/Select/package.json +1 -1
  62. package/dist/dynamic/components/Sidebar/package.json +1 -1
  63. package/dist/dynamic/components/SimpleList/package.json +1 -1
  64. package/dist/dynamic/components/Skeleton/package.json +1 -1
  65. package/dist/dynamic/components/SkipToContent/package.json +1 -1
  66. package/dist/dynamic/components/Slider/package.json +1 -1
  67. package/dist/dynamic/components/Spinner/package.json +1 -1
  68. package/dist/dynamic/components/Switch/package.json +1 -1
  69. package/dist/dynamic/components/Tabs/package.json +1 -1
  70. package/dist/dynamic/components/TextArea/package.json +1 -1
  71. package/dist/dynamic/components/TextInput/package.json +1 -1
  72. package/dist/dynamic/components/TextInputGroup/package.json +1 -1
  73. package/dist/dynamic/components/Tile/package.json +1 -1
  74. package/dist/dynamic/components/TimePicker/package.json +1 -1
  75. package/dist/dynamic/components/Timestamp/package.json +1 -1
  76. package/dist/dynamic/components/Title/package.json +1 -1
  77. package/dist/dynamic/components/ToggleGroup/package.json +1 -1
  78. package/dist/dynamic/components/Toolbar/package.json +1 -1
  79. package/dist/dynamic/components/Tooltip/package.json +1 -1
  80. package/dist/dynamic/components/TreeView/package.json +1 -1
  81. package/dist/dynamic/components/Truncate/package.json +1 -1
  82. package/dist/dynamic/components/Wizard/hooks/package.json +1 -1
  83. package/dist/dynamic/components/Wizard/package.json +1 -1
  84. package/dist/dynamic/deprecated/components/Chip/package.json +1 -1
  85. package/dist/dynamic/deprecated/components/DragDrop/package.json +1 -1
  86. package/dist/dynamic/deprecated/components/DualListSelector/package.json +1 -1
  87. package/dist/dynamic/deprecated/components/Modal/package.json +1 -1
  88. package/dist/dynamic/deprecated/components/Wizard/package.json +1 -1
  89. package/dist/dynamic/deprecated/components/package.json +1 -1
  90. package/dist/dynamic/helpers/FocusTrap/FocusTrap/package.json +1 -1
  91. package/dist/dynamic/helpers/GenerateId/GenerateId/package.json +1 -1
  92. package/dist/dynamic/helpers/KeyboardHandler/package.json +1 -1
  93. package/dist/dynamic/helpers/OUIA/ouia/package.json +1 -1
  94. package/dist/dynamic/helpers/Popper/Popper/package.json +1 -1
  95. package/dist/dynamic/helpers/constants/package.json +1 -1
  96. package/dist/dynamic/helpers/datetimeUtils/package.json +1 -1
  97. package/dist/dynamic/helpers/fileUtils/package.json +1 -1
  98. package/dist/dynamic/helpers/htmlConstants/package.json +1 -1
  99. package/dist/dynamic/helpers/package.json +1 -1
  100. package/dist/dynamic/helpers/resizeObserver/package.json +1 -1
  101. package/dist/dynamic/helpers/typeUtils/package.json +1 -1
  102. package/dist/dynamic/helpers/useInterval/package.json +1 -1
  103. package/dist/dynamic/helpers/useIsomorphicLayout/package.json +1 -1
  104. package/dist/dynamic/helpers/useUnmountEffect/package.json +1 -1
  105. package/dist/dynamic/helpers/util/package.json +1 -1
  106. package/dist/dynamic/layouts/Bullseye/package.json +1 -1
  107. package/dist/dynamic/layouts/Flex/package.json +1 -1
  108. package/dist/dynamic/layouts/Gallery/package.json +1 -1
  109. package/dist/dynamic/layouts/Grid/package.json +1 -1
  110. package/dist/dynamic/layouts/Level/package.json +1 -1
  111. package/dist/dynamic/layouts/Split/package.json +1 -1
  112. package/dist/dynamic/layouts/Stack/package.json +1 -1
  113. package/dist/dynamic/styles/package.json +1 -1
  114. package/dist/esm/components/LoginPage/LoginMainHeader.js +1 -1
  115. package/dist/esm/components/LoginPage/LoginMainHeader.js.map +1 -1
  116. package/dist/esm/components/Page/Page.d.ts +3 -0
  117. package/dist/esm/components/Page/Page.d.ts.map +1 -1
  118. package/dist/esm/components/Page/Page.js +4 -2
  119. package/dist/esm/components/Page/Page.js.map +1 -1
  120. package/dist/esm/demos/DashboardWrapper.d.ts.map +1 -1
  121. package/dist/esm/demos/DashboardWrapper.js +2 -2
  122. package/dist/esm/demos/DashboardWrapper.js.map +1 -1
  123. package/dist/js/components/LoginPage/LoginMainHeader.js +1 -1
  124. package/dist/js/components/LoginPage/LoginMainHeader.js.map +1 -1
  125. package/dist/js/components/Page/Page.d.ts +3 -0
  126. package/dist/js/components/Page/Page.d.ts.map +1 -1
  127. package/dist/js/components/Page/Page.js +4 -2
  128. package/dist/js/components/Page/Page.js.map +1 -1
  129. package/dist/js/demos/DashboardWrapper.d.ts.map +1 -1
  130. package/dist/js/demos/DashboardWrapper.js +2 -2
  131. package/dist/js/demos/DashboardWrapper.js.map +1 -1
  132. package/dist/umd/assets/{output-nEfEGQzx.css → output-8BWRukUC.css} +2139 -2140
  133. package/dist/umd/react-core.min.js +1 -1
  134. package/helpers/package.json +1 -1
  135. package/layouts/package.json +1 -1
  136. package/next/package.json +1 -1
  137. package/package.json +2 -2
  138. package/src/components/DualListSelector/examples/DualListSelector.md +0 -1
  139. package/src/components/LoginPage/LoginMainHeader.tsx +2 -2
  140. package/src/components/LoginPage/__tests__/__snapshots__/LoginMainHeader.test.tsx.snap +4 -4
  141. package/src/components/LoginPage/__tests__/__snapshots__/LoginPage.test.tsx.snap +2 -2
  142. package/src/components/Modal/examples/Modal.md +0 -1
  143. package/src/components/Page/Page.tsx +6 -0
  144. package/src/demos/Banner.md +18 -15
  145. package/src/demos/DashboardWrapper.tsx +2 -0
  146. package/src/demos/JumpLinks.md +28 -17
@@ -198,6 +198,218 @@
198
198
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
199
199
  }
200
200
 
201
+ :where(:root, .pf-v6-c-alert) {
202
+ --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg);
203
+ --pf-v6-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default);
204
+ --pf-v6-c-alert--GridTemplateColumns: max-content 1fr max-content;
205
+ --pf-v6-c-alert--GridTemplateAreas:
206
+ "icon title action"
207
+ ". description description"
208
+ ". actiongroup actiongroup";
209
+ --pf-v6-c-alert--BorderWidth: var(--pf-t--global--border--width--box--status--default);
210
+ --pf-v6-c-alert--BorderColor: transparent;
211
+ --pf-v6-c-alert--BorderRadius: var(--pf-t--global--border--radius--medium);
212
+ --pf-v6-c-alert--PaddingBlockStart: var(--pf-t--global--spacer--md);
213
+ --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md);
214
+ --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
215
+ --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
216
+ --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
217
+ --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
218
+ --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
219
+ --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
220
+ --pf-v6-c-alert__toggle-icon--Rotate: 0;
221
+ --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
222
+ --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
223
+ --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
224
+ --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
225
+ --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
226
+ --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
227
+ --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
228
+ --pf-v6-c-alert__title--max-lines: 1;
229
+ --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
230
+ --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
231
+ --pf-v6-c-alert__action--TranslateY: 0.125rem;
232
+ --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
233
+ --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
234
+ --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
235
+ --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
236
+ --pf-v6-c-alert__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
237
+ --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
238
+ --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
239
+ --pf-v6-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default);
240
+ --pf-v6-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
241
+ --pf-v6-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular);
242
+ --pf-v6-c-alert--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
243
+ --pf-v6-c-alert--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
244
+ --pf-v6-c-alert--m-success__title--Color: var(--pf-t--global--text--color--regular);
245
+ --pf-v6-c-alert--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
246
+ --pf-v6-c-alert--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
247
+ --pf-v6-c-alert--m-danger__title--Color: var(--pf-t--global--text--color--regular);
248
+ --pf-v6-c-alert--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
249
+ --pf-v6-c-alert--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
250
+ --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--regular);
251
+ --pf-v6-c-alert--m-info--BorderColor: var(--pf-t--global--border--color--status--info--default);
252
+ --pf-v6-c-alert--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
253
+ --pf-v6-c-alert--m-info__title--Color: var(--pf-t--global--text--color--regular);
254
+ --pf-v6-c-alert--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
255
+ --pf-v6-c-alert--m-inline--BoxShadow: none;
256
+ --pf-v6-c-alert--m-inline--m-plain--BorderWidth: 0;
257
+ --pf-v6-c-alert--m-inline--m-plain--BackgroundColor: transparent;
258
+ --pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart: 0;
259
+ --pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd: 0;
260
+ --pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd: 0;
261
+ --pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart: 0;
262
+ --pf-v6-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
263
+ --pf-v6-c-alert--m-expandable--GridTemplateAreas:
264
+ "toggle icon title action"
265
+ ". . description description"
266
+ ". . actiongroup actiongroup";
267
+ --pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
268
+ --pf-v6-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
269
+ --pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
270
+ }
271
+
272
+ .pf-v6-c-alert {
273
+ position: relative;
274
+ display: grid;
275
+ grid-template-areas: var(--pf-v6-c-alert--GridTemplateAreas);
276
+ grid-template-columns: var(--pf-v6-c-alert--GridTemplateColumns);
277
+ padding-block-start: var(--pf-v6-c-alert--PaddingBlockStart);
278
+ padding-block-end: var(--pf-v6-c-alert--PaddingBlockEnd);
279
+ padding-inline-start: var(--pf-v6-c-alert--PaddingInlineStart);
280
+ padding-inline-end: var(--pf-v6-c-alert--PaddingInlineEnd);
281
+ font-size: var(--pf-v6-c-alert--FontSize);
282
+ background-color: var(--pf-v6-c-alert--BackgroundColor);
283
+ border: var(--pf-v6-c-alert--BorderWidth) solid var(--pf-v6-c-alert--BorderColor);
284
+ border-radius: var(--pf-v6-c-alert--BorderRadius);
285
+ box-shadow: var(--pf-v6-c-alert--BoxShadow);
286
+ }
287
+
288
+ .pf-v6-c-alert.pf-m-custom {
289
+ --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-custom--BorderColor);
290
+ --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-custom__icon--Color);
291
+ --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-custom__title--Color);
292
+ }
293
+
294
+ .pf-v6-c-alert.pf-m-success {
295
+ --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-success--BorderColor);
296
+ --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-success__icon--Color);
297
+ --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-success__title--Color);
298
+ }
299
+
300
+ .pf-v6-c-alert.pf-m-danger {
301
+ --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-danger--BorderColor);
302
+ --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-danger__icon--Color);
303
+ --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-danger__title--Color);
304
+ }
305
+
306
+ .pf-v6-c-alert.pf-m-warning {
307
+ --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-warning--BorderColor);
308
+ --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-warning__icon--Color);
309
+ --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-warning__title--Color);
310
+ }
311
+
312
+ .pf-v6-c-alert.pf-m-info {
313
+ --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-info--BorderColor);
314
+ --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-info__icon--Color);
315
+ --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-info__title--Color);
316
+ }
317
+
318
+ .pf-v6-c-alert.pf-m-inline {
319
+ --pf-v6-c-alert--BoxShadow: var(--pf-v6-c-alert--m-inline--BoxShadow);
320
+ --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--BackgroundColor);
321
+ }
322
+
323
+ .pf-v6-c-alert.pf-m-plain {
324
+ --pf-v6-c-alert--BorderWidth: var(--pf-v6-c-alert--m-inline--m-plain--BorderWidth);
325
+ --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--m-plain--BackgroundColor);
326
+ --pf-v6-c-alert--PaddingBlockStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart);
327
+ --pf-v6-c-alert--PaddingInlineEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd);
328
+ --pf-v6-c-alert--PaddingBlockEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd);
329
+ --pf-v6-c-alert--PaddingInlineStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart);
330
+ }
331
+
332
+ .pf-v6-c-alert.pf-m-expandable {
333
+ --pf-v6-c-alert--GridTemplateColumns: var(--pf-v6-c-alert--m-expandable--GridTemplateColumns);
334
+ --pf-v6-c-alert--GridTemplateAreas: var(--pf-v6-c-alert--m-expandable--GridTemplateAreas);
335
+ --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart);
336
+ }
337
+
338
+ .pf-v6-c-alert.pf-m-expanded {
339
+ --pf-v6-c-alert__toggle-icon--Rotate: var(--pf-v6-c-alert--m-expanded__toggle-icon--Rotate);
340
+ --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart);
341
+ }
342
+
343
+ .pf-v6-c-alert__toggle {
344
+ margin-block-start: var(--pf-v6-c-alert__toggle--MarginBlockStart);
345
+ margin-block-end: var(--pf-v6-c-alert__toggle--MarginBlockEnd);
346
+ margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
347
+ }
348
+
349
+ .pf-v6-c-alert__toggle-icon {
350
+ display: inline-block;
351
+ transition: var(--pf-v6-c-alert__toggle-icon--Transition);
352
+ transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
353
+ }
354
+
355
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
356
+ scale: -1 1;
357
+ }
358
+
359
+ .pf-v6-c-alert__icon {
360
+ display: flex;
361
+ grid-area: icon;
362
+ margin-block-start: var(--pf-v6-c-alert__icon--MarginBlockStart);
363
+ margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
364
+ font-size: var(--pf-v6-c-alert__icon--FontSize);
365
+ color: var(--pf-v6-c-alert__icon--Color);
366
+ }
367
+
368
+ .pf-v6-c-alert__title {
369
+ grid-area: title;
370
+ font-weight: var(--pf-v6-c-alert__title--FontWeight);
371
+ color: var(--pf-v6-c-alert__title--Color);
372
+ word-break: break-word;
373
+ }
374
+
375
+ .pf-v6-c-alert__title.pf-m-truncate {
376
+ display: -webkit-box;
377
+ -webkit-box-orient: vertical;
378
+ -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
379
+ overflow: hidden;
380
+ }
381
+
382
+ .pf-v6-c-alert__description {
383
+ grid-area: description;
384
+ padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
385
+ word-break: break-word;
386
+ }
387
+
388
+ .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
389
+ --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);
390
+ }
391
+
392
+ .pf-v6-c-alert__action {
393
+ grid-area: action;
394
+ margin-block-start: var(--pf-v6-c-alert__action--MarginBlockStart);
395
+ margin-block-end: var(--pf-v6-c-alert__action--MarginBlockEnd);
396
+ margin-inline-end: var(--pf-v6-c-alert__action--MarginInlineEnd);
397
+ transform: translateY(var(--pf-v6-c-alert__action--TranslateY));
398
+ }
399
+
400
+ .pf-v6-c-alert__action > .pf-v6-c-button {
401
+ --pf-v6-c-button--LineHeight: 1;
402
+ }
403
+
404
+ .pf-v6-c-alert__action-group {
405
+ grid-area: actiongroup;
406
+ padding-block-start: var(--pf-v6-c-alert__action-group--PaddingBlockStart);
407
+ }
408
+
409
+ .pf-v6-c-alert__action-group > .pf-v6-c-button:not(:last-child) {
410
+ margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
411
+ }
412
+
201
413
  :where(:root, .pf-v6-c-avatar) {
202
414
  --pf-v6-c-avatar--BorderColor: transparent;
203
415
  --pf-v6-c-avatar--BorderWidth: 0;
@@ -448,218 +660,6 @@
448
660
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-2xl, var(--pf-v6-c-avatar--m-xl--Height-on-xl, var(--pf-v6-c-avatar--m-xl--Height-on-lg, var(--pf-v6-c-avatar--m-xl--Height-on-md, var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height))))));
449
661
  }
450
662
  }
451
- :where(:root, .pf-v6-c-alert) {
452
- --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg);
453
- --pf-v6-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default);
454
- --pf-v6-c-alert--GridTemplateColumns: max-content 1fr max-content;
455
- --pf-v6-c-alert--GridTemplateAreas:
456
- "icon title action"
457
- ". description description"
458
- ". actiongroup actiongroup";
459
- --pf-v6-c-alert--BorderWidth: var(--pf-t--global--border--width--box--status--default);
460
- --pf-v6-c-alert--BorderColor: transparent;
461
- --pf-v6-c-alert--BorderRadius: var(--pf-t--global--border--radius--medium);
462
- --pf-v6-c-alert--PaddingBlockStart: var(--pf-t--global--spacer--md);
463
- --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md);
464
- --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
465
- --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
466
- --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
467
- --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
468
- --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
469
- --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
470
- --pf-v6-c-alert__toggle-icon--Rotate: 0;
471
- --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
472
- --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
473
- --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
474
- --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
475
- --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--icon--size--md);
476
- --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
477
- --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
478
- --pf-v6-c-alert__title--max-lines: 1;
479
- --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
480
- --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
481
- --pf-v6-c-alert__action--TranslateY: 0.125rem;
482
- --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
483
- --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
484
- --pf-v6-c-alert__action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
485
- --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
486
- --pf-v6-c-alert__description--action-group--PaddingBlockStart-base: var(--pf-t--global--spacer--sm);
487
- --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
488
- --pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
489
- --pf-v6-c-alert--m-custom--BorderColor: var(--pf-t--global--border--color--status--custom--default);
490
- --pf-v6-c-alert--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
491
- --pf-v6-c-alert--m-custom__title--Color: var(--pf-t--global--text--color--regular);
492
- --pf-v6-c-alert--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
493
- --pf-v6-c-alert--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
494
- --pf-v6-c-alert--m-success__title--Color: var(--pf-t--global--text--color--regular);
495
- --pf-v6-c-alert--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
496
- --pf-v6-c-alert--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
497
- --pf-v6-c-alert--m-danger__title--Color: var(--pf-t--global--text--color--regular);
498
- --pf-v6-c-alert--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
499
- --pf-v6-c-alert--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
500
- --pf-v6-c-alert--m-warning__title--Color: var(--pf-t--global--text--color--regular);
501
- --pf-v6-c-alert--m-info--BorderColor: var(--pf-t--global--border--color--status--info--default);
502
- --pf-v6-c-alert--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
503
- --pf-v6-c-alert--m-info__title--Color: var(--pf-t--global--text--color--regular);
504
- --pf-v6-c-alert--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
505
- --pf-v6-c-alert--m-inline--BoxShadow: none;
506
- --pf-v6-c-alert--m-inline--m-plain--BorderWidth: 0;
507
- --pf-v6-c-alert--m-inline--m-plain--BackgroundColor: transparent;
508
- --pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart: 0;
509
- --pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd: 0;
510
- --pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd: 0;
511
- --pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart: 0;
512
- --pf-v6-c-alert--m-expandable--GridTemplateColumns: auto max-content 1fr max-content;
513
- --pf-v6-c-alert--m-expandable--GridTemplateAreas:
514
- "toggle icon title action"
515
- ". . description description"
516
- ". . actiongroup actiongroup";
517
- --pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__action-group--PaddingBlockStart-base);
518
- --pf-v6-c-alert--m-expanded__toggle-icon--Rotate: 90deg;
519
- --pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart-base);
520
- }
521
-
522
- .pf-v6-c-alert {
523
- position: relative;
524
- display: grid;
525
- grid-template-areas: var(--pf-v6-c-alert--GridTemplateAreas);
526
- grid-template-columns: var(--pf-v6-c-alert--GridTemplateColumns);
527
- padding-block-start: var(--pf-v6-c-alert--PaddingBlockStart);
528
- padding-block-end: var(--pf-v6-c-alert--PaddingBlockEnd);
529
- padding-inline-start: var(--pf-v6-c-alert--PaddingInlineStart);
530
- padding-inline-end: var(--pf-v6-c-alert--PaddingInlineEnd);
531
- font-size: var(--pf-v6-c-alert--FontSize);
532
- background-color: var(--pf-v6-c-alert--BackgroundColor);
533
- border: var(--pf-v6-c-alert--BorderWidth) solid var(--pf-v6-c-alert--BorderColor);
534
- border-radius: var(--pf-v6-c-alert--BorderRadius);
535
- box-shadow: var(--pf-v6-c-alert--BoxShadow);
536
- }
537
-
538
- .pf-v6-c-alert.pf-m-custom {
539
- --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-custom--BorderColor);
540
- --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-custom__icon--Color);
541
- --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-custom__title--Color);
542
- }
543
-
544
- .pf-v6-c-alert.pf-m-success {
545
- --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-success--BorderColor);
546
- --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-success__icon--Color);
547
- --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-success__title--Color);
548
- }
549
-
550
- .pf-v6-c-alert.pf-m-danger {
551
- --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-danger--BorderColor);
552
- --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-danger__icon--Color);
553
- --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-danger__title--Color);
554
- }
555
-
556
- .pf-v6-c-alert.pf-m-warning {
557
- --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-warning--BorderColor);
558
- --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-warning__icon--Color);
559
- --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-warning__title--Color);
560
- }
561
-
562
- .pf-v6-c-alert.pf-m-info {
563
- --pf-v6-c-alert--BorderColor: var(--pf-v6-c-alert--m-info--BorderColor);
564
- --pf-v6-c-alert__icon--Color: var(--pf-v6-c-alert--m-info__icon--Color);
565
- --pf-v6-c-alert__title--Color: var(--pf-v6-c-alert--m-info__title--Color);
566
- }
567
-
568
- .pf-v6-c-alert.pf-m-inline {
569
- --pf-v6-c-alert--BoxShadow: var(--pf-v6-c-alert--m-inline--BoxShadow);
570
- --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--BackgroundColor);
571
- }
572
-
573
- .pf-v6-c-alert.pf-m-plain {
574
- --pf-v6-c-alert--BorderWidth: var(--pf-v6-c-alert--m-inline--m-plain--BorderWidth);
575
- --pf-v6-c-alert--BackgroundColor: var(--pf-v6-c-alert--m-inline--m-plain--BackgroundColor);
576
- --pf-v6-c-alert--PaddingBlockStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockStart);
577
- --pf-v6-c-alert--PaddingInlineEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineEnd);
578
- --pf-v6-c-alert--PaddingBlockEnd: var(--pf-v6-c-alert--m-inline--m-plain--PaddingBlockEnd);
579
- --pf-v6-c-alert--PaddingInlineStart: var(--pf-v6-c-alert--m-inline--m-plain--PaddingInlineStart);
580
- }
581
-
582
- .pf-v6-c-alert.pf-m-expandable {
583
- --pf-v6-c-alert--GridTemplateColumns: var(--pf-v6-c-alert--m-expandable--GridTemplateColumns);
584
- --pf-v6-c-alert--GridTemplateAreas: var(--pf-v6-c-alert--m-expandable--GridTemplateAreas);
585
- --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expandable__description--action-group--PaddingBlockStart);
586
- }
587
-
588
- .pf-v6-c-alert.pf-m-expanded {
589
- --pf-v6-c-alert__toggle-icon--Rotate: var(--pf-v6-c-alert--m-expanded__toggle-icon--Rotate);
590
- --pf-v6-c-alert__description--action-group--PaddingBlockStart: var(--pf-v6-c-alert--m-expanded__description--action-group--PaddingBlockStart);
591
- }
592
-
593
- .pf-v6-c-alert__toggle {
594
- margin-block-start: var(--pf-v6-c-alert__toggle--MarginBlockStart);
595
- margin-block-end: var(--pf-v6-c-alert__toggle--MarginBlockEnd);
596
- margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
597
- }
598
-
599
- .pf-v6-c-alert__toggle-icon {
600
- display: inline-block;
601
- transition: var(--pf-v6-c-alert__toggle-icon--Transition);
602
- transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
603
- }
604
-
605
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
606
- scale: -1 1;
607
- }
608
-
609
- .pf-v6-c-alert__icon {
610
- display: flex;
611
- grid-area: icon;
612
- margin-block-start: var(--pf-v6-c-alert__icon--MarginBlockStart);
613
- margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
614
- font-size: var(--pf-v6-c-alert__icon--FontSize);
615
- color: var(--pf-v6-c-alert__icon--Color);
616
- }
617
-
618
- .pf-v6-c-alert__title {
619
- grid-area: title;
620
- font-weight: var(--pf-v6-c-alert__title--FontWeight);
621
- color: var(--pf-v6-c-alert__title--Color);
622
- word-break: break-word;
623
- }
624
-
625
- .pf-v6-c-alert__title.pf-m-truncate {
626
- display: -webkit-box;
627
- -webkit-box-orient: vertical;
628
- -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
629
- overflow: hidden;
630
- }
631
-
632
- .pf-v6-c-alert__description {
633
- grid-area: description;
634
- padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
635
- word-break: break-word;
636
- }
637
-
638
- .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
639
- --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);
640
- }
641
-
642
- .pf-v6-c-alert__action {
643
- grid-area: action;
644
- margin-block-start: var(--pf-v6-c-alert__action--MarginBlockStart);
645
- margin-block-end: var(--pf-v6-c-alert__action--MarginBlockEnd);
646
- margin-inline-end: var(--pf-v6-c-alert__action--MarginInlineEnd);
647
- transform: translateY(var(--pf-v6-c-alert__action--TranslateY));
648
- }
649
-
650
- .pf-v6-c-alert__action > .pf-v6-c-button {
651
- --pf-v6-c-button--LineHeight: 1;
652
- }
653
-
654
- .pf-v6-c-alert__action-group {
655
- grid-area: actiongroup;
656
- padding-block-start: var(--pf-v6-c-alert__action-group--PaddingBlockStart);
657
- }
658
-
659
- .pf-v6-c-alert__action-group > .pf-v6-c-button:not(:last-child) {
660
- margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
661
- }
662
-
663
663
  :where(:root, .pf-v6-c-back-to-top) {
664
664
  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
665
665
  --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg);
@@ -2456,60 +2456,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2456
2456
  color: var(--pf-v6-c-check__label-required--Color);
2457
2457
  }
2458
2458
 
2459
- :where(:root, .pf-v6-c-code-block) {
2460
- --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2461
- --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
2462
- --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
2463
- --pf-v6-c-code-block__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
2464
- --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2465
- --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2466
- --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2467
- --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2468
- --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
2469
- --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2470
- --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
2471
- --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
2472
- --pf-v6-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
2473
- --pf-v6-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
2474
- }
2475
-
2476
- .pf-v6-c-code-block {
2477
- background-color: var(--pf-v6-c-code-block--BackgroundColor);
2478
- border-radius: var(--pf-v6-c-code-block--BorderRadius);
2479
- }
2480
-
2481
- .pf-v6-c-code-block__header {
2482
- display: flex;
2483
- padding-block-start: var(--pf-v6-c-code-block__header--PaddingBlockStart);
2484
- padding-block-end: var(--pf-v6-c-code-block__header--PaddingBlockEnd);
2485
- padding-inline-start: var(--pf-v6-c-code-block__header--PaddingInlineStart);
2486
- padding-inline-end: var(--pf-v6-c-code-block__header--PaddingInlineEnd);
2487
- border-block-end: var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor);
2488
- }
2489
-
2490
- .pf-v6-c-code-block__actions {
2491
- display: flex;
2492
- margin-inline-start: auto;
2493
- }
2494
-
2495
- .pf-v6-c-code-block__content {
2496
- padding-block-start: var(--pf-v6-c-code-block__content--PaddingBlockStart);
2497
- padding-block-end: var(--pf-v6-c-code-block__content--PaddingBlockEnd);
2498
- padding-inline-start: var(--pf-v6-c-code-block__content--PaddingInlineStart);
2499
- padding-inline-end: var(--pf-v6-c-code-block__content--PaddingInlineEnd);
2500
- }
2501
-
2502
- .pf-v6-c-code-block__pre {
2503
- font-family: var(--pf-v6-c-code-block__pre--FontFamily);
2504
- font-size: var(--pf-v6-c-code-block__pre--FontSize);
2505
- overflow-wrap: break-word;
2506
- white-space: pre-wrap;
2507
- }
2508
-
2509
- .pf-v6-c-code-block__code {
2510
- font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
2511
- }
2512
-
2513
2459
  :where(:root, .pf-v6-c-clipboard-copy) {
2514
2460
  --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
2515
2461
  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
@@ -2614,281 +2560,60 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2614
2560
  --pf-v6-c-button--m-plain--hover__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
2615
2561
  }
2616
2562
 
2617
- :where(:root, .pf-v6-c-content) {
2618
- --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
2619
- --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
2620
- --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
2621
- --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
2622
- --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
2623
- --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
2624
- --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
2625
- --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
2626
- --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2627
- --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
2628
- --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
2629
- --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
2630
- --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
2631
- --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2632
- --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
2633
- --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
2634
- --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
2635
- --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
2636
- --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2637
- --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
2638
- --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
2639
- --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
2640
- --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
2641
- --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2642
- --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
2643
- --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
2644
- --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
2645
- --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
2646
- --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2647
- --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
2648
- --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
2649
- --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
2650
- --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
2651
- --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
2652
- --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
2653
- --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
2654
- --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
2655
- --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
2656
- --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
2657
- --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
2658
- --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
2659
- --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
2660
- --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
2661
- --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
2662
- --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
2663
- --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
2664
- --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
2665
- --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
2666
- --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
2667
- --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
2668
- --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2669
- --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
2670
- --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
2671
- --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
2672
- --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
2673
- --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
2674
- --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm);
2675
- --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
2676
- --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
2677
- --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
2678
- --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
2679
- --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
2680
- --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
2681
- --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
2682
- --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
2683
- --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
2684
- --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
2685
- }
2686
-
2687
- [class*=pf-v6-c-content] {
2688
- font-size: var(--pf-v6-c-content--FontSize);
2689
- line-height: var(--pf-v6-c-content--LineHeight);
2690
- color: var(--pf-v6-c-content--Color);
2691
- }
2692
-
2693
- [class*=pf-v6-c-content].pf-m-editorial {
2694
- --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize);
2695
- --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize);
2696
- }
2697
-
2698
- :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
2699
- color: var(--pf-v6-c-content--a--Color);
2700
- text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
2701
- }
2702
-
2703
- :is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
2704
- --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
2705
- --pf-v6-c-content--a--TextDecorationLine: var(--pf-v6-c-content--a--hover--TextDecorationLine);
2706
- --pf-v6-c-content--a--TextDecorationStyle: var(--pf-v6-c-content--a--hover--TextDecorationStyle);
2707
- }
2708
-
2709
- :is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
2710
- color: var(--pf-v6-c-content--a--visited--Color);
2711
- }
2712
-
2713
- :is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
2714
- margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart);
2715
- }
2716
-
2717
- :is(.pf-v6-c-content--p,
2718
- .pf-v6-c-content--dl,
2719
- .pf-v6-c-content--ol,
2720
- .pf-v6-c-content--ul,
2721
- .pf-v6-c-content--blockquote,
2722
- .pf-v6-c-content--small,
2723
- .pf-v6-c-content--pre,
2724
- .pf-v6-c-content--table,
2725
- .pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
2726
- margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
2727
- }
2728
-
2729
- :is(.pf-v6-c-content--h1,
2730
- .pf-v6-c-content--h2,
2731
- .pf-v6-c-content--h3,
2732
- .pf-v6-c-content--h4,
2733
- .pf-v6-c-content--h5,
2734
- .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
2735
- margin: 0;
2736
- font-family: var(--pf-v6-c-content--heading--FontFamily);
2737
- }
2738
-
2739
- :is(.pf-v6-c-content--h1,
2740
- .pf-v6-c-content--h2,
2741
- .pf-v6-c-content--h3,
2742
- .pf-v6-c-content--h4,
2743
- .pf-v6-c-content--h5,
2744
- .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
2745
- margin-block-start: 0;
2746
- }
2747
-
2748
- :is(.pf-v6-c-content--h1,
2749
- .pf-v6-c-content--h2,
2750
- .pf-v6-c-content--h3,
2751
- .pf-v6-c-content--h4,
2752
- .pf-v6-c-content--h5,
2753
- .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
2754
- margin-block-end: 0;
2755
- }
2756
-
2757
- :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
2758
- margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
2759
- margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
2760
- font-size: var(--pf-v6-c-content--h1--FontSize);
2761
- font-weight: var(--pf-v6-c-content--h1--FontWeight);
2762
- line-height: var(--pf-v6-c-content--h1--LineHeight);
2763
- }
2764
-
2765
- :is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
2766
- margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart);
2767
- margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd);
2768
- font-size: var(--pf-v6-c-content--h2--FontSize);
2769
- font-weight: var(--pf-v6-c-content--h2--FontWeight);
2770
- line-height: var(--pf-v6-c-content--h2--LineHeight);
2771
- }
2772
-
2773
- :is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
2774
- margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart);
2775
- margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd);
2776
- font-size: var(--pf-v6-c-content--h3--FontSize);
2777
- font-weight: var(--pf-v6-c-content--h3--FontWeight);
2778
- line-height: var(--pf-v6-c-content--h3--LineHeight);
2779
- }
2780
-
2781
- :is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
2782
- margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart);
2783
- margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd);
2784
- font-size: var(--pf-v6-c-content--h4--FontSize);
2785
- font-weight: var(--pf-v6-c-content--h4--FontWeight);
2786
- line-height: var(--pf-v6-c-content--h4--LineHeight);
2787
- }
2788
-
2789
- :is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
2790
- margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart);
2791
- margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd);
2792
- font-size: var(--pf-v6-c-content--h5--FontSize);
2793
- font-weight: var(--pf-v6-c-content--h5--FontWeight);
2794
- line-height: var(--pf-v6-c-content--h5--LineHeight);
2795
- }
2796
-
2797
- :is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
2798
- margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart);
2799
- margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd);
2800
- font-size: var(--pf-v6-c-content--h6--FontSize);
2801
- font-weight: var(--pf-v6-c-content--h6--FontWeight);
2802
- line-height: var(--pf-v6-c-content--h6--LineHeight);
2803
- }
2804
-
2805
- :is(.pf-v6-c-content--small, .pf-v6-c-content small) {
2806
- display: block;
2807
- font-size: var(--pf-v6-c-content--small--FontSize);
2808
- line-height: var(--pf-v6-c-content--small--LineHeight);
2809
- color: var(--pf-v6-c-content--small--Color);
2810
- }
2811
-
2812
- :is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
2813
- margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
2814
- }
2815
-
2816
- :is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
2817
- padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart);
2818
- padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd);
2819
- padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart);
2820
- padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd);
2821
- color: var(--pf-v6-c-content--blockquote--Color);
2822
- border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
2563
+ :where(:root, .pf-v6-c-code-block) {
2564
+ --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2565
+ --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
2566
+ --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
2567
+ --pf-v6-c-code-block__header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
2568
+ --pf-v6-c-code-block__header--PaddingBlockStart: var(--pf-t--global--spacer--xs);
2569
+ --pf-v6-c-code-block__header--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
2570
+ --pf-v6-c-code-block__header--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
2571
+ --pf-v6-c-code-block__header--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2572
+ --pf-v6-c-code-block__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
2573
+ --pf-v6-c-code-block__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
2574
+ --pf-v6-c-code-block__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
2575
+ --pf-v6-c-code-block__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
2576
+ --pf-v6-c-code-block__pre--FontFamily: var(--pf-t--global--font--family--mono);
2577
+ --pf-v6-c-code-block__pre--FontSize: var(--pf-t--global--font--size--xs);
2823
2578
  }
2824
2579
 
2825
- :is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
2826
- height: var(--pf-v6-c-content--hr--Height);
2827
- background-color: var(--pf-v6-c-content--hr--BackgroundColor);
2828
- border: none;
2580
+ .pf-v6-c-code-block {
2581
+ background-color: var(--pf-v6-c-code-block--BackgroundColor);
2582
+ border-radius: var(--pf-v6-c-code-block--BorderRadius);
2829
2583
  }
2830
2584
 
2831
- :is(.pf-v6-c-content--ol,
2832
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
2585
+ .pf-v6-c-code-block__header {
2833
2586
  display: flex;
2834
- flex-direction: column;
2835
- gap: var(--pf-v6-c-content--list--Gap);
2836
- padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart);
2837
- }
2838
-
2839
- :is(.pf-v6-c-content--ol,
2840
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
2841
- padding-inline-start: 0;
2842
- list-style: none;
2843
- }
2844
-
2845
- :is(.pf-v6-c-content--ol,
2846
- .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
2847
- .pf-v6-c-content--ul,
2848
- ol,
2849
- ul) {
2850
- margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart);
2587
+ padding-block-start: var(--pf-v6-c-code-block__header--PaddingBlockStart);
2588
+ padding-block-end: var(--pf-v6-c-code-block__header--PaddingBlockEnd);
2589
+ padding-inline-start: var(--pf-v6-c-code-block__header--PaddingInlineStart);
2590
+ padding-inline-end: var(--pf-v6-c-code-block__header--PaddingInlineEnd);
2591
+ border-block-end: var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor);
2851
2592
  }
2852
2593
 
2853
- :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
2854
- list-style: var(--pf-v6-c-content--ul--ListStyle);
2594
+ .pf-v6-c-code-block__actions {
2595
+ display: flex;
2596
+ margin-inline-start: auto;
2855
2597
  }
2856
2598
 
2857
- :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
2858
- display: grid;
2859
- grid-template-columns: 1fr;
2599
+ .pf-v6-c-code-block__content {
2600
+ padding-block-start: var(--pf-v6-c-code-block__content--PaddingBlockStart);
2601
+ padding-block-end: var(--pf-v6-c-code-block__content--PaddingBlockEnd);
2602
+ padding-inline-start: var(--pf-v6-c-code-block__content--PaddingInlineStart);
2603
+ padding-inline-end: var(--pf-v6-c-code-block__content--PaddingInlineEnd);
2860
2604
  }
2861
2605
 
2862
- @media screen and (min-width: 36rem) {
2863
- :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
2864
- grid-template: auto/auto 1fr;
2865
- grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
2866
- grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
2867
- }
2868
- }
2869
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
2870
- font-weight: var(--pf-v6-c-content--dt--FontWeight);
2606
+ .pf-v6-c-code-block__pre {
2607
+ font-family: var(--pf-v6-c-code-block__pre--FontFamily);
2608
+ font-size: var(--pf-v6-c-code-block__pre--FontSize);
2609
+ overflow-wrap: break-word;
2610
+ white-space: pre-wrap;
2871
2611
  }
2872
2612
 
2873
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
2874
- margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
2613
+ .pf-v6-c-code-block__code {
2614
+ font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
2875
2615
  }
2876
2616
 
2877
- @media screen and (min-width: 36rem) {
2878
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
2879
- --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
2880
- }
2881
- }
2882
- @media screen and (min-width: 36rem) {
2883
- :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
2884
- grid-column: 1;
2885
- }
2886
- }
2887
- @media screen and (min-width: 36rem) {
2888
- :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
2889
- grid-column: 2;
2890
- }
2891
- }
2892
2617
  @media screen and (min-width: 48rem) {
2893
2618
  .pf-v6-c-data-list:not([class*=pf-m-grid]) {
2894
2619
  --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list__cell--cell--md--PaddingBlockStart);
@@ -3399,350 +3124,625 @@ ul) {
3399
3124
  }
3400
3125
 
3401
3126
  @media screen and (min-width: 36rem) {
3402
- :where(:root, .pf-v6-c-data-list) {
3403
- --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
3404
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
3127
+ :where(:root, .pf-v6-c-data-list) {
3128
+ --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
3129
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
3130
+ }
3131
+ }
3132
+ @media screen and (min-width: 36rem) {
3133
+ :where(:root, .pf-v6-c-data-list) {
3134
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
3135
+ --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
3136
+ }
3137
+ }
3138
+ .pf-v6-c-data-list {
3139
+ font-size: var(--pf-v6-c-data-list--FontSize);
3140
+ line-height: var(--pf-v6-c-data-list--LineHeight);
3141
+ overflow-wrap: break-word;
3142
+ border-block-start: var(--pf-v6-c-data-list--BorderBlockStartWidth) solid var(--pf-v6-c-data-list--BorderBlockStartColor);
3143
+ }
3144
+
3145
+ .pf-v6-c-data-list.pf-m-compact {
3146
+ --pf-v6-c-data-list__check--FontSize: var(--pf-v6-c-data-list--m-compact__check--FontSize);
3147
+ --pf-v6-c-data-list--FontSize: var(--pf-v6-c-data-list--m-compact--FontSize);
3148
+ --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list--m-compact__item-action--MarginInlineStart);
3149
+ --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart);
3150
+ --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd);
3151
+ --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__action--MarginBlockStart);
3152
+ --pf-v6-c-data-list__action--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__action--MarginBlockEnd);
3153
+ --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd);
3154
+ --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart);
3155
+ --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd);
3156
+ --pf-v6-c-data-list__item-content--md--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd);
3157
+ --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart);
3158
+ --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd);
3159
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart);
3160
+ --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd);
3161
+ --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart);
3162
+ font-size: var(--pf-v6-c-data-list--m-compact--FontSize);
3163
+ }
3164
+
3165
+ .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell {
3166
+ --pf-v6-c-data-list__cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
3167
+ --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd);
3168
+ --pf-v6-c-data-list__cell--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd);
3169
+ --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart);
3170
+ }
3171
+
3172
+ .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
3173
+ font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
3174
+ }
3175
+
3176
+ .pf-v6-c-data-list.pf-m-drag-over {
3177
+ overflow-anchor: none;
3178
+ }
3179
+
3180
+ .pf-v6-c-data-list.pf-m-truncate,
3181
+ .pf-v6-c-data-list__item-row.pf-m-truncate,
3182
+ .pf-v6-c-data-list__cell.pf-m-truncate,
3183
+ .pf-v6-c-data-list__text.pf-m-truncate {
3184
+ --pf-v6-c-data-list--cell--MinWidth: var(--pf-v6-c-data-list--cell--m-truncate--MinWidth);
3185
+ --pf-v6-c-data-list--cell--Overflow: hidden;
3186
+ --pf-v6-c-data-list--cell--TextOverflow: ellipsis;
3187
+ --pf-v6-c-data-list--cell--WhiteSpace: nowrap;
3188
+ }
3189
+
3190
+ .pf-v6-c-data-list.pf-m-break-word,
3191
+ .pf-v6-c-data-list__item-row.pf-m-break-word,
3192
+ .pf-v6-c-data-list__cell.pf-m-break-word,
3193
+ .pf-v6-c-data-list__text.pf-m-break-word {
3194
+ --pf-v6-c-data-list--cell--WordBreak: break-word;
3195
+ }
3196
+
3197
+ .pf-v6-c-data-list.pf-m-nowrap,
3198
+ .pf-v6-c-data-list__item-row.pf-m-nowrap,
3199
+ .pf-v6-c-data-list__cell.pf-m-nowrap,
3200
+ .pf-v6-c-data-list__text.pf-m-nowrap {
3201
+ --pf-v6-c-data-list--cell--WhiteSpace: nowrap;
3202
+ }
3203
+
3204
+ .pf-v6-c-data-list__item {
3205
+ position: relative;
3206
+ display: flex;
3207
+ flex-direction: column;
3208
+ background-color: var(--pf-v6-c-data-list__item--BackgroundColor);
3209
+ border-block-end: var(--pf-v6-c-data-list__item--BorderBlockEndWidth) solid var(--pf-v6-c-data-list__item--BorderBlockEndColor);
3210
+ }
3211
+
3212
+ .pf-v6-c-data-list__item.pf-m-clickable {
3213
+ cursor: pointer;
3214
+ outline-offset: var(--pf-v6-c-data-list__item--m-clickable--OutlineOffset);
3215
+ }
3216
+
3217
+ .pf-v6-c-data-list__item.pf-m-clickable:hover, .pf-v6-c-data-list__item.pf-m-clickable:focus {
3218
+ background-color: var(--pf-v6-c-data-list__item--hover--BackgroundColor);
3219
+ }
3220
+
3221
+ .pf-v6-c-data-list__item.pf-m-selected {
3222
+ background-color: var(--pf-v6-c-data-list__item--m-selected--BackgroundColor);
3223
+ }
3224
+
3225
+ .pf-v6-c-data-list__item.pf-m-ghost-row::after {
3226
+ position: absolute;
3227
+ inset-block-start: 0;
3228
+ inset-block-end: 0;
3229
+ inset-inline-start: 0;
3230
+ inset-inline-end: 0;
3231
+ content: "";
3232
+ background-color: var(--pf-v6-c-data-list__item--m-ghost-row--after--BackgroundColor);
3233
+ opacity: var(--pf-v6-c-data-list__item--m-ghost-row--after--Opacity);
3234
+ }
3235
+
3236
+ .pf-v6-c-data-list__item.pf-m-expanded {
3237
+ --pf-v6-c-data-list__toggle-icon--Rotate: var(--pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate);
3238
+ }
3239
+
3240
+ .pf-v6-c-data-list__item-row {
3241
+ display: flex;
3242
+ flex-wrap: nowrap;
3243
+ padding-inline-start: var(--pf-v6-c-data-list__item-row--PaddingInlineStart);
3244
+ padding-inline-end: var(--pf-v6-c-data-list__item-row--PaddingInlineEnd);
3245
+ }
3246
+
3247
+ .pf-v6-c-data-list__item-control {
3248
+ display: flex;
3249
+ flex-wrap: nowrap;
3250
+ padding-block-start: var(--pf-v6-c-data-list__item-control--PaddingBlockStart);
3251
+ padding-block-end: var(--pf-v6-c-data-list__item-control--PaddingBlockEnd);
3252
+ margin-inline-end: var(--pf-v6-c-data-list__item-control--MarginInlineEnd);
3253
+ }
3254
+
3255
+ .pf-v6-c-data-list__item-control > *:not(:last-child) {
3256
+ margin-inline-end: var(--pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd);
3257
+ }
3258
+
3259
+ .pf-v6-c-data-list__check {
3260
+ display: flex;
3261
+ align-items: center;
3262
+ align-self: flex-start;
3263
+ height: var(--pf-v6-c-data-list__check--Height);
3264
+ margin-block-start: var(--pf-v6-c-data-list__check--MarginBlockStart);
3265
+ }
3266
+
3267
+ .pf-v6-c-data-list__check > input {
3268
+ cursor: pointer;
3269
+ }
3270
+
3271
+ .pf-v6-c-data-list__item-draggable-button {
3272
+ display: flex;
3273
+ flex-direction: column;
3274
+ padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
3275
+ padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
3276
+ padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
3277
+ padding-inline-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd);
3278
+ margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
3279
+ margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
3280
+ margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
3281
+ background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
3282
+ border: 0;
3283
+ }
3284
+
3285
+ .pf-v6-c-data-list__item-draggable-button:hover {
3286
+ --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color);
3287
+ cursor: grab;
3288
+ }
3289
+
3290
+ .pf-v6-c-data-list__item-draggable-button:focus {
3291
+ --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color);
3292
+ }
3293
+
3294
+ .pf-v6-c-data-list__item-draggable-button:active {
3295
+ cursor: grabbing;
3296
+ }
3297
+
3298
+ .pf-v6-c-data-list__item-draggable-button.pf-m-disabled {
3299
+ --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
3300
+ pointer-events: none;
3301
+ }
3302
+
3303
+ .pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon {
3304
+ color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color);
3305
+ }
3306
+
3307
+ .pf-v6-c-data-list__item-action {
3308
+ --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
3309
+ --pf-v6-hidden-visible--hidden--Display: none;
3310
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3311
+ display: var(--pf-v6-hidden-visible--Display);
3312
+ gap: var(--pf-v6-c-data-list__item-action--Gap);
3313
+ align-content: flex-start;
3314
+ align-items: flex-start;
3315
+ padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingBlockStart);
3316
+ padding-block-end: var(--pf-v6-c-data-list__item-action--PaddingBlockEnd);
3317
+ margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
3318
+ }
3319
+
3320
+ .pf-v6-c-data-list__item-action.pf-m-hidden {
3321
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3322
+ }
3323
+
3324
+ @media screen and (min-width: 36rem) {
3325
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-sm {
3326
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3327
+ }
3328
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-sm {
3329
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3405
3330
  }
3406
3331
  }
3407
- @media screen and (min-width: 36rem) {
3408
- :where(:root, .pf-v6-c-data-list) {
3409
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
3410
- --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
3332
+ @media screen and (min-width: 48rem) {
3333
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-md {
3334
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3335
+ }
3336
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-md {
3337
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3411
3338
  }
3412
3339
  }
3413
- .pf-v6-c-data-list {
3414
- font-size: var(--pf-v6-c-data-list--FontSize);
3415
- line-height: var(--pf-v6-c-data-list--LineHeight);
3416
- overflow-wrap: break-word;
3417
- border-block-start: var(--pf-v6-c-data-list--BorderBlockStartWidth) solid var(--pf-v6-c-data-list--BorderBlockStartColor);
3340
+ @media screen and (min-width: 62rem) {
3341
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-lg {
3342
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3343
+ }
3344
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-lg {
3345
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3346
+ }
3347
+ }
3348
+ @media screen and (min-width: 75rem) {
3349
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-xl {
3350
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3351
+ }
3352
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-xl {
3353
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3354
+ }
3355
+ }
3356
+ @media screen and (min-width: 90.625rem) {
3357
+ .pf-v6-c-data-list__item-action.pf-m-hidden-on-2xl {
3358
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3359
+ }
3360
+ .pf-v6-c-data-list__item-action.pf-m-visible-on-2xl {
3361
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3362
+ }
3363
+ }
3364
+ .pf-v6-c-data-list__action {
3365
+ margin-block-start: var(--pf-v6-c-data-list__action--MarginBlockStart);
3366
+ margin-block-end: var(--pf-v6-c-data-list__action--MarginBlockEnd);
3418
3367
  }
3419
3368
 
3420
- .pf-v6-c-data-list.pf-m-compact {
3421
- --pf-v6-c-data-list__check--FontSize: var(--pf-v6-c-data-list--m-compact__check--FontSize);
3422
- --pf-v6-c-data-list--FontSize: var(--pf-v6-c-data-list--m-compact--FontSize);
3423
- --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list--m-compact__item-action--MarginInlineStart);
3424
- --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart);
3425
- --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd);
3426
- --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__action--MarginBlockStart);
3427
- --pf-v6-c-data-list__action--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__action--MarginBlockEnd);
3428
- --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd);
3429
- --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart);
3430
- --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd);
3431
- --pf-v6-c-data-list__item-content--md--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd);
3432
- --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart);
3433
- --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd);
3434
- --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart);
3435
- --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd);
3436
- --pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart);
3437
- font-size: var(--pf-v6-c-data-list--m-compact--FontSize);
3369
+ .pf-v6-c-data-list__toggle {
3370
+ margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
3371
+ margin-block-end: var(--pf-v6-c-data-list__toggle--MarginBlockEnd);
3372
+ margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
3438
3373
  }
3439
3374
 
3440
- .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__cell {
3441
- --pf-v6-c-data-list__cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
3442
- --pf-v6-c-data-list__cell--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockEnd);
3443
- --pf-v6-c-data-list__cell--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__cell--cell--MarginInlineEnd);
3444
- --pf-v6-c-data-list__cell--cell--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell-cell--PaddingBlockStart);
3375
+ .pf-v6-c-data-list__toggle-icon {
3376
+ height: var(--pf-v6-c-data-list__toggle-icon--Height);
3377
+ pointer-events: none;
3378
+ transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
3379
+ transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
3445
3380
  }
3446
3381
 
3447
- .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
3448
- font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
3382
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
3383
+ scale: -1 1;
3449
3384
  }
3450
3385
 
3451
- .pf-v6-c-data-list.pf-m-drag-over {
3452
- overflow-anchor: none;
3386
+ .pf-v6-c-data-list__item-content {
3387
+ display: grid;
3388
+ grid-template-columns: auto 1fr;
3389
+ width: 100%;
3453
3390
  }
3454
3391
 
3455
- .pf-v6-c-data-list.pf-m-truncate,
3456
- .pf-v6-c-data-list__item-row.pf-m-truncate,
3457
- .pf-v6-c-data-list__cell.pf-m-truncate,
3458
- .pf-v6-c-data-list__text.pf-m-truncate {
3459
- --pf-v6-c-data-list--cell--MinWidth: var(--pf-v6-c-data-list--cell--m-truncate--MinWidth);
3460
- --pf-v6-c-data-list--cell--Overflow: hidden;
3461
- --pf-v6-c-data-list--cell--TextOverflow: ellipsis;
3462
- --pf-v6-c-data-list--cell--WhiteSpace: nowrap;
3392
+ .pf-v6-c-data-list__cell {
3393
+ flex: 1;
3394
+ grid-column: 1/-1;
3395
+ padding-block-start: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
3396
+ padding-block-end: var(--pf-v6-c-data-list__cell--PaddingBlockEnd);
3463
3397
  }
3464
3398
 
3465
- .pf-v6-c-data-list.pf-m-break-word,
3466
- .pf-v6-c-data-list__item-row.pf-m-break-word,
3467
- .pf-v6-c-data-list__cell.pf-m-break-word,
3468
- .pf-v6-c-data-list__text.pf-m-break-word {
3469
- --pf-v6-c-data-list--cell--WordBreak: break-word;
3399
+ .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
3400
+ flex: 1 0 100%;
3401
+ order: 1;
3402
+ padding-block-start: var(--pf-v6-c-data-list__cell--cell--PaddingBlockStart);
3470
3403
  }
3471
3404
 
3472
- .pf-v6-c-data-list.pf-m-nowrap,
3473
- .pf-v6-c-data-list__item-row.pf-m-nowrap,
3474
- .pf-v6-c-data-list__cell.pf-m-nowrap,
3475
- .pf-v6-c-data-list__text.pf-m-nowrap {
3476
- --pf-v6-c-data-list--cell--WhiteSpace: nowrap;
3405
+ .pf-v6-c-data-list__cell.pf-m-icon {
3406
+ flex-grow: 0;
3407
+ grid-column: 1/2;
3408
+ margin-inline-end: var(--pf-v6-c-data-list__cell--m-icon--MarginInlineEnd);
3477
3409
  }
3478
3410
 
3479
- .pf-v6-c-data-list__item {
3480
- position: relative;
3481
- display: flex;
3482
- flex-direction: column;
3483
- background-color: var(--pf-v6-c-data-list__item--BackgroundColor);
3484
- border-block-end: var(--pf-v6-c-data-list__item--BorderBlockEndWidth) solid var(--pf-v6-c-data-list__item--BorderBlockEndColor);
3411
+ .pf-v6-c-data-list__cell.pf-m-icon + .pf-v6-c-data-list__cell {
3412
+ grid-column: 2/3;
3413
+ padding-block-start: var(--pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart);
3485
3414
  }
3486
3415
 
3487
- .pf-v6-c-data-list__item.pf-m-clickable {
3488
- cursor: pointer;
3489
- outline-offset: var(--pf-v6-c-data-list__item--m-clickable--OutlineOffset);
3416
+ .pf-v6-c-data-list__cell.pf-m-align-right {
3417
+ margin-inline-start: 0;
3490
3418
  }
3491
3419
 
3492
- .pf-v6-c-data-list__item.pf-m-clickable:hover, .pf-v6-c-data-list__item.pf-m-clickable:focus {
3493
- background-color: var(--pf-v6-c-data-list__item--hover--BackgroundColor);
3420
+ .pf-v6-c-data-list__text {
3421
+ display: inline-block;
3494
3422
  }
3495
3423
 
3496
- .pf-v6-c-data-list__item.pf-m-selected {
3497
- background-color: var(--pf-v6-c-data-list__item--m-selected--BackgroundColor);
3424
+ .pf-v6-c-data-list__text,
3425
+ .pf-v6-c-data-list__cell {
3426
+ min-width: var(--pf-v6-c-data-list--cell--MinWidth);
3427
+ max-width: 100%;
3428
+ overflow: var(--pf-v6-c-data-list--cell--Overflow);
3429
+ text-overflow: var(--pf-v6-c-data-list--cell--TextOverflow);
3430
+ word-break: var(--pf-v6-c-data-list--cell--WordBreak);
3431
+ white-space: var(--pf-v6-c-data-list--cell--WhiteSpace);
3498
3432
  }
3499
3433
 
3500
- .pf-v6-c-data-list__item.pf-m-ghost-row::after {
3501
- position: absolute;
3502
- inset-block-start: 0;
3503
- inset-block-end: 0;
3504
- inset-inline-start: 0;
3505
- inset-inline-end: 0;
3506
- content: "";
3507
- background-color: var(--pf-v6-c-data-list__item--m-ghost-row--after--BackgroundColor);
3508
- opacity: var(--pf-v6-c-data-list__item--m-ghost-row--after--Opacity);
3434
+ .pf-v6-c-data-list__expandable-content {
3435
+ max-height: var(--pf-v6-c-data-list__expandable-content--MaxHeight);
3436
+ margin-block-end: var(--pf-v6-c-data-list__expandable-content--MarginBlockEnd);
3437
+ margin-inline-start: var(--pf-v6-c-data-list__expandable-content--MarginInlineStart);
3438
+ margin-inline-end: var(--pf-v6-c-data-list__expandable-content--MarginInlineEnd);
3439
+ overflow-y: auto;
3440
+ background-color: var(--pf-v6-c-data-list__expandable-content--BackgroundColor);
3441
+ border-radius: var(--pf-v6-c-data-list__expandable-content-body--BorderRadius);
3509
3442
  }
3510
3443
 
3511
- .pf-v6-c-data-list__item.pf-m-expanded {
3512
- --pf-v6-c-data-list__toggle-icon--Rotate: var(--pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate);
3444
+ .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body {
3445
+ padding-block-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockStart);
3446
+ padding-block-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd);
3447
+ padding-inline-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineStart);
3448
+ padding-inline-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd);
3513
3449
  }
3514
3450
 
3515
- .pf-v6-c-data-list__item-row {
3516
- display: flex;
3517
- flex-wrap: nowrap;
3518
- padding-inline-start: var(--pf-v6-c-data-list__item-row--PaddingInlineStart);
3519
- padding-inline-end: var(--pf-v6-c-data-list__item-row--PaddingInlineEnd);
3451
+ .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body > .pf-v6-c-data-list {
3452
+ margin-inline-start: var(--pf-v6-c-data-list--MarginInlineStart);
3453
+ }
3454
+
3455
+ .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item:last-child {
3456
+ border-block-end: 0;
3457
+ }
3458
+
3459
+ .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item-row {
3460
+ --pf-v6-c-data-list__item-row--PaddingInlineStart: 0;
3461
+ }
3462
+
3463
+ .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__expandable-content-body {
3464
+ --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: 0;
3465
+ }
3466
+
3467
+ .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body.pf-m-no-padding {
3468
+ padding: 0;
3469
+ }
3470
+
3471
+ :where(:root, .pf-v6-c-content) {
3472
+ --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
3473
+ --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
3474
+ --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
3475
+ --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
3476
+ --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
3477
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
3478
+ --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
3479
+ --pf-v6-c-content--h1--MarginBlockStart: var(--pf-t--global--spacer--lg);
3480
+ --pf-v6-c-content--h1--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3481
+ --pf-v6-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
3482
+ --pf-v6-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
3483
+ --pf-v6-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading--default);
3484
+ --pf-v6-c-content--h2--MarginBlockStart: var(--pf-t--global--spacer--lg);
3485
+ --pf-v6-c-content--h2--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3486
+ --pf-v6-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
3487
+ --pf-v6-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
3488
+ --pf-v6-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading--default);
3489
+ --pf-v6-c-content--h3--MarginBlockStart: var(--pf-t--global--spacer--lg);
3490
+ --pf-v6-c-content--h3--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3491
+ --pf-v6-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
3492
+ --pf-v6-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
3493
+ --pf-v6-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading--default);
3494
+ --pf-v6-c-content--h4--MarginBlockStart: var(--pf-t--global--spacer--lg);
3495
+ --pf-v6-c-content--h4--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3496
+ --pf-v6-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
3497
+ --pf-v6-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
3498
+ --pf-v6-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading--default);
3499
+ --pf-v6-c-content--h5--MarginBlockStart: var(--pf-t--global--spacer--lg);
3500
+ --pf-v6-c-content--h5--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3501
+ --pf-v6-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
3502
+ --pf-v6-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
3503
+ --pf-v6-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading--default);
3504
+ --pf-v6-c-content--h6--MarginBlockStart: var(--pf-t--global--spacer--lg);
3505
+ --pf-v6-c-content--h6--MarginBlockEnd: var(--pf-t--global--spacer--sm);
3506
+ --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
3507
+ --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
3508
+ --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
3509
+ --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
3510
+ --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
3511
+ --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
3512
+ --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
3513
+ --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
3514
+ --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
3515
+ --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
3516
+ --pf-v6-c-content--a--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
3517
+ --pf-v6-c-content--a--hover--Color: var(--pf-t--global--text--color--link--hover);
3518
+ --pf-v6-c-content--a--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
3519
+ --pf-v6-c-content--a--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
3520
+ --pf-v6-c-content--a--visited--Color: var(--pf-t--global--text--color--link--visited);
3521
+ --pf-v6-c-content--blockquote--PaddingBlockStart: var(--pf-t--global--spacer--md);
3522
+ --pf-v6-c-content--blockquote--PaddingInlineEnd: var(--pf-t--global--spacer--md);
3523
+ --pf-v6-c-content--blockquote--PaddingBlockEnd: var(--pf-t--global--spacer--md);
3524
+ --pf-v6-c-content--blockquote--PaddingInlineStart: var(--pf-t--global--spacer--md);
3525
+ --pf-v6-c-content--blockquote--Color: var(--pf-t--global--text--color--subtle);
3526
+ --pf-v6-c-content--blockquote--BorderInlineStartColor: var(--pf-t--global--border--color--default);
3527
+ --pf-v6-c-content--blockquote--BorderInlineStartWidth: var(--pf-t--global--border--width--300);
3528
+ --pf-v6-c-content--list--Gap: var(--pf-t--global--spacer--sm);
3529
+ --pf-v6-c-content--list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3530
+ --pf-v6-c-content--list--nested--MarginBlockStart: var(--pf-v6-c-content--list--Gap);
3531
+ --pf-v6-c-content--ul--ListStyle: var(--pf-t--global--list-style);
3532
+ --pf-v6-c-content--dl--ColumnGap: var(--pf-t--global--spacer--2xl);
3533
+ --pf-v6-c-content--dl--RowGap: var(--pf-t--global--spacer--md);
3534
+ --pf-v6-c-content--dt--FontWeight: var(--pf-t--global--font--weight--body--bold);
3535
+ --pf-v6-c-content--dt--MarginBlockStart: var(--pf-t--global--spacer--md);
3536
+ --pf-v6-c-content--dt--sm--MarginBlockStart: 0;
3537
+ --pf-v6-c-content--hr--Height: var(--pf-t--global--border--width--divider--default);
3538
+ --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
3520
3539
  }
3521
3540
 
3522
- .pf-v6-c-data-list__item-control {
3523
- display: flex;
3524
- flex-wrap: nowrap;
3525
- padding-block-start: var(--pf-v6-c-data-list__item-control--PaddingBlockStart);
3526
- padding-block-end: var(--pf-v6-c-data-list__item-control--PaddingBlockEnd);
3527
- margin-inline-end: var(--pf-v6-c-data-list__item-control--MarginInlineEnd);
3541
+ [class*=pf-v6-c-content] {
3542
+ font-size: var(--pf-v6-c-content--FontSize);
3543
+ line-height: var(--pf-v6-c-content--LineHeight);
3544
+ color: var(--pf-v6-c-content--Color);
3528
3545
  }
3529
3546
 
3530
- .pf-v6-c-data-list__item-control > *:not(:last-child) {
3531
- margin-inline-end: var(--pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd);
3547
+ [class*=pf-v6-c-content].pf-m-editorial {
3548
+ --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize);
3549
+ --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize);
3532
3550
  }
3533
3551
 
3534
- .pf-v6-c-data-list__check {
3535
- display: flex;
3536
- align-items: center;
3537
- align-self: flex-start;
3538
- height: var(--pf-v6-c-data-list__check--Height);
3539
- margin-block-start: var(--pf-v6-c-data-list__check--MarginBlockStart);
3552
+ :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
3553
+ color: var(--pf-v6-c-content--a--Color);
3554
+ text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
3540
3555
  }
3541
3556
 
3542
- .pf-v6-c-data-list__check > input {
3543
- cursor: pointer;
3557
+ :is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
3558
+ --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
3559
+ --pf-v6-c-content--a--TextDecorationLine: var(--pf-v6-c-content--a--hover--TextDecorationLine);
3560
+ --pf-v6-c-content--a--TextDecorationStyle: var(--pf-v6-c-content--a--hover--TextDecorationStyle);
3544
3561
  }
3545
3562
 
3546
- .pf-v6-c-data-list__item-draggable-button {
3547
- display: flex;
3548
- flex-direction: column;
3549
- padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
3550
- padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
3551
- padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
3552
- padding-inline-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd);
3553
- margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
3554
- margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
3555
- margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
3556
- background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
3557
- border: 0;
3563
+ :is(.pf-v6-c-content--a.pf-m-visited, .pf-v6-c-content.pf-m-visited a, .pf-v6-c-content a.pf-m-visited):visited {
3564
+ color: var(--pf-v6-c-content--a--visited--Color);
3558
3565
  }
3559
3566
 
3560
- .pf-v6-c-data-list__item-draggable-button:hover {
3561
- --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color);
3562
- cursor: grab;
3567
+ :is(.pf-v6-c-content--li + .pf-v6-c-content--li, .pf-v6-c-content li + li) {
3568
+ margin-block-start: var(--pf-v6-c-content--li--MarginBlockStart);
3563
3569
  }
3564
3570
 
3565
- .pf-v6-c-data-list__item-draggable-button:focus {
3566
- --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color);
3571
+ :is(.pf-v6-c-content--p,
3572
+ .pf-v6-c-content--dl,
3573
+ .pf-v6-c-content--ol,
3574
+ .pf-v6-c-content--ul,
3575
+ .pf-v6-c-content--blockquote,
3576
+ .pf-v6-c-content--small,
3577
+ .pf-v6-c-content--pre,
3578
+ .pf-v6-c-content--table,
3579
+ .pf-v6-c-content--hr, .pf-v6-c-content p, .pf-v6-c-content dl, .pf-v6-c-content ol, .pf-v6-c-content ul, .pf-v6-c-content blockquote, .pf-v6-c-content small, .pf-v6-c-content pre, .pf-v6-c-content table, .pf-v6-c-content hr):not(:last-child) {
3580
+ margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
3567
3581
  }
3568
3582
 
3569
- .pf-v6-c-data-list__item-draggable-button:active {
3570
- cursor: grabbing;
3583
+ :is(.pf-v6-c-content--h1,
3584
+ .pf-v6-c-content--h2,
3585
+ .pf-v6-c-content--h3,
3586
+ .pf-v6-c-content--h4,
3587
+ .pf-v6-c-content--h5,
3588
+ .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6) {
3589
+ margin: 0;
3590
+ font-family: var(--pf-v6-c-content--heading--FontFamily);
3571
3591
  }
3572
3592
 
3573
- .pf-v6-c-data-list__item-draggable-button.pf-m-disabled {
3574
- --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
3575
- pointer-events: none;
3593
+ :is(.pf-v6-c-content--h1,
3594
+ .pf-v6-c-content--h2,
3595
+ .pf-v6-c-content--h3,
3596
+ .pf-v6-c-content--h4,
3597
+ .pf-v6-c-content--h5,
3598
+ .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):first-child {
3599
+ margin-block-start: 0;
3576
3600
  }
3577
3601
 
3578
- .pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon {
3579
- color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color);
3602
+ :is(.pf-v6-c-content--h1,
3603
+ .pf-v6-c-content--h2,
3604
+ .pf-v6-c-content--h3,
3605
+ .pf-v6-c-content--h4,
3606
+ .pf-v6-c-content--h5,
3607
+ .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
3608
+ margin-block-end: 0;
3580
3609
  }
3581
3610
 
3582
- .pf-v6-c-data-list__item-action {
3583
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-data-list__item-action--Display);
3584
- --pf-v6-hidden-visible--hidden--Display: none;
3585
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3586
- display: var(--pf-v6-hidden-visible--Display);
3587
- gap: var(--pf-v6-c-data-list__item-action--Gap);
3588
- align-content: flex-start;
3589
- align-items: flex-start;
3590
- padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingBlockStart);
3591
- padding-block-end: var(--pf-v6-c-data-list__item-action--PaddingBlockEnd);
3592
- margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
3611
+ :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
3612
+ margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);
3613
+ margin-block-end: var(--pf-v6-c-content--h1--MarginBlockEnd);
3614
+ font-size: var(--pf-v6-c-content--h1--FontSize);
3615
+ font-weight: var(--pf-v6-c-content--h1--FontWeight);
3616
+ line-height: var(--pf-v6-c-content--h1--LineHeight);
3593
3617
  }
3594
3618
 
3595
- .pf-v6-c-data-list__item-action.pf-m-hidden {
3596
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3619
+ :is(.pf-v6-c-content--h2, .pf-v6-c-content h2) {
3620
+ margin-block-start: var(--pf-v6-c-content--h2--MarginBlockStart);
3621
+ margin-block-end: var(--pf-v6-c-content--h2--MarginBlockEnd);
3622
+ font-size: var(--pf-v6-c-content--h2--FontSize);
3623
+ font-weight: var(--pf-v6-c-content--h2--FontWeight);
3624
+ line-height: var(--pf-v6-c-content--h2--LineHeight);
3597
3625
  }
3598
3626
 
3599
- @media screen and (min-width: 36rem) {
3600
- .pf-v6-c-data-list__item-action.pf-m-hidden-on-sm {
3601
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3602
- }
3603
- .pf-v6-c-data-list__item-action.pf-m-visible-on-sm {
3604
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3605
- }
3606
- }
3607
- @media screen and (min-width: 48rem) {
3608
- .pf-v6-c-data-list__item-action.pf-m-hidden-on-md {
3609
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3610
- }
3611
- .pf-v6-c-data-list__item-action.pf-m-visible-on-md {
3612
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3613
- }
3614
- }
3615
- @media screen and (min-width: 62rem) {
3616
- .pf-v6-c-data-list__item-action.pf-m-hidden-on-lg {
3617
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3618
- }
3619
- .pf-v6-c-data-list__item-action.pf-m-visible-on-lg {
3620
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3621
- }
3622
- }
3623
- @media screen and (min-width: 75rem) {
3624
- .pf-v6-c-data-list__item-action.pf-m-hidden-on-xl {
3625
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3626
- }
3627
- .pf-v6-c-data-list__item-action.pf-m-visible-on-xl {
3628
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3629
- }
3630
- }
3631
- @media screen and (min-width: 90.625rem) {
3632
- .pf-v6-c-data-list__item-action.pf-m-hidden-on-2xl {
3633
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
3634
- }
3635
- .pf-v6-c-data-list__item-action.pf-m-visible-on-2xl {
3636
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
3637
- }
3638
- }
3639
- .pf-v6-c-data-list__action {
3640
- margin-block-start: var(--pf-v6-c-data-list__action--MarginBlockStart);
3641
- margin-block-end: var(--pf-v6-c-data-list__action--MarginBlockEnd);
3627
+ :is(.pf-v6-c-content--h3, .pf-v6-c-content h3) {
3628
+ margin-block-start: var(--pf-v6-c-content--h3--MarginBlockStart);
3629
+ margin-block-end: var(--pf-v6-c-content--h3--MarginBlockEnd);
3630
+ font-size: var(--pf-v6-c-content--h3--FontSize);
3631
+ font-weight: var(--pf-v6-c-content--h3--FontWeight);
3632
+ line-height: var(--pf-v6-c-content--h3--LineHeight);
3642
3633
  }
3643
3634
 
3644
- .pf-v6-c-data-list__toggle {
3645
- margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
3646
- margin-block-end: var(--pf-v6-c-data-list__toggle--MarginBlockEnd);
3647
- margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
3635
+ :is(.pf-v6-c-content--h4, .pf-v6-c-content h4) {
3636
+ margin-block-start: var(--pf-v6-c-content--h4--MarginBlockStart);
3637
+ margin-block-end: var(--pf-v6-c-content--h4--MarginBlockEnd);
3638
+ font-size: var(--pf-v6-c-content--h4--FontSize);
3639
+ font-weight: var(--pf-v6-c-content--h4--FontWeight);
3640
+ line-height: var(--pf-v6-c-content--h4--LineHeight);
3648
3641
  }
3649
3642
 
3650
- .pf-v6-c-data-list__toggle-icon {
3651
- height: var(--pf-v6-c-data-list__toggle-icon--Height);
3652
- pointer-events: none;
3653
- transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
3654
- transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
3643
+ :is(.pf-v6-c-content--h5, .pf-v6-c-content h5) {
3644
+ margin-block-start: var(--pf-v6-c-content--h5--MarginBlockStart);
3645
+ margin-block-end: var(--pf-v6-c-content--h5--MarginBlockEnd);
3646
+ font-size: var(--pf-v6-c-content--h5--FontSize);
3647
+ font-weight: var(--pf-v6-c-content--h5--FontWeight);
3648
+ line-height: var(--pf-v6-c-content--h5--LineHeight);
3655
3649
  }
3656
3650
 
3657
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
3658
- scale: -1 1;
3651
+ :is(.pf-v6-c-content--h6, .pf-v6-c-content h6) {
3652
+ margin-block-start: var(--pf-v6-c-content--h6--MarginBlockStart);
3653
+ margin-block-end: var(--pf-v6-c-content--h6--MarginBlockEnd);
3654
+ font-size: var(--pf-v6-c-content--h6--FontSize);
3655
+ font-weight: var(--pf-v6-c-content--h6--FontWeight);
3656
+ line-height: var(--pf-v6-c-content--h6--LineHeight);
3659
3657
  }
3660
3658
 
3661
- .pf-v6-c-data-list__item-content {
3662
- display: grid;
3663
- grid-template-columns: auto 1fr;
3664
- width: 100%;
3659
+ :is(.pf-v6-c-content--small, .pf-v6-c-content small) {
3660
+ display: block;
3661
+ font-size: var(--pf-v6-c-content--small--FontSize);
3662
+ line-height: var(--pf-v6-c-content--small--LineHeight);
3663
+ color: var(--pf-v6-c-content--small--Color);
3665
3664
  }
3666
3665
 
3667
- .pf-v6-c-data-list__cell {
3668
- flex: 1;
3669
- grid-column: 1/-1;
3670
- padding-block-start: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
3671
- padding-block-end: var(--pf-v6-c-data-list__cell--PaddingBlockEnd);
3666
+ :is(.pf-v6-c-content--small, .pf-v6-c-content small):not(:last-child) {
3667
+ margin-block-end: var(--pf-v6-c-content--small--MarginBlockEnd);
3672
3668
  }
3673
3669
 
3674
- .pf-v6-c-data-list__cell + .pf-v6-c-data-list__cell {
3675
- flex: 1 0 100%;
3676
- order: 1;
3677
- padding-block-start: var(--pf-v6-c-data-list__cell--cell--PaddingBlockStart);
3670
+ :is(.pf-v6-c-content--blockquote, .pf-v6-c-content blockquote) {
3671
+ padding-block-start: var(--pf-v6-c-content--blockquote--PaddingBlockStart);
3672
+ padding-block-end: var(--pf-v6-c-content--blockquote--PaddingBlockEnd);
3673
+ padding-inline-start: var(--pf-v6-c-content--blockquote--PaddingInlineStart);
3674
+ padding-inline-end: var(--pf-v6-c-content--blockquote--PaddingInlineEnd);
3675
+ color: var(--pf-v6-c-content--blockquote--Color);
3676
+ border-inline-start: var(--pf-v6-c-content--blockquote--BorderInlineStartWidth) solid var(--pf-v6-c-content--blockquote--BorderInlineStartColor);
3678
3677
  }
3679
3678
 
3680
- .pf-v6-c-data-list__cell.pf-m-icon {
3681
- flex-grow: 0;
3682
- grid-column: 1/2;
3683
- margin-inline-end: var(--pf-v6-c-data-list__cell--m-icon--MarginInlineEnd);
3679
+ :is(.pf-v6-c-content--hr, .pf-v6-c-content hr) {
3680
+ height: var(--pf-v6-c-content--hr--Height);
3681
+ background-color: var(--pf-v6-c-content--hr--BackgroundColor);
3682
+ border: none;
3684
3683
  }
3685
3684
 
3686
- .pf-v6-c-data-list__cell.pf-m-icon + .pf-v6-c-data-list__cell {
3687
- grid-column: 2/3;
3688
- padding-block-start: var(--pf-v6-c-data-list__cell--m-icon--cell--PaddingBlockStart);
3685
+ :is(.pf-v6-c-content--ol,
3686
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) {
3687
+ display: flex;
3688
+ flex-direction: column;
3689
+ gap: var(--pf-v6-c-content--list--Gap);
3690
+ padding-inline-start: var(--pf-v6-c-content--list--PaddingInlineStart);
3689
3691
  }
3690
3692
 
3691
- .pf-v6-c-data-list__cell.pf-m-align-right {
3692
- margin-inline-start: 0;
3693
+ :is(.pf-v6-c-content--ol,
3694
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul).pf-m-plain {
3695
+ padding-inline-start: 0;
3696
+ list-style: none;
3693
3697
  }
3694
3698
 
3695
- .pf-v6-c-data-list__text {
3696
- display: inline-block;
3699
+ :is(.pf-v6-c-content--ol,
3700
+ .pf-v6-c-content--ul, .pf-v6-c-content ol, .pf-v6-c-content ul) :is(.pf-v6-c-content--ol,
3701
+ .pf-v6-c-content--ul,
3702
+ ol,
3703
+ ul) {
3704
+ margin-block-start: var(--pf-v6-c-content--list--nested--MarginBlockStart);
3697
3705
  }
3698
3706
 
3699
- .pf-v6-c-data-list__text,
3700
- .pf-v6-c-data-list__cell {
3701
- min-width: var(--pf-v6-c-data-list--cell--MinWidth);
3702
- max-width: 100%;
3703
- overflow: var(--pf-v6-c-data-list--cell--Overflow);
3704
- text-overflow: var(--pf-v6-c-data-list--cell--TextOverflow);
3705
- word-break: var(--pf-v6-c-data-list--cell--WordBreak);
3706
- white-space: var(--pf-v6-c-data-list--cell--WhiteSpace);
3707
+ :is(.pf-v6-c-content--ul, .pf-v6-c-content ul) {
3708
+ list-style: var(--pf-v6-c-content--ul--ListStyle);
3707
3709
  }
3708
3710
 
3709
- .pf-v6-c-data-list__expandable-content {
3710
- max-height: var(--pf-v6-c-data-list__expandable-content--MaxHeight);
3711
- margin-block-end: var(--pf-v6-c-data-list__expandable-content--MarginBlockEnd);
3712
- margin-inline-start: var(--pf-v6-c-data-list__expandable-content--MarginInlineStart);
3713
- margin-inline-end: var(--pf-v6-c-data-list__expandable-content--MarginInlineEnd);
3714
- overflow-y: auto;
3715
- background-color: var(--pf-v6-c-data-list__expandable-content--BackgroundColor);
3716
- border-radius: var(--pf-v6-c-data-list__expandable-content-body--BorderRadius);
3711
+ :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
3712
+ display: grid;
3713
+ grid-template-columns: 1fr;
3717
3714
  }
3718
3715
 
3719
- .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body {
3720
- padding-block-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockStart);
3721
- padding-block-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingBlockEnd);
3722
- padding-inline-start: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineStart);
3723
- padding-inline-end: var(--pf-v6-c-data-list__expandable-content-body--PaddingInlineEnd);
3716
+ @media screen and (min-width: 36rem) {
3717
+ :is(.pf-v6-c-content--dl, .pf-v6-c-content dl) {
3718
+ grid-template: auto/auto 1fr;
3719
+ grid-row-gap: var(--pf-v6-c-content--dl--RowGap);
3720
+ grid-column-gap: var(--pf-v6-c-content--dl--ColumnGap);
3721
+ }
3724
3722
  }
3725
-
3726
- .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body > .pf-v6-c-data-list {
3727
- margin-inline-start: var(--pf-v6-c-data-list--MarginInlineStart);
3723
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
3724
+ font-weight: var(--pf-v6-c-content--dt--FontWeight);
3728
3725
  }
3729
3726
 
3730
- .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item:last-child {
3731
- border-block-end: 0;
3727
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
3728
+ margin-block-start: var(--pf-v6-c-content--dt--MarginBlockStart);
3732
3729
  }
3733
3730
 
3734
- .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__item-row {
3735
- --pf-v6-c-data-list__item-row--PaddingInlineStart: 0;
3731
+ @media screen and (min-width: 36rem) {
3732
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt):not(:first-child) {
3733
+ --pf-v6-c-content--dt--MarginBlockStart: var(--pf-v6-c-content--dt--sm--MarginBlockStart);
3734
+ }
3736
3735
  }
3737
-
3738
- .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body .pf-v6-c-data-list__expandable-content-body {
3739
- --pf-v6-c-data-list__expandable-content-body--PaddingInlineStart: 0;
3736
+ @media screen and (min-width: 36rem) {
3737
+ :is(.pf-v6-c-content--dt, .pf-v6-c-content dt) {
3738
+ grid-column: 1;
3739
+ }
3740
3740
  }
3741
-
3742
- .pf-v6-c-data-list__expandable-content .pf-v6-c-data-list__expandable-content-body.pf-m-no-padding {
3743
- padding: 0;
3741
+ @media screen and (min-width: 36rem) {
3742
+ :is(.pf-v6-c-content--dd, .pf-v6-c-content dd) {
3743
+ grid-column: 2;
3744
+ }
3744
3745
  }
3745
-
3746
3746
  :where(:root, .pf-v6-c-description-list) {
3747
3747
  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
3748
3748
  --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
@@ -6573,6 +6573,84 @@ ul) {
6573
6573
  margin-block-end: var(--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd);
6574
6574
  }
6575
6575
 
6576
+ :where(:root, .pf-v6-c-helper-text) {
6577
+ --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
6578
+ --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
6579
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
6580
+ --pf-v6-c-helper-text__item-text--Color: var(--pf-t--global--text--color--regular);
6581
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-t--global--font--weight--body--default);
6582
+ --pf-v6-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
6583
+ --pf-v6-c-helper-text__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
6584
+ --pf-v6-c-helper-text__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
6585
+ --pf-v6-c-helper-text__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
6586
+ --pf-v6-c-helper-text__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
6587
+ --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
6588
+ --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
6589
+ --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
6590
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
6591
+ --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
6592
+ --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
6593
+ --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
6594
+ --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6595
+ --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
6596
+ --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
6597
+ --pf-v6-c-helper-text__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
6598
+ }
6599
+
6600
+ .pf-v6-c-helper-text {
6601
+ display: grid;
6602
+ gap: var(--pf-v6-c-helper-text--Gap);
6603
+ font-size: var(--pf-v6-c-helper-text--FontSize);
6604
+ }
6605
+
6606
+ .pf-v6-c-helper-text.pf-m-hidden {
6607
+ visibility: hidden;
6608
+ opacity: 0;
6609
+ }
6610
+
6611
+ .pf-v6-c-helper-text__item {
6612
+ display: flex;
6613
+ font-weight: var(--pf-v6-c-helper-text__item-text--FontWeight);
6614
+ }
6615
+
6616
+ .pf-v6-c-helper-text__item.pf-m-indeterminate {
6617
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-indeterminate--Color);
6618
+ --pf-v6-c-helper-text__item-text--Color: var(--pf-v6-c-helper-text__item-text--m-indeterminate--Color);
6619
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color);
6620
+ --pf-v6-c-helper-text--m-dynamic__item-text--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
6621
+ }
6622
+
6623
+ .pf-v6-c-helper-text__item.pf-m-warning {
6624
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-warning--FontWeight);
6625
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-warning--Color);
6626
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color);
6627
+ }
6628
+
6629
+ .pf-v6-c-helper-text__item.pf-m-success {
6630
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-success--FontWeight);
6631
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-success--Color);
6632
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color);
6633
+ }
6634
+
6635
+ .pf-v6-c-helper-text__item.pf-m-error {
6636
+ --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
6637
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
6638
+ --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
6639
+ }
6640
+
6641
+ .pf-v6-c-helper-text__item.pf-m-dynamic {
6642
+ --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
6643
+ }
6644
+
6645
+ .pf-v6-c-helper-text__item-icon {
6646
+ margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginInlineEnd);
6647
+ color: var(--pf-v6-c-helper-text__item-icon--Color);
6648
+ }
6649
+
6650
+ .pf-v6-c-helper-text__item-text {
6651
+ color: var(--pf-v6-c-helper-text__item-text--Color);
6652
+ }
6653
+
6576
6654
  :where(:root, .pf-v6-c-form-control) {
6577
6655
  --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
6578
6656
  --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
@@ -6819,134 +6897,56 @@ ul) {
6819
6897
  .pf-v6-c-form-control > textarea {
6820
6898
  width: 100%;
6821
6899
  height: 100%;
6822
- vertical-align: bottom;
6823
- resize: none;
6824
- }
6825
-
6826
- .pf-v6-c-form-control.pf-m-resize-vertical {
6827
- --pf-v6-c-form-control--Resize: vertical;
6828
- overflow: auto;
6829
- }
6830
-
6831
- .pf-v6-c-form-control.pf-m-resize-horizontal {
6832
- --pf-v6-c-form-control--Resize: horizontal;
6833
- overflow: auto;
6834
- }
6835
-
6836
- .pf-v6-c-form-control.pf-m-resize-both {
6837
- --pf-v6-c-form-control--Resize: both;
6838
- overflow: auto;
6839
- }
6840
-
6841
- .pf-v6-c-form-control__icon {
6842
- font-size: var(--pf-v6-c-form-control__icon--FontSize);
6843
- color: var(--pf-v6-c-form-control__icon--Color);
6844
- }
6845
-
6846
- .pf-v6-c-form-control__icon.pf-m-status {
6847
- --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color);
6848
- }
6849
-
6850
- .pf-v6-c-form-control__toggle-icon {
6851
- grid-row: 1/2;
6852
- grid-column: 3;
6853
- padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
6854
- padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
6855
- color: var(--pf-v6-c-form-control__toggle-icon--Color);
6856
- pointer-events: none;
6857
- }
6858
-
6859
- .pf-v6-c-form-control__utilities {
6860
- display: flex;
6861
- flex-wrap: nowrap;
6862
- grid-row: 1/2;
6863
- grid-column: 2;
6864
- gap: var(--pf-v6-c-form-control__utilities--Gap);
6865
- padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
6866
- padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
6867
- pointer-events: none;
6868
- }
6869
-
6870
- select ~ .pf-v6-c-form-control__utilities {
6871
- --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
6872
- }
6873
-
6874
- :where(:root, .pf-v6-c-helper-text) {
6875
- --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
6876
- --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
6877
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
6878
- --pf-v6-c-helper-text__item-text--Color: var(--pf-t--global--text--color--regular);
6879
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-t--global--font--weight--body--default);
6880
- --pf-v6-c-helper-text__item-icon--m-indeterminate--Color: var(--pf-t--global--icon--color--subtle);
6881
- --pf-v6-c-helper-text__item-text--m-indeterminate--Color: var(--pf-t--global--text--color--subtle);
6882
- --pf-v6-c-helper-text__item-icon--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
6883
- --pf-v6-c-helper-text__item-text--m-warning--FontWeight: var(--pf-t--global--font--weight--body--bold);
6884
- --pf-v6-c-helper-text__item-icon--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
6885
- --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
6886
- --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
6887
- --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
6888
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
6889
- --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
6890
- --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
6891
- --pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
6892
- --pf-v6-c-helper-text--m-dynamic--m-warning__item-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
6893
- --pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color: var(--pf-t--global--icon--color--status--success--default);
6894
- --pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
6895
- --pf-v6-c-helper-text__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
6896
- }
6897
-
6898
- .pf-v6-c-helper-text {
6899
- display: grid;
6900
- gap: var(--pf-v6-c-helper-text--Gap);
6901
- font-size: var(--pf-v6-c-helper-text--FontSize);
6902
- }
6903
-
6904
- .pf-v6-c-helper-text.pf-m-hidden {
6905
- visibility: hidden;
6906
- opacity: 0;
6900
+ vertical-align: bottom;
6901
+ resize: none;
6907
6902
  }
6908
6903
 
6909
- .pf-v6-c-helper-text__item {
6910
- display: flex;
6911
- font-weight: var(--pf-v6-c-helper-text__item-text--FontWeight);
6904
+ .pf-v6-c-form-control.pf-m-resize-vertical {
6905
+ --pf-v6-c-form-control--Resize: vertical;
6906
+ overflow: auto;
6912
6907
  }
6913
6908
 
6914
- .pf-v6-c-helper-text__item.pf-m-indeterminate {
6915
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-indeterminate--Color);
6916
- --pf-v6-c-helper-text__item-text--Color: var(--pf-v6-c-helper-text__item-text--m-indeterminate--Color);
6917
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color);
6918
- --pf-v6-c-helper-text--m-dynamic__item-text--Color: var(--pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color);
6909
+ .pf-v6-c-form-control.pf-m-resize-horizontal {
6910
+ --pf-v6-c-form-control--Resize: horizontal;
6911
+ overflow: auto;
6919
6912
  }
6920
6913
 
6921
- .pf-v6-c-helper-text__item.pf-m-warning {
6922
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-warning--FontWeight);
6923
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-warning--Color);
6924
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-warning__item-icon--Color);
6914
+ .pf-v6-c-form-control.pf-m-resize-both {
6915
+ --pf-v6-c-form-control--Resize: both;
6916
+ overflow: auto;
6925
6917
  }
6926
6918
 
6927
- .pf-v6-c-helper-text__item.pf-m-success {
6928
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-success--FontWeight);
6929
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-success--Color);
6930
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-success__item-icon--Color);
6919
+ .pf-v6-c-form-control__icon {
6920
+ font-size: var(--pf-v6-c-form-control__icon--FontSize);
6921
+ color: var(--pf-v6-c-form-control__icon--Color);
6931
6922
  }
6932
6923
 
6933
- .pf-v6-c-helper-text__item.pf-m-error {
6934
- --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
6935
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
6936
- --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
6924
+ .pf-v6-c-form-control__icon.pf-m-status {
6925
+ --pf-v6-c-form-control__icon--Color: var(--pf-v6-c-form-control__icon--m-status--Color);
6937
6926
  }
6938
6927
 
6939
- .pf-v6-c-helper-text__item.pf-m-dynamic {
6940
- --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
6928
+ .pf-v6-c-form-control__toggle-icon {
6929
+ grid-row: 1/2;
6930
+ grid-column: 3;
6931
+ padding-inline-start: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart);
6932
+ padding-inline-end: var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd);
6933
+ color: var(--pf-v6-c-form-control__toggle-icon--Color);
6934
+ pointer-events: none;
6941
6935
  }
6942
6936
 
6943
- .pf-v6-c-helper-text__item-icon {
6944
- margin-inline-end: var(--pf-v6-c-helper-text__item-icon--MarginInlineEnd);
6945
- color: var(--pf-v6-c-helper-text__item-icon--Color);
6937
+ .pf-v6-c-form-control__utilities {
6938
+ display: flex;
6939
+ flex-wrap: nowrap;
6940
+ grid-row: 1/2;
6941
+ grid-column: 2;
6942
+ gap: var(--pf-v6-c-form-control__utilities--Gap);
6943
+ padding-block-start: var(--pf-v6-c-form-control__utilities--PaddingBlockStart);
6944
+ padding-inline-end: var(--pf-v6-c-form-control__utilities--PaddingInlineEnd);
6945
+ pointer-events: none;
6946
6946
  }
6947
6947
 
6948
- .pf-v6-c-helper-text__item-text {
6949
- color: var(--pf-v6-c-helper-text__item-text--Color);
6948
+ select ~ .pf-v6-c-form-control__utilities {
6949
+ --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
6950
6950
  }
6951
6951
 
6952
6952
  :where(:root, .pf-v6-c-hint) {
@@ -11445,627 +11445,261 @@ ul.pf-v6-c-list {
11445
11445
  --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
11446
11446
  --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
11447
11447
  --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
11448
- --pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11449
- --pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
11450
- --pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11451
- --pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--success--default);
11452
- --pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor: var(--pf-t--global--border--color--status--success--default);
11453
- --pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
11454
- --pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor: var(--pf-t--global--border--color--status--custom--default);
11455
- --pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11456
- --pf-v6-c-notification-drawer__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
11457
- --pf-v6-c-notification-drawer__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
11458
- --pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
11459
- --pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
11460
- --pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
11461
- --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
11462
- --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
11463
- --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
11464
- --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
11465
- --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
11466
- --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
11467
- --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
11468
- --pf-v6-c-notification-drawer__group--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
11469
- --pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
11470
- --pf-v6-c-notification-drawer__group--m-expanded--MinHeight: 0;
11471
- --pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11472
- --pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
11473
- --pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11474
- --pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11475
- --pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11476
- --pf-v6-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11477
- --pf-v6-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
11478
- --pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd: var(--pf-t--global--spacer--md);
11479
- --pf-v6-c-notification-drawer__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
11480
- --pf-v6-c-notification-drawer__group-toggle-title--max-lines: 1;
11481
- --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
11482
- --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
11483
- --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
11484
- --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
11485
- --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
11486
- }
11487
-
11488
- .pf-v6-c-notification-drawer {
11489
- display: flex;
11490
- flex-direction: column;
11491
- height: 100%;
11492
- background-color: var(--pf-v6-c-notification-drawer--BackgroundColor);
11493
- }
11494
-
11495
- .pf-v6-c-notification-drawer__header {
11496
- position: relative;
11497
- z-index: var(--pf-v6-c-notification-drawer__header--ZIndex);
11498
- display: flex;
11499
- flex-shrink: 0;
11500
- align-items: baseline;
11501
- padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingBlockStart);
11502
- padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBlockEnd);
11503
- padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingInlineStart);
11504
- padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingInlineEnd);
11505
- background-color: var(--pf-v6-c-notification-drawer__header--BackgroundColor);
11506
- }
11507
-
11508
- .pf-v6-c-notification-drawer__header-title {
11509
- font-family: var(--pf-v6-c-notification-drawer__header-title--FontFamily);
11510
- font-size: var(--pf-v6-c-notification-drawer__header-title--FontSize);
11511
- font-weight: var(--pf-v6-c-notification-drawer__header-title--FontWeight);
11512
- line-height: var(--pf-v6-c-notification-drawer__header-title--LineHeight);
11513
- }
11514
-
11515
- .pf-v6-c-notification-drawer__header-status {
11516
- margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginInlineStart);
11517
- font-size: var(--pf-v6-c-notification-drawer__header-status--FontSize);
11518
- font-weight: var(--pf-v6-c-notification-drawer__header-status--FontWeight);
11519
- color: var(--pf-v6-c-notification-drawer__header-status--Color);
11520
- }
11521
-
11522
- .pf-v6-c-notification-drawer__header-action {
11523
- display: flex;
11524
- align-items: center;
11525
- margin-inline-start: auto;
11526
- }
11527
-
11528
- .pf-v6-c-notification-drawer__body {
11529
- flex: 1;
11530
- padding-block-start: var(--pf-v6-c-notification-drawer__body--PaddingBlockStart);
11531
- padding-block-end: var(--pf-v6-c-notification-drawer__body--PaddingBlockEnd);
11532
- overflow-y: auto;
11533
- }
11534
-
11535
- .pf-v6-c-notification-drawer__list:not([hidden]) {
11536
- display: flex;
11537
- flex-direction: column;
11538
- gap: var(--pf-v6-c-notification-drawer__list--Gap);
11539
- padding-inline-start: var(--pf-v6-c-notification-drawer__list--PaddingInlineStart);
11540
- padding-inline-end: var(--pf-v6-c-notification-drawer__list--PaddingInlineEnd);
11541
- }
11542
-
11543
- .pf-v6-c-notification-drawer__list-item {
11544
- position: relative;
11545
- display: grid;
11546
- grid-template-columns: 1fr auto;
11547
- padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockStart);
11548
- padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
11549
- padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
11550
- padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
11551
- background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
11552
- border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
11553
- border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
11554
- }
11555
-
11556
- .pf-v6-c-notification-drawer__list-item.pf-m-info {
11557
- --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
11558
- --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
11559
- }
11560
-
11561
- .pf-v6-c-notification-drawer__list-item.pf-m-warning {
11562
- --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor);
11563
- --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
11564
- }
11565
-
11566
- .pf-v6-c-notification-drawer__list-item.pf-m-danger {
11567
- --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor);
11568
- --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
11569
- }
11570
-
11571
- .pf-v6-c-notification-drawer__list-item.pf-m-success {
11572
- --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor);
11573
- --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
11574
- }
11575
-
11576
- .pf-v6-c-notification-drawer__list-item.pf-m-custom {
11577
- --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor);
11578
- --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
11579
- }
11580
-
11581
- .pf-v6-c-notification-drawer__list-item.pf-m-read {
11582
- --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
11583
- --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
11584
- --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
11585
- position: relative;
11586
- }
11587
-
11588
- .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
11589
- cursor: pointer;
11590
- }
11591
-
11592
- .pf-v6-c-notification-drawer__list-item.pf-m-hoverable:hover, .pf-v6-c-notification-drawer__list-item.pf-m-hoverable:focus {
11593
- background-color: var(--pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor);
11594
- }
11595
-
11596
- .pf-v6-c-notification-drawer__list-item-header {
11597
- display: flex;
11598
- grid-row: 1/2;
11599
- grid-column: 1/2;
11600
- align-items: baseline;
11601
- margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd);
11602
- }
11603
-
11604
- .pf-v6-c-notification-drawer__list-item-header-icon {
11605
- margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd);
11606
- color: var(--pf-v6-c-notification-drawer__list-item-header-icon--Color);
11607
- }
11608
-
11609
- .pf-v6-c-notification-drawer__list-item-header-title {
11610
- font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
11611
- word-break: break-word;
11612
- }
11613
-
11614
- .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
11615
- display: -webkit-box;
11616
- -webkit-box-orient: vertical;
11617
- -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
11618
- overflow: hidden;
11619
- }
11620
-
11621
- .pf-v6-c-notification-drawer__list-item-action {
11622
- grid-row: 1/3;
11623
- grid-column: 2/3;
11624
- margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
11625
- }
11626
-
11627
- .pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
11628
- --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
11629
- }
11630
-
11631
- .pf-v6-c-notification-drawer__list-item-description {
11632
- grid-row: 2/3;
11633
- grid-column: 1/2;
11634
- margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
11635
- word-break: break-word;
11636
- }
11637
-
11638
- .pf-v6-c-notification-drawer__list-item-timestamp {
11639
- grid-row: 3/4;
11640
- grid-column: 1/2;
11641
- font-size: var(--pf-v6-c-notification-drawer__list-item-timestamp--FontSize);
11642
- color: var(--pf-v6-c-notification-drawer__list-item-timestamp--Color);
11448
+ --pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor: var(--pf-t--global--border--color--status--warning--default);
11449
+ --pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
11450
+ --pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor: var(--pf-t--global--border--color--status--danger--default);
11451
+ --pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--success--default);
11452
+ --pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor: var(--pf-t--global--border--color--status--success--default);
11453
+ --pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
11454
+ --pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor: var(--pf-t--global--border--color--status--custom--default);
11455
+ --pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11456
+ --pf-v6-c-notification-drawer__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
11457
+ --pf-v6-c-notification-drawer__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
11458
+ --pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
11459
+ --pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
11460
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
11461
+ --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
11462
+ --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
11463
+ --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
11464
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
11465
+ --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
11466
+ --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
11467
+ --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
11468
+ --pf-v6-c-notification-drawer__group--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
11469
+ --pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
11470
+ --pf-v6-c-notification-drawer__group--m-expanded--MinHeight: 0;
11471
+ --pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11472
+ --pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
11473
+ --pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11474
+ --pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11475
+ --pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11476
+ --pf-v6-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11477
+ --pf-v6-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
11478
+ --pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd: var(--pf-t--global--spacer--md);
11479
+ --pf-v6-c-notification-drawer__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
11480
+ --pf-v6-c-notification-drawer__group-toggle-title--max-lines: 1;
11481
+ --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
11482
+ --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
11483
+ --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
11484
+ --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
11485
+ --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
11643
11486
  }
11644
11487
 
11645
- .pf-v6-c-notification-drawer__group-list {
11488
+ .pf-v6-c-notification-drawer {
11646
11489
  display: flex;
11647
11490
  flex-direction: column;
11491
+ height: 100%;
11492
+ background-color: var(--pf-v6-c-notification-drawer--BackgroundColor);
11648
11493
  }
11649
11494
 
11650
- .pf-v6-c-notification-drawer__group {
11651
- border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBlockEndWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor);
11652
- }
11653
-
11654
- .pf-v6-c-notification-drawer__group.pf-m-expanded {
11655
- min-height: var(--pf-v6-c-notification-drawer__group--m-expanded--MinHeight);
11656
- padding-block-end: var(--pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd);
11657
- }
11658
-
11659
- .pf-v6-c-notification-drawer__group-toggle {
11495
+ .pf-v6-c-notification-drawer__header {
11496
+ position: relative;
11497
+ z-index: var(--pf-v6-c-notification-drawer__header--ZIndex);
11660
11498
  display: flex;
11499
+ flex-shrink: 0;
11661
11500
  align-items: baseline;
11662
- width: 100%;
11663
- padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart);
11664
- padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
11665
- padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
11666
- padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
11667
- background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
11668
- border: none;
11669
- outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
11670
- }
11671
-
11672
- .pf-v6-c-notification-drawer__group-toggle-title {
11673
- display: -webkit-box;
11674
- -webkit-box-orient: vertical;
11675
- -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
11676
- overflow: hidden;
11677
- flex: 1;
11678
- margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
11679
- font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
11680
- text-align: start;
11681
- word-break: break-word;
11682
- }
11683
-
11684
- .pf-v6-c-notification-drawer__group-toggle-count {
11685
- margin-inline-start: auto;
11686
- margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
11687
- }
11688
-
11689
- .pf-v6-c-notification-drawer__group-toggle-icon {
11690
- margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
11691
- color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
11692
- transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
11693
- }
11694
-
11695
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
11696
- scale: -1 1;
11501
+ padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingBlockStart);
11502
+ padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBlockEnd);
11503
+ padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingInlineStart);
11504
+ padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingInlineEnd);
11505
+ background-color: var(--pf-v6-c-notification-drawer__header--BackgroundColor);
11697
11506
  }
11698
11507
 
11699
- .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
11700
- transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
11508
+ .pf-v6-c-notification-drawer__header-title {
11509
+ font-family: var(--pf-v6-c-notification-drawer__header-title--FontFamily);
11510
+ font-size: var(--pf-v6-c-notification-drawer__header-title--FontSize);
11511
+ font-weight: var(--pf-v6-c-notification-drawer__header-title--FontWeight);
11512
+ line-height: var(--pf-v6-c-notification-drawer__header-title--LineHeight);
11701
11513
  }
11702
11514
 
11703
- :where(:root, .pf-v6-c-pagination) {
11704
- --pf-v6-c-pagination--inset: 0;
11705
- --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
11706
- --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
11707
- --pf-v6-c-pagination__nav--Display: none;
11708
- --pf-v6-c-pagination--m-display-summary__nav--Display: none;
11709
- --pf-v6-c-pagination--m-display-full__nav--Display: inline-flex;
11710
- --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
11711
- --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
11712
- --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
11713
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
11714
- --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
11715
- --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
11716
- --pf-v6-c-pagination__total-items--Display: block;
11717
- --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
11718
- --pf-v6-c-pagination--m-display-full__total-items--Display: none;
11719
- --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11720
- --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
11721
- --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
11722
- --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11723
- --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
11724
- --pf-v6-c-pagination--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11725
- --pf-v6-c-pagination--m-sticky--ZIndex: 100;
11726
- --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
11727
- --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
11728
- --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
11729
- --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
11730
- --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
11731
- --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
11732
- --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
11733
- --pf-v6-c-pagination__page-menu--Display--base: block;
11734
- --pf-v6-c-pagination__page-menu--Display: none;
11735
- --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
11736
- --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
11737
- --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
11738
- --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
11515
+ .pf-v6-c-notification-drawer__header-status {
11516
+ margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginInlineStart);
11517
+ font-size: var(--pf-v6-c-notification-drawer__header-status--FontSize);
11518
+ font-weight: var(--pf-v6-c-notification-drawer__header-status--FontWeight);
11519
+ color: var(--pf-v6-c-notification-drawer__header-status--Color);
11739
11520
  }
11740
11521
 
11741
- @media screen and (min-width: 48rem) {
11742
- :where(:root, .pf-v6-c-pagination) {
11743
- --pf-v6-c-pagination--m-bottom--BoxShadow: none;
11744
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
11745
- --pf-v6-c-pagination__nav--Display: inline-flex;
11746
- --pf-v6-c-pagination__total-items--Display: none;
11747
- }
11748
- }
11749
- @media screen and (min-width: 75rem) {
11750
- :where(:root, .pf-v6-c-pagination) {
11751
- --pf-v6-c-pagination__scroll-button--Width: var(--pf-v6-c-pagination__scroll-button--xl--Width);
11752
- }
11753
- }
11754
- .pf-v6-c-pagination {
11522
+ .pf-v6-c-notification-drawer__header-action {
11755
11523
  display: flex;
11756
- flex-wrap: wrap;
11757
- column-gap: var(--pf-v6-c-pagination--ColumnGap);
11758
11524
  align-items: center;
11759
- justify-content: flex-end;
11760
- padding-inline-start: var(--pf-v6-c-pagination--inset);
11761
- padding-inline-end: var(--pf-v6-c-pagination--inset);
11525
+ margin-inline-start: auto;
11762
11526
  }
11763
11527
 
11764
- .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
11765
- display: var(--pf-v6-c-pagination__page-menu--Display);
11528
+ .pf-v6-c-notification-drawer__body {
11529
+ flex: 1;
11530
+ padding-block-start: var(--pf-v6-c-notification-drawer__body--PaddingBlockStart);
11531
+ padding-block-end: var(--pf-v6-c-notification-drawer__body--PaddingBlockEnd);
11532
+ overflow-y: auto;
11766
11533
  }
11767
11534
 
11768
- .pf-v6-c-pagination.pf-m-bottom {
11769
- --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
11770
- --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
11771
- position: sticky;
11772
- inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
11773
- justify-content: center;
11774
- padding-inline-start: var(--pf-v6-c-pagination--m-bottom--PaddingInlineStart);
11775
- padding-inline-end: var(--pf-v6-c-pagination--m-bottom--PaddingInlineEnd);
11776
- background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
11777
- box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
11535
+ .pf-v6-c-notification-drawer__list:not([hidden]) {
11536
+ display: flex;
11537
+ flex-direction: column;
11538
+ gap: var(--pf-v6-c-notification-drawer__list--Gap);
11539
+ padding-inline-start: var(--pf-v6-c-notification-drawer__list--PaddingInlineStart);
11540
+ padding-inline-end: var(--pf-v6-c-notification-drawer__list--PaddingInlineEnd);
11778
11541
  }
11779
11542
 
11780
- .pf-v6-c-pagination.pf-m-bottom.pf-m-static {
11781
- --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
11782
- --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
11543
+ .pf-v6-c-notification-drawer__list-item {
11783
11544
  position: relative;
11784
- box-shadow: none;
11785
- }
11786
-
11787
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
11788
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
11789
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
11790
- display: none;
11791
- }
11792
-
11793
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
11794
- position: absolute;
11795
- display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
11545
+ display: grid;
11546
+ grid-template-columns: 1fr auto;
11547
+ padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockStart);
11548
+ padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
11549
+ padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
11550
+ padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
11551
+ background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
11552
+ border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
11553
+ border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
11796
11554
  }
11797
11555
 
11798
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
11799
- display: flex;
11800
- flex-basis: 100%;
11801
- justify-content: space-between;
11556
+ .pf-v6-c-notification-drawer__list-item.pf-m-info {
11557
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
11558
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color);
11802
11559
  }
11803
11560
 
11804
- @media screen and (min-width: 48rem) {
11805
- .pf-v6-c-pagination.pf-m-bottom {
11806
- --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
11807
- --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
11808
- --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
11809
- position: relative;
11810
- justify-content: flex-end;
11811
- }
11812
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
11813
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
11814
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
11815
- display: block;
11816
- }
11817
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
11818
- display: inline-flex;
11819
- }
11820
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
11821
- position: relative;
11822
- }
11823
- .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
11824
- display: inline-flex;
11825
- flex-basis: auto;
11826
- }
11827
- }
11828
- .pf-v6-c-pagination.pf-m-sticky {
11829
- --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
11830
- position: sticky;
11831
- inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
11832
- z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
11833
- padding-block-start: var(--pf-v6-c-pagination--m-sticky--PaddingBlockStart);
11834
- padding-block-end: var(--pf-v6-c-pagination--m-sticky--PaddingBlockEnd);
11835
- padding-inline-start: var(--pf-v6-c-pagination--m-sticky--PaddingInlineStart);
11836
- padding-inline-end: var(--pf-v6-c-pagination--m-sticky--PaddingInlineEnd);
11837
- background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
11838
- box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
11561
+ .pf-v6-c-notification-drawer__list-item.pf-m-warning {
11562
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-warning__list-item--BorderColor);
11563
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color);
11839
11564
  }
11840
11565
 
11841
- .pf-v6-c-pagination.pf-m-page-insets {
11842
- --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
11566
+ .pf-v6-c-notification-drawer__list-item.pf-m-danger {
11567
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-danger__list-item--BorderColor);
11568
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-danger__list-item-header-icon--Color);
11843
11569
  }
11844
11570
 
11845
- .pf-v6-c-pagination__nav {
11846
- display: var(--pf-v6-c-pagination__nav--Display);
11847
- column-gap: var(--pf-v6-c-pagination__nav--ColumnGap);
11848
- justify-content: flex-end;
11571
+ .pf-v6-c-notification-drawer__list-item.pf-m-success {
11572
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-success__list-item--BorderColor);
11573
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-success__list-item-header-icon--Color);
11849
11574
  }
11850
11575
 
11851
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-pagination__nav-control {
11852
- scale: -1 1;
11576
+ .pf-v6-c-notification-drawer__list-item.pf-m-custom {
11577
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-custom__list-item--BorderColor);
11578
+ --pf-v6-c-notification-drawer__list-item-header-icon--Color: var(--pf-v6-c-notification-drawer__list-item--m-custom__list-item-header-icon--Color);
11853
11579
  }
11854
11580
 
11855
- .pf-v6-c-pagination__nav-page-select {
11856
- display: flex;
11857
- column-gap: var(--pf-v6-c-pagination__nav-page-select--ColumnGap);
11858
- align-items: center;
11581
+ .pf-v6-c-notification-drawer__list-item.pf-m-read {
11582
+ --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
11583
+ --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
11584
+ --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
11585
+ position: relative;
11859
11586
  }
11860
11587
 
11861
- .pf-v6-c-pagination__nav-page-select > * {
11862
- font-size: var(--pf-v6-c-pagination__nav-page-select--FontSize);
11863
- white-space: nowrap;
11588
+ .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
11589
+ cursor: pointer;
11864
11590
  }
11865
11591
 
11866
- .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control {
11867
- width: var(--pf-v6-c-pagination__nav-page-select--c-form-control--Width);
11592
+ .pf-v6-c-notification-drawer__list-item.pf-m-hoverable:hover, .pf-v6-c-notification-drawer__list-item.pf-m-hoverable:focus {
11593
+ background-color: var(--pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor);
11868
11594
  }
11869
11595
 
11870
- .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input) {
11871
- appearance: textfield;
11596
+ .pf-v6-c-notification-drawer__list-item-header {
11597
+ display: flex;
11598
+ grid-row: 1/2;
11599
+ grid-column: 1/2;
11600
+ align-items: baseline;
11601
+ margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd);
11872
11602
  }
11873
11603
 
11874
- .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
11875
- margin: 0;
11876
- appearance: none;
11604
+ .pf-v6-c-notification-drawer__list-item-header-icon {
11605
+ margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd);
11606
+ color: var(--pf-v6-c-notification-drawer__list-item-header-icon--Color);
11877
11607
  }
11878
11608
 
11879
- .pf-v6-c-pagination__total-items {
11880
- display: var(--pf-v6-c-pagination__total-items--Display);
11609
+ .pf-v6-c-notification-drawer__list-item-header-title {
11610
+ font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
11611
+ word-break: break-word;
11881
11612
  }
11882
11613
 
11883
- .pf-v6-c-pagination.pf-m-display-summary {
11884
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
11885
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
11886
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
11614
+ .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
11615
+ display: -webkit-box;
11616
+ -webkit-box-orient: vertical;
11617
+ -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
11618
+ overflow: hidden;
11887
11619
  }
11888
11620
 
11889
- .pf-v6-c-pagination.pf-m-display-full {
11890
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
11891
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
11892
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
11621
+ .pf-v6-c-notification-drawer__list-item-action {
11622
+ grid-row: 1/3;
11623
+ grid-column: 2/3;
11624
+ margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
11893
11625
  }
11894
11626
 
11895
- .pf-v6-c-pagination.pf-m-inset-none {
11896
- --pf-v6-c-pagination--inset: 0;
11627
+ .pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
11628
+ --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
11897
11629
  }
11898
11630
 
11899
- .pf-v6-c-pagination.pf-m-inset-sm {
11900
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
11631
+ .pf-v6-c-notification-drawer__list-item-description {
11632
+ grid-row: 2/3;
11633
+ grid-column: 1/2;
11634
+ margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
11635
+ word-break: break-word;
11901
11636
  }
11902
11637
 
11903
- .pf-v6-c-pagination.pf-m-inset-md {
11904
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
11638
+ .pf-v6-c-notification-drawer__list-item-timestamp {
11639
+ grid-row: 3/4;
11640
+ grid-column: 1/2;
11641
+ font-size: var(--pf-v6-c-notification-drawer__list-item-timestamp--FontSize);
11642
+ color: var(--pf-v6-c-notification-drawer__list-item-timestamp--Color);
11905
11643
  }
11906
11644
 
11907
- .pf-v6-c-pagination.pf-m-inset-lg {
11908
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
11645
+ .pf-v6-c-notification-drawer__group-list {
11646
+ display: flex;
11647
+ flex-direction: column;
11909
11648
  }
11910
11649
 
11911
- .pf-v6-c-pagination.pf-m-inset-xl {
11912
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
11650
+ .pf-v6-c-notification-drawer__group {
11651
+ border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBlockEndWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor);
11913
11652
  }
11914
11653
 
11915
- .pf-v6-c-pagination.pf-m-inset-2xl {
11916
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
11654
+ .pf-v6-c-notification-drawer__group.pf-m-expanded {
11655
+ min-height: var(--pf-v6-c-notification-drawer__group--m-expanded--MinHeight);
11656
+ padding-block-end: var(--pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd);
11917
11657
  }
11918
11658
 
11919
- @media (min-width: 36rem) {
11920
- .pf-v6-c-pagination.pf-m-display-summary-on-sm {
11921
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
11922
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
11923
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
11924
- }
11925
- .pf-v6-c-pagination.pf-m-display-full-on-sm {
11926
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
11927
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
11928
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
11929
- }
11930
- .pf-v6-c-pagination.pf-m-inset-none-on-sm {
11931
- --pf-v6-c-pagination--inset: 0;
11932
- }
11933
- .pf-v6-c-pagination.pf-m-inset-sm-on-sm {
11934
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
11935
- }
11936
- .pf-v6-c-pagination.pf-m-inset-md-on-sm {
11937
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
11938
- }
11939
- .pf-v6-c-pagination.pf-m-inset-lg-on-sm {
11940
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
11941
- }
11942
- .pf-v6-c-pagination.pf-m-inset-xl-on-sm {
11943
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
11944
- }
11945
- .pf-v6-c-pagination.pf-m-inset-2xl-on-sm {
11946
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
11947
- }
11659
+ .pf-v6-c-notification-drawer__group-toggle {
11660
+ display: flex;
11661
+ align-items: baseline;
11662
+ width: 100%;
11663
+ padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart);
11664
+ padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
11665
+ padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
11666
+ padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
11667
+ background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
11668
+ border: none;
11669
+ outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
11948
11670
  }
11949
- @media (min-width: 48rem) {
11950
- .pf-v6-c-pagination.pf-m-display-summary-on-md {
11951
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
11952
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
11953
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
11954
- }
11955
- .pf-v6-c-pagination.pf-m-display-full-on-md {
11956
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
11957
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
11958
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
11959
- }
11960
- .pf-v6-c-pagination.pf-m-inset-none-on-md {
11961
- --pf-v6-c-pagination--inset: 0;
11962
- }
11963
- .pf-v6-c-pagination.pf-m-inset-sm-on-md {
11964
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
11965
- }
11966
- .pf-v6-c-pagination.pf-m-inset-md-on-md {
11967
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
11968
- }
11969
- .pf-v6-c-pagination.pf-m-inset-lg-on-md {
11970
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
11971
- }
11972
- .pf-v6-c-pagination.pf-m-inset-xl-on-md {
11973
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
11974
- }
11975
- .pf-v6-c-pagination.pf-m-inset-2xl-on-md {
11976
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
11977
- }
11671
+
11672
+ .pf-v6-c-notification-drawer__group-toggle-title {
11673
+ display: -webkit-box;
11674
+ -webkit-box-orient: vertical;
11675
+ -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
11676
+ overflow: hidden;
11677
+ flex: 1;
11678
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
11679
+ font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
11680
+ text-align: start;
11681
+ word-break: break-word;
11978
11682
  }
11979
- @media (min-width: 62rem) {
11980
- .pf-v6-c-pagination.pf-m-display-summary-on-lg {
11981
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
11982
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
11983
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
11984
- }
11985
- .pf-v6-c-pagination.pf-m-display-full-on-lg {
11986
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
11987
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
11988
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
11989
- }
11990
- .pf-v6-c-pagination.pf-m-inset-none-on-lg {
11991
- --pf-v6-c-pagination--inset: 0;
11992
- }
11993
- .pf-v6-c-pagination.pf-m-inset-sm-on-lg {
11994
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
11995
- }
11996
- .pf-v6-c-pagination.pf-m-inset-md-on-lg {
11997
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
11998
- }
11999
- .pf-v6-c-pagination.pf-m-inset-lg-on-lg {
12000
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12001
- }
12002
- .pf-v6-c-pagination.pf-m-inset-xl-on-lg {
12003
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12004
- }
12005
- .pf-v6-c-pagination.pf-m-inset-2xl-on-lg {
12006
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12007
- }
11683
+
11684
+ .pf-v6-c-notification-drawer__group-toggle-count {
11685
+ margin-inline-start: auto;
11686
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
12008
11687
  }
12009
- @media (min-width: 75rem) {
12010
- .pf-v6-c-pagination.pf-m-display-summary-on-xl {
12011
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12012
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12013
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12014
- }
12015
- .pf-v6-c-pagination.pf-m-display-full-on-xl {
12016
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12017
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12018
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12019
- }
12020
- .pf-v6-c-pagination.pf-m-inset-none-on-xl {
12021
- --pf-v6-c-pagination--inset: 0;
12022
- }
12023
- .pf-v6-c-pagination.pf-m-inset-sm-on-xl {
12024
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12025
- }
12026
- .pf-v6-c-pagination.pf-m-inset-md-on-xl {
12027
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12028
- }
12029
- .pf-v6-c-pagination.pf-m-inset-lg-on-xl {
12030
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12031
- }
12032
- .pf-v6-c-pagination.pf-m-inset-xl-on-xl {
12033
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12034
- }
12035
- .pf-v6-c-pagination.pf-m-inset-2xl-on-xl {
12036
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12037
- }
11688
+
11689
+ .pf-v6-c-notification-drawer__group-toggle-icon {
11690
+ margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
11691
+ color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
11692
+ transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
11693
+ }
11694
+
11695
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
11696
+ scale: -1 1;
12038
11697
  }
12039
- @media (min-width: 90.625rem) {
12040
- .pf-v6-c-pagination.pf-m-display-summary-on-2xl {
12041
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12042
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12043
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12044
- }
12045
- .pf-v6-c-pagination.pf-m-display-full-on-2xl {
12046
- --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12047
- --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12048
- --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12049
- }
12050
- .pf-v6-c-pagination.pf-m-inset-none-on-2xl {
12051
- --pf-v6-c-pagination--inset: 0;
12052
- }
12053
- .pf-v6-c-pagination.pf-m-inset-sm-on-2xl {
12054
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12055
- }
12056
- .pf-v6-c-pagination.pf-m-inset-md-on-2xl {
12057
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12058
- }
12059
- .pf-v6-c-pagination.pf-m-inset-lg-on-2xl {
12060
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12061
- }
12062
- .pf-v6-c-pagination.pf-m-inset-xl-on-2xl {
12063
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12064
- }
12065
- .pf-v6-c-pagination.pf-m-inset-2xl-on-2xl {
12066
- --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12067
- }
11698
+
11699
+ .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
11700
+ transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
12068
11701
  }
11702
+
12069
11703
  :where(:root, .pf-v6-c-overflow-menu) {
12070
11704
  --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
12071
11705
  --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
@@ -12462,284 +12096,650 @@ ul.pf-v6-c-list {
12462
12096
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12463
12097
  }
12464
12098
  }
12465
- @media (min-height: 60rem) {
12466
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
12467
- .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
12468
- .pf-v6-c-page__main-section.pf-m-sticky-top-on-xl-height,
12469
- .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
12470
- .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height,
12471
- .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
12472
- position: sticky;
12473
- inset-block-start: 0;
12474
- z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12475
- box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12099
+ @media (min-height: 60rem) {
12100
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height,
12101
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-xl-height,
12102
+ .pf-v6-c-page__main-section.pf-m-sticky-top-on-xl-height,
12103
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-xl-height,
12104
+ .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height,
12105
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-xl-height {
12106
+ position: sticky;
12107
+ inset-block-start: 0;
12108
+ z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12109
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12110
+ }
12111
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
12112
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
12113
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
12114
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
12115
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
12116
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
12117
+ position: sticky;
12118
+ inset-block-end: 0;
12119
+ z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12120
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12121
+ }
12122
+ }
12123
+ @media (min-height: 80rem) {
12124
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
12125
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
12126
+ .pf-v6-c-page__main-section.pf-m-sticky-top-on-2xl-height,
12127
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
12128
+ .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height,
12129
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
12130
+ position: sticky;
12131
+ inset-block-start: 0;
12132
+ z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12133
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12134
+ }
12135
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
12136
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
12137
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
12138
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
12139
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
12140
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
12141
+ position: sticky;
12142
+ inset-block-end: 0;
12143
+ z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12144
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12145
+ }
12146
+ }
12147
+ .pf-v6-c-page__main-container {
12148
+ display: flex;
12149
+ flex-direction: column;
12150
+ align-self: start;
12151
+ max-height: var(--pf-v6-c-page__main-container--MaxHeight);
12152
+ margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
12153
+ margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
12154
+ background: var(--pf-v6-c-page__main-container--BackgroundColor);
12155
+ border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
12156
+ border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
12157
+ }
12158
+
12159
+ .pf-v6-c-page__main-container,
12160
+ .pf-v6-c-page__drawer {
12161
+ z-index: var(--pf-v6-c-page__main-container--ZIndex);
12162
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
12163
+ overflow-x: hidden;
12164
+ overflow-y: auto;
12165
+ -webkit-overflow-scrolling: touch;
12166
+ }
12167
+
12168
+ @media screen and (min-width: 75rem) {
12169
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12170
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
12171
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
12172
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
12173
+ }
12174
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
12175
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
12176
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
12177
+ }
12178
+ }
12179
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
12180
+ .pf-v6-c-page__drawer.pf-m-fill,
12181
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
12182
+ align-self: stretch;
12183
+ }
12184
+
12185
+ .pf-v6-c-page__main-container:focus,
12186
+ .pf-v6-c-page__drawer:focus {
12187
+ outline: 0;
12188
+ }
12189
+
12190
+ .pf-v6-c-page__main,
12191
+ .pf-v6-c-page__main-drawer,
12192
+ .pf-v6-c-page__main-group {
12193
+ display: flex;
12194
+ flex-direction: column;
12195
+ flex-grow: 1;
12196
+ }
12197
+
12198
+ .pf-v6-c-page__main-subnav {
12199
+ padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart);
12200
+ padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd);
12201
+ padding-inline-start: var(--pf-v6-c-page__main-subnav--PaddingInlineStart);
12202
+ padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
12203
+ background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
12204
+ }
12205
+
12206
+ .pf-v6-c-page__main-breadcrumb {
12207
+ padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
12208
+ padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
12209
+ padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
12210
+ padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
12211
+ background-color: var(--pf-v6-c-page__main-breadcrumb--BackgroundColor);
12212
+ }
12213
+
12214
+ .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-section {
12215
+ --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart);
12216
+ }
12217
+
12218
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top, .pf-v6-c-page__main-group.pf-m-sticky-top .pf-v6-c-page__main-breadcrumb:last-child {
12219
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12220
+ }
12221
+
12222
+ @media (min-height: 0) {
12223
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v6-c-page__main-breadcrumb:last-child {
12224
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12225
+ }
12226
+ }
12227
+ @media (min-height: 40rem) {
12228
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v6-c-page__main-breadcrumb:last-child {
12229
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12230
+ }
12231
+ }
12232
+ @media (min-height: 48rem) {
12233
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v6-c-page__main-breadcrumb:last-child {
12234
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12235
+ }
12236
+ }
12237
+ @media (min-height: 60rem) {
12238
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v6-c-page__main-breadcrumb:last-child {
12239
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12240
+ }
12241
+ }
12242
+ @media (min-height: 80rem) {
12243
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v6-c-page__main-breadcrumb:last-child {
12244
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12245
+ }
12246
+ }
12247
+ .pf-v6-c-page__main-tabs {
12248
+ padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
12249
+ padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
12250
+ padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
12251
+ padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
12252
+ background-color: var(--pf-v6-c-page__main-tabs--BackgroundColor);
12253
+ }
12254
+
12255
+ .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-tabs {
12256
+ --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
12257
+ }
12258
+
12259
+ .pf-v6-c-page__main-section.pf-m-fill,
12260
+ .pf-v6-c-page__main-group.pf-m-fill,
12261
+ .pf-v6-c-page__main-wizard.pf-m-fill {
12262
+ flex-grow: 1;
12263
+ }
12264
+
12265
+ .pf-v6-c-page__main-section.pf-m-no-fill,
12266
+ .pf-v6-c-page__main-group.pf-m-no-fill,
12267
+ .pf-v6-c-page__main-wizard.pf-m-no-fill {
12268
+ flex-grow: 0;
12269
+ }
12270
+
12271
+ .pf-v6-c-page__main-section {
12272
+ gap: var(--pf-v6-c-page__main-section--RowGap);
12273
+ padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12274
+ padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12275
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12276
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12277
+ background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
12278
+ }
12279
+
12280
+ .pf-v6-c-page__main-section.pf-m-secondary {
12281
+ --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
12282
+ }
12283
+
12284
+ .pf-v6-c-page__main-section.pf-m-padding {
12285
+ padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12286
+ padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12287
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12288
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12289
+ }
12290
+
12291
+ .pf-v6-c-page__main-section.pf-m-no-padding {
12292
+ padding: 0;
12293
+ }
12294
+
12295
+ @media (min-width: 36rem) {
12296
+ .pf-v6-c-page__main-section.pf-m-padding-on-sm {
12297
+ padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12298
+ padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12299
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12300
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12301
+ }
12302
+ .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
12303
+ padding: 0;
12304
+ }
12305
+ }
12306
+ @media (min-width: 48rem) {
12307
+ .pf-v6-c-page__main-section.pf-m-padding-on-md {
12308
+ padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12309
+ padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12310
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12311
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12312
+ }
12313
+ .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
12314
+ padding: 0;
12315
+ }
12316
+ }
12317
+ @media (min-width: 62rem) {
12318
+ .pf-v6-c-page__main-section.pf-m-padding-on-lg {
12319
+ padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12320
+ padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12321
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12322
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12323
+ }
12324
+ .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
12325
+ padding: 0;
12326
+ }
12327
+ }
12328
+ @media (min-width: 75rem) {
12329
+ .pf-v6-c-page__main-section.pf-m-padding-on-xl {
12330
+ padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12331
+ padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12332
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12333
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12476
12334
  }
12477
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
12478
- .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-xl-height,
12479
- .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-xl-height,
12480
- .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-xl-height,
12481
- .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-xl-height,
12482
- .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-xl-height {
12483
- position: sticky;
12484
- inset-block-end: 0;
12485
- z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12486
- box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12335
+ .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
12336
+ padding: 0;
12487
12337
  }
12488
12338
  }
12489
- @media (min-height: 80rem) {
12490
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height,
12491
- .pf-v6-c-page__main-tabs.pf-m-sticky-top-on-2xl-height,
12492
- .pf-v6-c-page__main-section.pf-m-sticky-top-on-2xl-height,
12493
- .pf-v6-c-page__main-wizard.pf-m-sticky-top-on-2xl-height,
12494
- .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height,
12495
- .pf-v6-c-page__main-subnav.pf-m-sticky-top-on-2xl-height {
12496
- position: sticky;
12497
- inset-block-start: 0;
12498
- z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12499
- box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12339
+ @media (min-width: 90.625rem) {
12340
+ .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
12341
+ padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12342
+ padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12343
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12344
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12500
12345
  }
12501
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
12502
- .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-on-2xl-height,
12503
- .pf-v6-c-page__main-section.pf-m-sticky-bottom-on-2xl-height,
12504
- .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-on-2xl-height,
12505
- .pf-v6-c-page__main-group.pf-m-sticky-bottom-on-2xl-height,
12506
- .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-on-2xl-height {
12507
- position: sticky;
12508
- inset-block-end: 0;
12509
- z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12510
- box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12346
+ .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
12347
+ padding: 0;
12511
12348
  }
12512
12349
  }
12513
- .pf-v6-c-page__main-container {
12514
- display: flex;
12515
- flex-direction: column;
12516
- align-self: start;
12517
- max-height: var(--pf-v6-c-page__main-container--MaxHeight);
12518
- margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
12519
- margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
12520
- background: var(--pf-v6-c-page__main-container--BackgroundColor);
12521
- border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
12522
- border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
12350
+ .pf-v6-c-page__main-wizard {
12351
+ flex: 1 1;
12352
+ min-height: 0;
12353
+ background-color: var(--pf-v6-c-page__main-wizard--BackgroundColor);
12354
+ border-block-start: var(--pf-v6-c-page__main-wizard--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-wizard--BorderBlockStartColor);
12355
+ }
12356
+
12357
+ .pf-v6-c-page__main-wizard:first-child {
12358
+ --pf-v6-c-page__main-wizard--BorderBlockStartWidth: 0;
12359
+ }
12360
+
12361
+ .pf-v6-c-page__main-wizard .pf-v6-c-page__main-body {
12362
+ min-height: 0;
12363
+ }
12364
+
12365
+ .pf-v6-c-page__main-group {
12366
+ flex-shrink: 0;
12523
12367
  }
12524
12368
 
12525
- .pf-v6-c-page__main-container,
12526
12369
  .pf-v6-c-page__drawer {
12527
- z-index: var(--pf-v6-c-page__main-container--ZIndex);
12528
- grid-area: var(--pf-v6-c-page__main-container--GridArea);
12529
- overflow-x: hidden;
12530
- overflow-y: auto;
12531
- -webkit-overflow-scrolling: touch;
12370
+ grid-area: main;
12532
12371
  }
12533
12372
 
12534
- @media screen and (min-width: 75rem) {
12535
- .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
12536
- .pf-v6-c-masthead + .pf-v6-c-page__drawer,
12537
- .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
12538
- --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
12373
+ .pf-v6-c-page__drawer > .pf-v6-c-drawer {
12374
+ flex: 1 0 auto;
12375
+ }
12376
+
12377
+ :where(:root, .pf-v6-c-pagination) {
12378
+ --pf-v6-c-pagination--inset: 0;
12379
+ --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
12380
+ --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
12381
+ --pf-v6-c-pagination__nav--Display: none;
12382
+ --pf-v6-c-pagination--m-display-summary__nav--Display: none;
12383
+ --pf-v6-c-pagination--m-display-full__nav--Display: inline-flex;
12384
+ --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
12385
+ --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
12386
+ --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
12387
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
12388
+ --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
12389
+ --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
12390
+ --pf-v6-c-pagination__total-items--Display: block;
12391
+ --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
12392
+ --pf-v6-c-pagination--m-display-full__total-items--Display: none;
12393
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12394
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
12395
+ --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
12396
+ --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12397
+ --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12398
+ --pf-v6-c-pagination--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12399
+ --pf-v6-c-pagination--m-sticky--ZIndex: 100;
12400
+ --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
12401
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12402
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
12403
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
12404
+ --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12405
+ --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12406
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
12407
+ --pf-v6-c-pagination__page-menu--Display--base: block;
12408
+ --pf-v6-c-pagination__page-menu--Display: none;
12409
+ --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
12410
+ --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
12411
+ --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
12412
+ --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
12413
+ }
12414
+
12415
+ @media screen and (min-width: 48rem) {
12416
+ :where(:root, .pf-v6-c-pagination) {
12417
+ --pf-v6-c-pagination--m-bottom--BoxShadow: none;
12418
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
12419
+ --pf-v6-c-pagination__nav--Display: inline-flex;
12420
+ --pf-v6-c-pagination__total-items--Display: none;
12539
12421
  }
12540
- .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
12541
- .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
12542
- --pf-v6-c-page__main-container--MarginInlineStart: 0;
12422
+ }
12423
+ @media screen and (min-width: 75rem) {
12424
+ :where(:root, .pf-v6-c-pagination) {
12425
+ --pf-v6-c-pagination__scroll-button--Width: var(--pf-v6-c-pagination__scroll-button--xl--Width);
12543
12426
  }
12544
12427
  }
12545
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
12546
- .pf-v6-c-page__drawer.pf-m-fill,
12547
- .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
12548
- align-self: stretch;
12428
+ .pf-v6-c-pagination {
12429
+ display: flex;
12430
+ flex-wrap: wrap;
12431
+ column-gap: var(--pf-v6-c-pagination--ColumnGap);
12432
+ align-items: center;
12433
+ justify-content: flex-end;
12434
+ padding-inline-start: var(--pf-v6-c-pagination--inset);
12435
+ padding-inline-end: var(--pf-v6-c-pagination--inset);
12549
12436
  }
12550
12437
 
12551
- .pf-v6-c-page__main-container:focus,
12552
- .pf-v6-c-page__drawer:focus {
12553
- outline: 0;
12438
+ .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
12439
+ display: var(--pf-v6-c-pagination__page-menu--Display);
12554
12440
  }
12555
12441
 
12556
- .pf-v6-c-page__main,
12557
- .pf-v6-c-page__main-drawer,
12558
- .pf-v6-c-page__main-group {
12442
+ .pf-v6-c-pagination.pf-m-bottom {
12443
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
12444
+ --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
12445
+ position: sticky;
12446
+ inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
12447
+ justify-content: center;
12448
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--PaddingInlineStart);
12449
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--PaddingInlineEnd);
12450
+ background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
12451
+ box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
12452
+ }
12453
+
12454
+ .pf-v6-c-pagination.pf-m-bottom.pf-m-static {
12455
+ --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
12456
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
12457
+ position: relative;
12458
+ box-shadow: none;
12459
+ }
12460
+
12461
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
12462
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
12463
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
12464
+ display: none;
12465
+ }
12466
+
12467
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
12468
+ position: absolute;
12469
+ display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
12470
+ }
12471
+
12472
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
12559
12473
  display: flex;
12560
- flex-direction: column;
12561
- flex-grow: 1;
12474
+ flex-basis: 100%;
12475
+ justify-content: space-between;
12562
12476
  }
12563
12477
 
12564
- .pf-v6-c-page__main-subnav {
12565
- padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart);
12566
- padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd);
12567
- padding-inline-start: var(--pf-v6-c-page__main-subnav--PaddingInlineStart);
12568
- padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
12569
- background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
12478
+ @media screen and (min-width: 48rem) {
12479
+ .pf-v6-c-pagination.pf-m-bottom {
12480
+ --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
12481
+ --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
12482
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
12483
+ position: relative;
12484
+ justify-content: flex-end;
12485
+ }
12486
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
12487
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
12488
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
12489
+ display: block;
12490
+ }
12491
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
12492
+ display: inline-flex;
12493
+ }
12494
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
12495
+ position: relative;
12496
+ }
12497
+ .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
12498
+ display: inline-flex;
12499
+ flex-basis: auto;
12500
+ }
12501
+ }
12502
+ .pf-v6-c-pagination.pf-m-sticky {
12503
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
12504
+ position: sticky;
12505
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
12506
+ z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
12507
+ padding-block-start: var(--pf-v6-c-pagination--m-sticky--PaddingBlockStart);
12508
+ padding-block-end: var(--pf-v6-c-pagination--m-sticky--PaddingBlockEnd);
12509
+ padding-inline-start: var(--pf-v6-c-pagination--m-sticky--PaddingInlineStart);
12510
+ padding-inline-end: var(--pf-v6-c-pagination--m-sticky--PaddingInlineEnd);
12511
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
12512
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
12513
+ }
12514
+
12515
+ .pf-v6-c-pagination.pf-m-page-insets {
12516
+ --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
12570
12517
  }
12571
12518
 
12572
- .pf-v6-c-page__main-breadcrumb {
12573
- padding-block-start: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockStart);
12574
- padding-block-end: var(--pf-v6-c-page__main-breadcrumb--PaddingBlockEnd);
12575
- padding-inline-start: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineStart);
12576
- padding-inline-end: var(--pf-v6-c-page__main-breadcrumb--PaddingInlineEnd);
12577
- background-color: var(--pf-v6-c-page__main-breadcrumb--BackgroundColor);
12519
+ .pf-v6-c-pagination__nav {
12520
+ display: var(--pf-v6-c-pagination__nav--Display);
12521
+ column-gap: var(--pf-v6-c-pagination__nav--ColumnGap);
12522
+ justify-content: flex-end;
12578
12523
  }
12579
12524
 
12580
- .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-section {
12581
- --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--main-section--PaddingBlockStart);
12525
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-pagination__nav-control {
12526
+ scale: -1 1;
12582
12527
  }
12583
12528
 
12584
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top, .pf-v6-c-page__main-group.pf-m-sticky-top .pf-v6-c-page__main-breadcrumb:last-child {
12585
- --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12529
+ .pf-v6-c-pagination__nav-page-select {
12530
+ display: flex;
12531
+ column-gap: var(--pf-v6-c-pagination__nav-page-select--ColumnGap);
12532
+ align-items: center;
12586
12533
  }
12587
12534
 
12588
- @media (min-height: 0) {
12589
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-sm-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-sm-height .pf-v6-c-page__main-breadcrumb:last-child {
12590
- --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12591
- }
12535
+ .pf-v6-c-pagination__nav-page-select > * {
12536
+ font-size: var(--pf-v6-c-pagination__nav-page-select--FontSize);
12537
+ white-space: nowrap;
12592
12538
  }
12593
- @media (min-height: 40rem) {
12594
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-md-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-md-height .pf-v6-c-page__main-breadcrumb:last-child {
12595
- --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12596
- }
12539
+
12540
+ .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control {
12541
+ width: var(--pf-v6-c-pagination__nav-page-select--c-form-control--Width);
12597
12542
  }
12598
- @media (min-height: 48rem) {
12599
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-lg-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-lg-height .pf-v6-c-page__main-breadcrumb:last-child {
12600
- --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12601
- }
12543
+
12544
+ .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input) {
12545
+ appearance: textfield;
12602
12546
  }
12603
- @media (min-height: 60rem) {
12604
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-xl-height .pf-v6-c-page__main-breadcrumb:last-child {
12605
- --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12606
- }
12547
+
12548
+ .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
12549
+ margin: 0;
12550
+ appearance: none;
12607
12551
  }
12608
- @media (min-height: 80rem) {
12609
- .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-on-2xl-height, .pf-v6-c-page__main-group.pf-m-sticky-top-on-2xl-height .pf-v6-c-page__main-breadcrumb:last-child {
12610
- --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
12611
- }
12552
+
12553
+ .pf-v6-c-pagination__total-items {
12554
+ display: var(--pf-v6-c-pagination__total-items--Display);
12612
12555
  }
12613
- .pf-v6-c-page__main-tabs {
12614
- padding-block-start: var(--pf-v6-c-page__main-tabs--PaddingBlockStart);
12615
- padding-block-end: var(--pf-v6-c-page__main-tabs--PaddingBlockEnd);
12616
- padding-inline-start: var(--pf-v6-c-page__main-tabs--PaddingInlineStart);
12617
- padding-inline-end: var(--pf-v6-c-page__main-tabs--PaddingInlineEnd);
12618
- background-color: var(--pf-v6-c-page__main-tabs--BackgroundColor);
12556
+
12557
+ .pf-v6-c-pagination.pf-m-display-summary {
12558
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12559
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12560
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12619
12561
  }
12620
12562
 
12621
- .pf-v6-c-page__main-breadcrumb + .pf-v6-c-page__main-tabs {
12622
- --pf-v6-c-page__main-tabs--PaddingBlockStart: var(--pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart);
12563
+ .pf-v6-c-pagination.pf-m-display-full {
12564
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12565
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12566
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12623
12567
  }
12624
12568
 
12625
- .pf-v6-c-page__main-section.pf-m-fill,
12626
- .pf-v6-c-page__main-group.pf-m-fill,
12627
- .pf-v6-c-page__main-wizard.pf-m-fill {
12628
- flex-grow: 1;
12569
+ .pf-v6-c-pagination.pf-m-inset-none {
12570
+ --pf-v6-c-pagination--inset: 0;
12629
12571
  }
12630
12572
 
12631
- .pf-v6-c-page__main-section.pf-m-no-fill,
12632
- .pf-v6-c-page__main-group.pf-m-no-fill,
12633
- .pf-v6-c-page__main-wizard.pf-m-no-fill {
12634
- flex-grow: 0;
12573
+ .pf-v6-c-pagination.pf-m-inset-sm {
12574
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12635
12575
  }
12636
12576
 
12637
- .pf-v6-c-page__main-section {
12638
- gap: var(--pf-v6-c-page__main-section--RowGap);
12639
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12640
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12641
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12642
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12643
- background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
12577
+ .pf-v6-c-pagination.pf-m-inset-md {
12578
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12644
12579
  }
12645
12580
 
12646
- .pf-v6-c-page__main-section.pf-m-secondary {
12647
- --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
12581
+ .pf-v6-c-pagination.pf-m-inset-lg {
12582
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12648
12583
  }
12649
12584
 
12650
- .pf-v6-c-page__main-section.pf-m-padding {
12651
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12652
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12653
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12654
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12585
+ .pf-v6-c-pagination.pf-m-inset-xl {
12586
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12655
12587
  }
12656
12588
 
12657
- .pf-v6-c-page__main-section.pf-m-no-padding {
12658
- padding: 0;
12589
+ .pf-v6-c-pagination.pf-m-inset-2xl {
12590
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12659
12591
  }
12660
12592
 
12661
12593
  @media (min-width: 36rem) {
12662
- .pf-v6-c-page__main-section.pf-m-padding-on-sm {
12663
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12664
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12665
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12666
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12594
+ .pf-v6-c-pagination.pf-m-display-summary-on-sm {
12595
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12596
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12597
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12667
12598
  }
12668
- .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
12669
- padding: 0;
12599
+ .pf-v6-c-pagination.pf-m-display-full-on-sm {
12600
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12601
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12602
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12603
+ }
12604
+ .pf-v6-c-pagination.pf-m-inset-none-on-sm {
12605
+ --pf-v6-c-pagination--inset: 0;
12606
+ }
12607
+ .pf-v6-c-pagination.pf-m-inset-sm-on-sm {
12608
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12609
+ }
12610
+ .pf-v6-c-pagination.pf-m-inset-md-on-sm {
12611
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12612
+ }
12613
+ .pf-v6-c-pagination.pf-m-inset-lg-on-sm {
12614
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12615
+ }
12616
+ .pf-v6-c-pagination.pf-m-inset-xl-on-sm {
12617
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12618
+ }
12619
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-sm {
12620
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12670
12621
  }
12671
12622
  }
12672
12623
  @media (min-width: 48rem) {
12673
- .pf-v6-c-page__main-section.pf-m-padding-on-md {
12674
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12675
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12676
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12677
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12624
+ .pf-v6-c-pagination.pf-m-display-summary-on-md {
12625
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12626
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12627
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12678
12628
  }
12679
- .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
12680
- padding: 0;
12629
+ .pf-v6-c-pagination.pf-m-display-full-on-md {
12630
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12631
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12632
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12633
+ }
12634
+ .pf-v6-c-pagination.pf-m-inset-none-on-md {
12635
+ --pf-v6-c-pagination--inset: 0;
12636
+ }
12637
+ .pf-v6-c-pagination.pf-m-inset-sm-on-md {
12638
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12639
+ }
12640
+ .pf-v6-c-pagination.pf-m-inset-md-on-md {
12641
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12642
+ }
12643
+ .pf-v6-c-pagination.pf-m-inset-lg-on-md {
12644
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12645
+ }
12646
+ .pf-v6-c-pagination.pf-m-inset-xl-on-md {
12647
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12648
+ }
12649
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-md {
12650
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12681
12651
  }
12682
12652
  }
12683
12653
  @media (min-width: 62rem) {
12684
- .pf-v6-c-page__main-section.pf-m-padding-on-lg {
12685
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12686
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12687
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12688
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12654
+ .pf-v6-c-pagination.pf-m-display-summary-on-lg {
12655
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12656
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12657
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12689
12658
  }
12690
- .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
12691
- padding: 0;
12659
+ .pf-v6-c-pagination.pf-m-display-full-on-lg {
12660
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12661
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12662
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12663
+ }
12664
+ .pf-v6-c-pagination.pf-m-inset-none-on-lg {
12665
+ --pf-v6-c-pagination--inset: 0;
12666
+ }
12667
+ .pf-v6-c-pagination.pf-m-inset-sm-on-lg {
12668
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12669
+ }
12670
+ .pf-v6-c-pagination.pf-m-inset-md-on-lg {
12671
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12672
+ }
12673
+ .pf-v6-c-pagination.pf-m-inset-lg-on-lg {
12674
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12675
+ }
12676
+ .pf-v6-c-pagination.pf-m-inset-xl-on-lg {
12677
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12678
+ }
12679
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-lg {
12680
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12692
12681
  }
12693
12682
  }
12694
12683
  @media (min-width: 75rem) {
12695
- .pf-v6-c-page__main-section.pf-m-padding-on-xl {
12696
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12697
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12698
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12699
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12684
+ .pf-v6-c-pagination.pf-m-display-summary-on-xl {
12685
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12686
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12687
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12688
+ }
12689
+ .pf-v6-c-pagination.pf-m-display-full-on-xl {
12690
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12691
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12692
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12693
+ }
12694
+ .pf-v6-c-pagination.pf-m-inset-none-on-xl {
12695
+ --pf-v6-c-pagination--inset: 0;
12696
+ }
12697
+ .pf-v6-c-pagination.pf-m-inset-sm-on-xl {
12698
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12699
+ }
12700
+ .pf-v6-c-pagination.pf-m-inset-md-on-xl {
12701
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12702
+ }
12703
+ .pf-v6-c-pagination.pf-m-inset-lg-on-xl {
12704
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12705
+ }
12706
+ .pf-v6-c-pagination.pf-m-inset-xl-on-xl {
12707
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12708
+ }
12709
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-xl {
12710
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12711
+ }
12712
+ }
12713
+ @media (min-width: 90.625rem) {
12714
+ .pf-v6-c-pagination.pf-m-display-summary-on-2xl {
12715
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-summary__nav--Display);
12716
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-summary__page-menu--Display);
12717
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-summary__total-items--Display);
12718
+ }
12719
+ .pf-v6-c-pagination.pf-m-display-full-on-2xl {
12720
+ --pf-v6-c-pagination__nav--Display: var(--pf-v6-c-pagination--m-display-full__nav--Display);
12721
+ --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination--m-display-full__page-menu--Display);
12722
+ --pf-v6-c-pagination__total-items--Display: var(--pf-v6-c-pagination--m-display-full__total-items--Display);
12723
+ }
12724
+ .pf-v6-c-pagination.pf-m-inset-none-on-2xl {
12725
+ --pf-v6-c-pagination--inset: 0;
12700
12726
  }
12701
- .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
12702
- padding: 0;
12727
+ .pf-v6-c-pagination.pf-m-inset-sm-on-2xl {
12728
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--sm);
12703
12729
  }
12704
- }
12705
- @media (min-width: 90.625rem) {
12706
- .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
12707
- padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
12708
- padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
12709
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
12710
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
12730
+ .pf-v6-c-pagination.pf-m-inset-md-on-2xl {
12731
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--md);
12711
12732
  }
12712
- .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
12713
- padding: 0;
12733
+ .pf-v6-c-pagination.pf-m-inset-lg-on-2xl {
12734
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--lg);
12735
+ }
12736
+ .pf-v6-c-pagination.pf-m-inset-xl-on-2xl {
12737
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--xl);
12738
+ }
12739
+ .pf-v6-c-pagination.pf-m-inset-2xl-on-2xl {
12740
+ --pf-v6-c-pagination--inset: var(--pf-t--global--spacer--2xl);
12714
12741
  }
12715
12742
  }
12716
- .pf-v6-c-page__main-wizard {
12717
- flex: 1 1;
12718
- min-height: 0;
12719
- background-color: var(--pf-v6-c-page__main-wizard--BackgroundColor);
12720
- border-block-start: var(--pf-v6-c-page__main-wizard--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-wizard--BorderBlockStartColor);
12721
- }
12722
-
12723
- .pf-v6-c-page__main-wizard:first-child {
12724
- --pf-v6-c-page__main-wizard--BorderBlockStartWidth: 0;
12725
- }
12726
-
12727
- .pf-v6-c-page__main-wizard .pf-v6-c-page__main-body {
12728
- min-height: 0;
12729
- }
12730
-
12731
- .pf-v6-c-page__main-group {
12732
- flex-shrink: 0;
12733
- }
12734
-
12735
- .pf-v6-c-page__drawer {
12736
- grid-area: main;
12737
- }
12738
-
12739
- .pf-v6-c-page__drawer > .pf-v6-c-drawer {
12740
- flex: 1 0 auto;
12741
- }
12742
-
12743
12743
  :where(:root, .pf-v6-c-popover) {
12744
12744
  --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
12745
12745
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
@@ -14337,6 +14337,23 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14337
14337
  transform: translateX(100%);
14338
14338
  }
14339
14339
  }
14340
+ :where(:root, .pf-v6-c-skip-to-content) {
14341
+ --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
14342
+ --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
14343
+ --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
14344
+ }
14345
+
14346
+ .pf-v6-c-skip-to-content {
14347
+ position: absolute;
14348
+ inset-block-start: var(--pf-v6-c-skip-to-content--InsetBlockStart);
14349
+ inset-inline-start: -300%;
14350
+ z-index: var(--pf-v6-c-skip-to-content--ZIndex);
14351
+ }
14352
+
14353
+ .pf-v6-c-skip-to-content:focus-within {
14354
+ inset-inline-start: var(--pf-v6-c-skip-to-content--focus--InsetInlineStart);
14355
+ }
14356
+
14340
14357
  :where(:root, .pf-v6-c-slider) {
14341
14358
  --pf-v6-c-slider--value: 0;
14342
14359
  --pf-v6-c-slider__step--InsetInlineStart: 0;
@@ -14574,23 +14591,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14574
14591
  margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
14575
14592
  }
14576
14593
 
14577
- :where(:root, .pf-v6-c-skip-to-content) {
14578
- --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
14579
- --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
14580
- --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
14581
- }
14582
-
14583
- .pf-v6-c-skip-to-content {
14584
- position: absolute;
14585
- inset-block-start: var(--pf-v6-c-skip-to-content--InsetBlockStart);
14586
- inset-inline-start: -300%;
14587
- z-index: var(--pf-v6-c-skip-to-content--ZIndex);
14588
- }
14589
-
14590
- .pf-v6-c-skip-to-content:focus-within {
14591
- inset-inline-start: var(--pf-v6-c-skip-to-content--focus--InsetInlineStart);
14592
- }
14593
-
14594
14594
  :where(:root, .pf-v6-c-spinner) {
14595
14595
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
14596
14596
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
@@ -16146,137 +16146,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16146
16146
  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginInlineStart);
16147
16147
  }
16148
16148
 
16149
- :where(:root, .pf-v6-c-tooltip) {
16150
- --pf-v6-c-tooltip--MaxWidth: 18.75rem;
16151
- --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
16152
- --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
16153
- --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
16154
- --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16155
- --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
16156
- --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
16157
- --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
16158
- --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
16159
- --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
16160
- --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
16161
- --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
16162
- --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
16163
- --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
16164
- --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
16165
- --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
16166
- --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
16167
- --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
16168
- --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
16169
- --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
16170
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
16171
- --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
16172
- --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
16173
- --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
16174
- --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
16175
- --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
16176
- }
16177
-
16178
- .pf-v6-c-tooltip {
16179
- position: relative;
16180
- max-width: var(--pf-v6-c-tooltip--MaxWidth);
16181
- box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
16182
- }
16183
-
16184
- .pf-v6-c-tooltip:is(.pf-m-top,
16185
- .pf-m-top-left,
16186
- .pf-m-top-right) {
16187
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
16188
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
16189
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
16190
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
16191
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
16192
- }
16193
-
16194
- .pf-v6-c-tooltip:is(.pf-m-bottom,
16195
- .pf-m-bottom-left,
16196
- .pf-m-bottom-right) {
16197
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
16198
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
16199
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
16200
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
16201
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
16202
- }
16203
-
16204
- .pf-v6-c-tooltip:is(.pf-m-left,
16205
- .pf-m-left-top,
16206
- .pf-m-left-bottom) {
16207
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
16208
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
16209
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
16210
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
16211
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
16212
- }
16213
-
16214
- .pf-v6-c-tooltip:is(.pf-m-right,
16215
- .pf-m-right-top,
16216
- .pf-m-right-bottom) {
16217
- --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
16218
- --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
16219
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
16220
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
16221
- --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
16222
- }
16223
-
16224
- .pf-v6-c-tooltip:is(.pf-m-left-top,
16225
- .pf-m-right-top) {
16226
- --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
16227
- --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
16228
- }
16229
-
16230
- .pf-v6-c-tooltip:is(.pf-m-left-bottom,
16231
- .pf-m-right-bottom) {
16232
- --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
16233
- --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
16234
- }
16235
-
16236
- .pf-v6-c-tooltip:is(.pf-m-top-left,
16237
- .pf-m-bottom-left) {
16238
- --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
16239
- --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
16240
- }
16241
-
16242
- .pf-v6-c-tooltip:is(.pf-m-top-right,
16243
- .pf-m-bottom-right) {
16244
- --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
16245
- --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
16246
- }
16247
-
16248
- .pf-v6-c-tooltip__content {
16249
- position: relative;
16250
- padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
16251
- padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
16252
- padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
16253
- padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
16254
- font-size: var(--pf-v6-c-tooltip__content--FontSize);
16255
- color: var(--pf-v6-c-tooltip__content--Color);
16256
- text-align: center;
16257
- word-break: break-word;
16258
- background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
16259
- border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
16260
- }
16261
-
16262
- .pf-v6-c-tooltip__content.pf-m-text-align-left {
16263
- text-align: start;
16264
- }
16265
-
16266
- .pf-v6-c-tooltip__arrow {
16267
- position: absolute;
16268
- top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
16269
- right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
16270
- bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
16271
- left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
16272
- width: var(--pf-v6-c-tooltip__arrow--Width);
16273
- height: var(--pf-v6-c-tooltip__arrow--Height);
16274
- pointer-events: none;
16275
- background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
16276
- box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
16277
- transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
16278
- }
16279
-
16280
16149
  :where(:root, .pf-v6-c-toolbar) {
16281
16150
  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
16282
16151
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
@@ -18254,6 +18123,137 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18254
18123
  display: inline-flex;
18255
18124
  }
18256
18125
  }
18126
+ :where(:root, .pf-v6-c-tooltip) {
18127
+ --pf-v6-c-tooltip--MaxWidth: 18.75rem;
18128
+ --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
18129
+ --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18130
+ --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
18131
+ --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18132
+ --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
18133
+ --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
18134
+ --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
18135
+ --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
18136
+ --pf-v6-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
18137
+ --pf-v6-c-tooltip__arrow--Width: 0.9375rem;
18138
+ --pf-v6-c-tooltip__arrow--Height: 0.9375rem;
18139
+ --pf-v6-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
18140
+ --pf-v6-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
18141
+ --pf-v6-c-tooltip__arrow--m-top--TranslateX: -50%;
18142
+ --pf-v6-c-tooltip__arrow--m-top--TranslateY: 50%;
18143
+ --pf-v6-c-tooltip__arrow--m-top--Rotate: 45deg;
18144
+ --pf-v6-c-tooltip__arrow--m-right--TranslateX: -50%;
18145
+ --pf-v6-c-tooltip__arrow--m-right--TranslateY: -50%;
18146
+ --pf-v6-c-tooltip__arrow--m-right--Rotate: 45deg;
18147
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateX: -50%;
18148
+ --pf-v6-c-tooltip__arrow--m-bottom--TranslateY: -50%;
18149
+ --pf-v6-c-tooltip__arrow--m-bottom--Rotate: 45deg;
18150
+ --pf-v6-c-tooltip__arrow--m-left--TranslateX: 50%;
18151
+ --pf-v6-c-tooltip__arrow--m-left--TranslateY: -50%;
18152
+ --pf-v6-c-tooltip__arrow--m-left--Rotate: 45deg;
18153
+ }
18154
+
18155
+ .pf-v6-c-tooltip {
18156
+ position: relative;
18157
+ max-width: var(--pf-v6-c-tooltip--MaxWidth);
18158
+ box-shadow: var(--pf-v6-c-tooltip--BoxShadow);
18159
+ }
18160
+
18161
+ .pf-v6-c-tooltip:is(.pf-m-top,
18162
+ .pf-m-top-left,
18163
+ .pf-m-top-right) {
18164
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
18165
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
18166
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
18167
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
18168
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
18169
+ }
18170
+
18171
+ .pf-v6-c-tooltip:is(.pf-m-bottom,
18172
+ .pf-m-bottom-left,
18173
+ .pf-m-bottom-right) {
18174
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
18175
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
18176
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
18177
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
18178
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
18179
+ }
18180
+
18181
+ .pf-v6-c-tooltip:is(.pf-m-left,
18182
+ .pf-m-left-top,
18183
+ .pf-m-left-bottom) {
18184
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
18185
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
18186
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
18187
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
18188
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
18189
+ }
18190
+
18191
+ .pf-v6-c-tooltip:is(.pf-m-right,
18192
+ .pf-m-right-top,
18193
+ .pf-m-right-bottom) {
18194
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
18195
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
18196
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
18197
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
18198
+ --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
18199
+ }
18200
+
18201
+ .pf-v6-c-tooltip:is(.pf-m-left-top,
18202
+ .pf-m-right-top) {
18203
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
18204
+ --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
18205
+ }
18206
+
18207
+ .pf-v6-c-tooltip:is(.pf-m-left-bottom,
18208
+ .pf-m-right-bottom) {
18209
+ --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
18210
+ --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
18211
+ }
18212
+
18213
+ .pf-v6-c-tooltip:is(.pf-m-top-left,
18214
+ .pf-m-bottom-left) {
18215
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
18216
+ --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
18217
+ }
18218
+
18219
+ .pf-v6-c-tooltip:is(.pf-m-top-right,
18220
+ .pf-m-bottom-right) {
18221
+ --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
18222
+ --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
18223
+ }
18224
+
18225
+ .pf-v6-c-tooltip__content {
18226
+ position: relative;
18227
+ padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
18228
+ padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
18229
+ padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
18230
+ padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
18231
+ font-size: var(--pf-v6-c-tooltip__content--FontSize);
18232
+ color: var(--pf-v6-c-tooltip__content--Color);
18233
+ text-align: center;
18234
+ word-break: break-word;
18235
+ background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
18236
+ border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
18237
+ }
18238
+
18239
+ .pf-v6-c-tooltip__content.pf-m-text-align-left {
18240
+ text-align: start;
18241
+ }
18242
+
18243
+ .pf-v6-c-tooltip__arrow {
18244
+ position: absolute;
18245
+ top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
18246
+ right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
18247
+ bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
18248
+ left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
18249
+ width: var(--pf-v6-c-tooltip__arrow--Width);
18250
+ height: var(--pf-v6-c-tooltip__arrow--Height);
18251
+ pointer-events: none;
18252
+ background-color: var(--pf-v6-c-tooltip__arrow--BackgroundColor);
18253
+ box-shadow: var(--pf-v6-c-tooltip__arrow--BoxShadow);
18254
+ transform: translateX(var(--pf-v6-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v6-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v6-c-tooltip__arrow--Rotate, 0));
18255
+ }
18256
+
18257
18257
  :where(:root, .pf-v6-c-number-input) {
18258
18258
  --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
18259
18259
  --pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
@@ -22068,25 +22068,307 @@ label.pf-v6-c-tree-view__node-text {
22068
22068
  .pf-v6-l-flex.pf-m-column-gap-md-on-2xl {
22069
22069
  --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--md);
22070
22070
  }
22071
- .pf-v6-l-flex.pf-m-column-gap-lg-on-2xl {
22072
- --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg);
22071
+ .pf-v6-l-flex.pf-m-column-gap-lg-on-2xl {
22072
+ --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--lg);
22073
+ }
22074
+ .pf-v6-l-flex.pf-m-column-gap-xl-on-2xl {
22075
+ --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl);
22076
+ }
22077
+ .pf-v6-l-flex.pf-m-column-gap-2xl-on-2xl {
22078
+ --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl);
22079
+ }
22080
+ .pf-v6-l-flex.pf-m-column-gap-3xl-on-2xl {
22081
+ --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl);
22082
+ }
22083
+ .pf-v6-l-flex.pf-m-column-gap-4xl-on-2xl {
22084
+ --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl);
22085
+ }
22086
+ .pf-v6-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-xs-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
22087
+ --pf-v6-l-flex--spacer--column: 0;
22088
+ }
22089
+ }
22090
+ :where(:root, .pf-v6-l-gallery) {
22091
+ --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
22092
+ --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
22093
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
22094
+ --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
22095
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
22096
+ --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-v6-l-gallery--GridTemplateColumns--minmax--min), var(--pf-v6-l-gallery--GridTemplateColumns--minmax--max)));
22097
+ --pf-v6-l-gallery--GridTemplateRows: auto;
22098
+ }
22099
+
22100
+ .pf-v6-l-gallery {
22101
+ display: grid;
22102
+ grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
22103
+ grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
22104
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
22105
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
22106
+ }
22107
+
22108
+ .pf-v6-l-gallery.pf-m-gutter {
22109
+ grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
22110
+ }
22111
+
22112
+ @media (min-width: 36rem) {
22113
+ .pf-v6-l-gallery {
22114
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
22115
+ }
22116
+ }
22117
+ @media (min-width: 48rem) {
22118
+ .pf-v6-l-gallery {
22119
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)));
22120
+ }
22121
+ }
22122
+ @media (min-width: 62rem) {
22123
+ .pf-v6-l-gallery {
22124
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))));
22125
+ }
22126
+ }
22127
+ @media (min-width: 75rem) {
22128
+ .pf-v6-l-gallery {
22129
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)))));
22130
+ }
22131
+ }
22132
+ @media (min-width: 90.625rem) {
22133
+ .pf-v6-l-gallery {
22134
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
22135
+ }
22136
+ }
22137
+ @media (min-width: 36rem) {
22138
+ .pf-v6-l-gallery {
22139
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));
22140
+ }
22141
+ }
22142
+ @media (min-width: 48rem) {
22143
+ .pf-v6-l-gallery {
22144
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)));
22145
+ }
22146
+ }
22147
+ @media (min-width: 62rem) {
22148
+ .pf-v6-l-gallery {
22149
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))));
22150
+ }
22151
+ }
22152
+ @media (min-width: 75rem) {
22153
+ .pf-v6-l-gallery {
22154
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)))));
22155
+ }
22156
+ }
22157
+ @media (min-width: 90.625rem) {
22158
+ .pf-v6-l-gallery {
22159
+ --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))))));
22160
+ }
22161
+ }
22162
+ :where(:root, .pf-v6-c-about-modal-box) {
22163
+ --pf-v6-c-about-modal-box--BackgroundImage: none;
22164
+ --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
22165
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
22166
+ --pf-v6-c-about-modal-box--BackgroundSize--min-width: 200px;
22167
+ --pf-v6-c-about-modal-box--BackgroundSize--width: 60%;
22168
+ --pf-v6-c-about-modal-box--BackgroundSize--max-width: 600px;
22169
+ --pf-v6-c-about-modal-box--BackgroundSize: clamp(var(--pf-v6-c-about-modal-box--BackgroundSize--min-width), var(--pf-v6-c-about-modal-box--BackgroundSize--width), var(--pf-v6-c-about-modal-box--BackgroundSize--max-width));
22170
+ --pf-v6-c-about-modal-box--Height: 100%;
22171
+ --pf-v6-c-about-modal-box--lg--Height: 47.625rem;
22172
+ --pf-v6-c-about-modal-box--Width: 100%;
22173
+ --pf-v6-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
22174
+ --pf-v6-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
22175
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
22176
+ --pf-v6-c-about-modal-box__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
22177
+ --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
22178
+ --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl);
22179
+ --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
22180
+ --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
22181
+ --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
22182
+ --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
22183
+ --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
22184
+ --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
22185
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
22186
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
22187
+ --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
22188
+ --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
22189
+ --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
22190
+ --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
22191
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
22192
+ --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
22193
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
22194
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
22195
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
22196
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
22197
+ --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
22198
+ --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
22199
+ --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
22200
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
22201
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
22202
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
22203
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
22204
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
22205
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
22206
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
22207
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
22208
+ }
22209
+
22210
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) :where(:root, .pf-v6-c-about-modal-box) {
22211
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
22212
+ }
22213
+
22214
+ @media screen and (min-width: 36rem) {
22215
+ :where(:root, .pf-v6-c-about-modal-box) {
22216
+ --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd);
22217
+ --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart);
22218
+ --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
22219
+ }
22220
+ }
22221
+ @media only screen and (min-width: 36rem) {
22222
+ :where(:root, .pf-v6-c-about-modal-box) {
22223
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
22224
+ }
22225
+ }
22226
+ @media only screen and (min-width: 62rem) {
22227
+ :where(:root, .pf-v6-c-about-modal-box) {
22228
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
22229
+ }
22230
+ }
22231
+ @media only screen and (min-width: 36rem) {
22232
+ :where(:root, .pf-v6-c-about-modal-box) {
22233
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
22234
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
22235
+ }
22236
+ }
22237
+ @media only screen and (min-width: 36rem) {
22238
+ :where(:root, .pf-v6-c-about-modal-box) {
22239
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
22073
22240
  }
22074
- .pf-v6-l-flex.pf-m-column-gap-xl-on-2xl {
22075
- --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--xl);
22241
+ }
22242
+ @media only screen and (min-width: 36rem) {
22243
+ :where(:root, .pf-v6-c-about-modal-box) {
22244
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
22245
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd);
22246
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd);
22247
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineStart);
22076
22248
  }
22077
- .pf-v6-l-flex.pf-m-column-gap-2xl-on-2xl {
22078
- --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--2xl);
22249
+ }
22250
+ .pf-v6-c-about-modal-box {
22251
+ position: relative;
22252
+ display: grid;
22253
+ grid-template-areas: "brand close" "header header" "content content";
22254
+ grid-template-rows: max-content max-content auto;
22255
+ width: var(--pf-v6-c-about-modal-box--Width);
22256
+ height: var(--pf-v6-c-about-modal-box--Height);
22257
+ overflow-x: hidden;
22258
+ overflow-y: auto;
22259
+ background-color: var(--pf-v6-c-about-modal-box--BackgroundColor);
22260
+ background-image: var(--pf-v6-c-about-modal-box--BackgroundImage);
22261
+ background-repeat: no-repeat;
22262
+ background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
22263
+ background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
22264
+ }
22265
+
22266
+ @media only screen and (min-width: 36rem) {
22267
+ .pf-v6-c-about-modal-box {
22268
+ grid-template-areas: "brand close" "header close" "content close";
22269
+ grid-template-columns: var(--pf-v6-c-about-modal-box--sm--GridTemplateColumns);
22079
22270
  }
22080
- .pf-v6-l-flex.pf-m-column-gap-3xl-on-2xl {
22081
- --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--3xl);
22271
+ }
22272
+ @media only screen and (min-width: 62rem) {
22273
+ .pf-v6-c-about-modal-box {
22274
+ --pf-v6-c-about-modal-box--Height: var(--pf-v6-c-about-modal-box--lg--Height);
22275
+ --pf-v6-c-about-modal-box--Width: var(--pf-v6-c-about-modal-box--lg--Width);
22276
+ grid-template-rows: max-content max-content auto;
22277
+ grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
22082
22278
  }
22083
- .pf-v6-l-flex.pf-m-column-gap-4xl-on-2xl {
22084
- --pf-v6-l-flex--ColumnGap: var(--pf-t--global--spacer--4xl);
22279
+ }
22280
+ .pf-v6-c-about-modal-box__brand {
22281
+ display: flex;
22282
+ grid-area: brand;
22283
+ padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingBlockStart);
22284
+ padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBlockEnd);
22285
+ padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingInlineStart);
22286
+ padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingInlineEnd);
22287
+ }
22288
+
22289
+ .pf-v6-c-about-modal-box__brand-image {
22290
+ height: var(--pf-v6-c-about-modal-box__brand-image--Height);
22291
+ }
22292
+
22293
+ .pf-v6-c-about-modal-box__header {
22294
+ display: flex;
22295
+ flex-direction: column;
22296
+ grid-area: header;
22297
+ padding-block-end: var(--pf-v6-c-about-modal-box__header--PaddingBlockEnd);
22298
+ padding-inline-start: var(--pf-v6-c-about-modal-box__header--PaddingInlineStart);
22299
+ padding-inline-end: var(--pf-v6-c-about-modal-box__header--PaddingInlineEnd);
22300
+ }
22301
+
22302
+ .pf-v6-c-about-modal-box__strapline {
22303
+ padding-block-start: var(--pf-v6-c-about-modal-box__strapline--PaddingBlockStart);
22304
+ margin-block-start: auto;
22305
+ font-size: var(--pf-v6-c-about-modal-box__strapline--FontSize);
22306
+ color: var(--pf-v6-c-about-modal-box__strapline--Color);
22307
+ }
22308
+
22309
+ .pf-v6-c-about-modal-box__content {
22310
+ display: flex;
22311
+ flex-direction: column;
22312
+ grid-area: content;
22313
+ margin-block-start: var(--pf-v6-c-about-modal-box__content--MarginBlockStart);
22314
+ margin-block-end: var(--pf-v6-c-about-modal-box__content--MarginBlockEnd);
22315
+ margin-inline-start: var(--pf-v6-c-about-modal-box__content--MarginInlineStart);
22316
+ margin-inline-end: var(--pf-v6-c-about-modal-box__content--MarginInlineEnd);
22317
+ overflow-x: hidden;
22318
+ overflow-y: auto;
22319
+ overscroll-behavior: contain;
22320
+ word-break: break-word;
22321
+ -webkit-overflow-scrolling: touch;
22322
+ }
22323
+
22324
+ @media screen and (min-width: 36rem) {
22325
+ .pf-v6-c-about-modal-box__content {
22326
+ overflow: visible;
22327
+ overscroll-behavior: auto;
22085
22328
  }
22086
- .pf-v6-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-xs-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
22087
- --pf-v6-l-flex--spacer--column: 0;
22329
+ }
22330
+ .pf-v6-c-about-modal-box__close {
22331
+ position: sticky;
22332
+ inset-block-start: 0;
22333
+ display: flex;
22334
+ grid-area: close;
22335
+ align-items: flex-start;
22336
+ justify-content: flex-end;
22337
+ padding-block-start: var(--pf-v6-c-about-modal-box__close--PaddingBlockStart);
22338
+ padding-block-end: var(--pf-v6-c-about-modal-box__close--PaddingBlockEnd);
22339
+ padding-inline-end: var(--pf-v6-c-about-modal-box__close--PaddingInlineEnd);
22340
+ }
22341
+
22342
+ @media only screen and (min-width: 36rem) {
22343
+ .pf-v6-c-about-modal-box__close {
22344
+ grid-area: 1/2;
22345
+ justify-content: center;
22346
+ }
22347
+ }
22348
+ @media only screen and (min-width: 62rem) {
22349
+ .pf-v6-c-about-modal-box__close {
22350
+ justify-content: flex-end;
22088
22351
  }
22089
22352
  }
22353
+ .pf-v6-c-about-modal-box__close .pf-v6-c-button.pf-m-plain {
22354
+ font-size: var(--pf-v6-c-about-modal-box__close--c-button--FontSize);
22355
+ }
22356
+
22357
+ :where(:root, .pf-v6-l-level) {
22358
+ --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
22359
+ }
22360
+
22361
+ .pf-v6-l-level {
22362
+ display: flex;
22363
+ flex-wrap: wrap;
22364
+ align-items: center;
22365
+ justify-content: space-between;
22366
+ }
22367
+
22368
+ .pf-v6-l-level.pf-m-gutter {
22369
+ gap: var(--pf-v6-l-level--m-gutter--Gap);
22370
+ }
22371
+
22090
22372
  :where(:root, .pf-v6-l-grid) {
22091
22373
  --pf-v6-l-grid--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
22092
22374
  --pf-v6-l-grid__item--GridColumnStart: auto;
@@ -23016,272 +23298,62 @@ label.pf-v6-c-tree-view__node-text {
23016
23298
  --pf-v6-l-grid__item--GridColumnStart: col-start calc(6 + 1);
23017
23299
  }
23018
23300
  .pf-v6-l-grid > .pf-m-offset-7-col-on-2xl {
23019
- --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1);
23020
- }
23021
- .pf-v6-l-grid > .pf-m-offset-8-col-on-2xl {
23022
- --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1);
23023
- }
23024
- .pf-v6-l-grid > .pf-m-offset-9-col-on-2xl {
23025
- --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1);
23026
- }
23027
- .pf-v6-l-grid > .pf-m-offset-10-col-on-2xl {
23028
- --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1);
23029
- }
23030
- .pf-v6-l-grid > .pf-m-offset-11-col-on-2xl {
23031
- --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1);
23032
- }
23033
- .pf-v6-l-grid > .pf-m-offset-12-col-on-2xl {
23034
- --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1);
23035
- }
23036
- .pf-v6-l-grid > .pf-m-1-row-on-2xl {
23037
- grid-row: span 1;
23038
- }
23039
- .pf-v6-l-grid > .pf-m-2-row-on-2xl {
23040
- grid-row: span 2;
23041
- }
23042
- .pf-v6-l-grid > .pf-m-3-row-on-2xl {
23043
- grid-row: span 3;
23044
- }
23045
- .pf-v6-l-grid > .pf-m-4-row-on-2xl {
23046
- grid-row: span 4;
23047
- }
23048
- .pf-v6-l-grid > .pf-m-5-row-on-2xl {
23049
- grid-row: span 5;
23050
- }
23051
- .pf-v6-l-grid > .pf-m-6-row-on-2xl {
23052
- grid-row: span 6;
23053
- }
23054
- .pf-v6-l-grid > .pf-m-7-row-on-2xl {
23055
- grid-row: span 7;
23056
- }
23057
- .pf-v6-l-grid > .pf-m-8-row-on-2xl {
23058
- grid-row: span 8;
23059
- }
23060
- .pf-v6-l-grid > .pf-m-9-row-on-2xl {
23061
- grid-row: span 9;
23062
- }
23063
- .pf-v6-l-grid > .pf-m-10-row-on-2xl {
23064
- grid-row: span 10;
23065
- }
23066
- .pf-v6-l-grid > .pf-m-11-row-on-2xl {
23067
- grid-row: span 11;
23068
- }
23069
- .pf-v6-l-grid > .pf-m-12-row-on-2xl {
23070
- grid-row: span 12;
23071
- }
23072
- }
23073
- .pf-v6-l-grid.pf-m-gutter {
23074
- grid-gap: var(--pf-v6-l-grid--m-gutter--GridGap);
23075
- }
23076
-
23077
- :where(:root, .pf-v6-c-about-modal-box) {
23078
- --pf-v6-c-about-modal-box--BackgroundImage: none;
23079
- --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
23080
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
23081
- --pf-v6-c-about-modal-box--BackgroundSize--min-width: 200px;
23082
- --pf-v6-c-about-modal-box--BackgroundSize--width: 60%;
23083
- --pf-v6-c-about-modal-box--BackgroundSize--max-width: 600px;
23084
- --pf-v6-c-about-modal-box--BackgroundSize: clamp(var(--pf-v6-c-about-modal-box--BackgroundSize--min-width), var(--pf-v6-c-about-modal-box--BackgroundSize--width), var(--pf-v6-c-about-modal-box--BackgroundSize--max-width));
23085
- --pf-v6-c-about-modal-box--Height: 100%;
23086
- --pf-v6-c-about-modal-box--lg--Height: 47.625rem;
23087
- --pf-v6-c-about-modal-box--Width: 100%;
23088
- --pf-v6-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
23089
- --pf-v6-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
23090
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
23091
- --pf-v6-c-about-modal-box__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
23092
- --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
23093
- --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl);
23094
- --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
23095
- --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
23096
- --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
23097
- --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
23098
- --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
23099
- --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
23100
- --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
23101
- --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
23102
- --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
23103
- --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
23104
- --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
23105
- --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
23106
- --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
23107
- --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
23108
- --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
23109
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
23110
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
23111
- --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
23112
- --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
23113
- --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
23114
- --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
23115
- --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
23116
- --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
23117
- --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
23118
- --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
23119
- --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
23120
- --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
23121
- --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
23122
- --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
23123
- }
23124
-
23125
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) :where(:root, .pf-v6-c-about-modal-box) {
23126
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
23127
- }
23128
-
23129
- @media screen and (min-width: 36rem) {
23130
- :where(:root, .pf-v6-c-about-modal-box) {
23131
- --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd);
23132
- --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart);
23133
- --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
23301
+ --pf-v6-l-grid__item--GridColumnStart: col-start calc(7 + 1);
23134
23302
  }
23135
- }
23136
- @media only screen and (min-width: 36rem) {
23137
- :where(:root, .pf-v6-c-about-modal-box) {
23138
- --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
23303
+ .pf-v6-l-grid > .pf-m-offset-8-col-on-2xl {
23304
+ --pf-v6-l-grid__item--GridColumnStart: col-start calc(8 + 1);
23139
23305
  }
23140
- }
23141
- @media only screen and (min-width: 62rem) {
23142
- :where(:root, .pf-v6-c-about-modal-box) {
23143
- --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
23306
+ .pf-v6-l-grid > .pf-m-offset-9-col-on-2xl {
23307
+ --pf-v6-l-grid__item--GridColumnStart: col-start calc(9 + 1);
23144
23308
  }
23145
- }
23146
- @media only screen and (min-width: 36rem) {
23147
- :where(:root, .pf-v6-c-about-modal-box) {
23148
- --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
23149
- --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
23309
+ .pf-v6-l-grid > .pf-m-offset-10-col-on-2xl {
23310
+ --pf-v6-l-grid__item--GridColumnStart: col-start calc(10 + 1);
23150
23311
  }
23151
- }
23152
- @media only screen and (min-width: 36rem) {
23153
- :where(:root, .pf-v6-c-about-modal-box) {
23154
- --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
23312
+ .pf-v6-l-grid > .pf-m-offset-11-col-on-2xl {
23313
+ --pf-v6-l-grid__item--GridColumnStart: col-start calc(11 + 1);
23155
23314
  }
23156
- }
23157
- @media only screen and (min-width: 36rem) {
23158
- :where(:root, .pf-v6-c-about-modal-box) {
23159
- --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
23160
- --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd);
23161
- --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd);
23162
- --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineStart);
23315
+ .pf-v6-l-grid > .pf-m-offset-12-col-on-2xl {
23316
+ --pf-v6-l-grid__item--GridColumnStart: col-start calc(12 + 1);
23163
23317
  }
23164
- }
23165
- .pf-v6-c-about-modal-box {
23166
- position: relative;
23167
- display: grid;
23168
- grid-template-areas: "brand close" "header header" "content content";
23169
- grid-template-rows: max-content max-content auto;
23170
- width: var(--pf-v6-c-about-modal-box--Width);
23171
- height: var(--pf-v6-c-about-modal-box--Height);
23172
- overflow-x: hidden;
23173
- overflow-y: auto;
23174
- background-color: var(--pf-v6-c-about-modal-box--BackgroundColor);
23175
- background-image: var(--pf-v6-c-about-modal-box--BackgroundImage);
23176
- background-repeat: no-repeat;
23177
- background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
23178
- background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
23179
- }
23180
-
23181
- @media only screen and (min-width: 36rem) {
23182
- .pf-v6-c-about-modal-box {
23183
- grid-template-areas: "brand close" "header close" "content close";
23184
- grid-template-columns: var(--pf-v6-c-about-modal-box--sm--GridTemplateColumns);
23318
+ .pf-v6-l-grid > .pf-m-1-row-on-2xl {
23319
+ grid-row: span 1;
23185
23320
  }
23186
- }
23187
- @media only screen and (min-width: 62rem) {
23188
- .pf-v6-c-about-modal-box {
23189
- --pf-v6-c-about-modal-box--Height: var(--pf-v6-c-about-modal-box--lg--Height);
23190
- --pf-v6-c-about-modal-box--Width: var(--pf-v6-c-about-modal-box--lg--Width);
23191
- grid-template-rows: max-content max-content auto;
23192
- grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
23321
+ .pf-v6-l-grid > .pf-m-2-row-on-2xl {
23322
+ grid-row: span 2;
23193
23323
  }
23194
- }
23195
- .pf-v6-c-about-modal-box__brand {
23196
- display: flex;
23197
- grid-area: brand;
23198
- padding-block-start: var(--pf-v6-c-about-modal-box__brand--PaddingBlockStart);
23199
- padding-block-end: var(--pf-v6-c-about-modal-box__brand--PaddingBlockEnd);
23200
- padding-inline-start: var(--pf-v6-c-about-modal-box__brand--PaddingInlineStart);
23201
- padding-inline-end: var(--pf-v6-c-about-modal-box__brand--PaddingInlineEnd);
23202
- }
23203
-
23204
- .pf-v6-c-about-modal-box__brand-image {
23205
- height: var(--pf-v6-c-about-modal-box__brand-image--Height);
23206
- }
23207
-
23208
- .pf-v6-c-about-modal-box__header {
23209
- display: flex;
23210
- flex-direction: column;
23211
- grid-area: header;
23212
- padding-block-end: var(--pf-v6-c-about-modal-box__header--PaddingBlockEnd);
23213
- padding-inline-start: var(--pf-v6-c-about-modal-box__header--PaddingInlineStart);
23214
- padding-inline-end: var(--pf-v6-c-about-modal-box__header--PaddingInlineEnd);
23215
- }
23216
-
23217
- .pf-v6-c-about-modal-box__strapline {
23218
- padding-block-start: var(--pf-v6-c-about-modal-box__strapline--PaddingBlockStart);
23219
- margin-block-start: auto;
23220
- font-size: var(--pf-v6-c-about-modal-box__strapline--FontSize);
23221
- color: var(--pf-v6-c-about-modal-box__strapline--Color);
23222
- }
23223
-
23224
- .pf-v6-c-about-modal-box__content {
23225
- display: flex;
23226
- flex-direction: column;
23227
- grid-area: content;
23228
- margin-block-start: var(--pf-v6-c-about-modal-box__content--MarginBlockStart);
23229
- margin-block-end: var(--pf-v6-c-about-modal-box__content--MarginBlockEnd);
23230
- margin-inline-start: var(--pf-v6-c-about-modal-box__content--MarginInlineStart);
23231
- margin-inline-end: var(--pf-v6-c-about-modal-box__content--MarginInlineEnd);
23232
- overflow-x: hidden;
23233
- overflow-y: auto;
23234
- overscroll-behavior: contain;
23235
- word-break: break-word;
23236
- -webkit-overflow-scrolling: touch;
23237
- }
23238
-
23239
- @media screen and (min-width: 36rem) {
23240
- .pf-v6-c-about-modal-box__content {
23241
- overflow: visible;
23242
- overscroll-behavior: auto;
23324
+ .pf-v6-l-grid > .pf-m-3-row-on-2xl {
23325
+ grid-row: span 3;
23243
23326
  }
23244
- }
23245
- .pf-v6-c-about-modal-box__close {
23246
- position: sticky;
23247
- inset-block-start: 0;
23248
- display: flex;
23249
- grid-area: close;
23250
- align-items: flex-start;
23251
- justify-content: flex-end;
23252
- padding-block-start: var(--pf-v6-c-about-modal-box__close--PaddingBlockStart);
23253
- padding-block-end: var(--pf-v6-c-about-modal-box__close--PaddingBlockEnd);
23254
- padding-inline-end: var(--pf-v6-c-about-modal-box__close--PaddingInlineEnd);
23255
- }
23256
-
23257
- @media only screen and (min-width: 36rem) {
23258
- .pf-v6-c-about-modal-box__close {
23259
- grid-area: 1/2;
23260
- justify-content: center;
23327
+ .pf-v6-l-grid > .pf-m-4-row-on-2xl {
23328
+ grid-row: span 4;
23261
23329
  }
23262
- }
23263
- @media only screen and (min-width: 62rem) {
23264
- .pf-v6-c-about-modal-box__close {
23265
- justify-content: flex-end;
23330
+ .pf-v6-l-grid > .pf-m-5-row-on-2xl {
23331
+ grid-row: span 5;
23332
+ }
23333
+ .pf-v6-l-grid > .pf-m-6-row-on-2xl {
23334
+ grid-row: span 6;
23335
+ }
23336
+ .pf-v6-l-grid > .pf-m-7-row-on-2xl {
23337
+ grid-row: span 7;
23338
+ }
23339
+ .pf-v6-l-grid > .pf-m-8-row-on-2xl {
23340
+ grid-row: span 8;
23341
+ }
23342
+ .pf-v6-l-grid > .pf-m-9-row-on-2xl {
23343
+ grid-row: span 9;
23344
+ }
23345
+ .pf-v6-l-grid > .pf-m-10-row-on-2xl {
23346
+ grid-row: span 10;
23347
+ }
23348
+ .pf-v6-l-grid > .pf-m-11-row-on-2xl {
23349
+ grid-row: span 11;
23350
+ }
23351
+ .pf-v6-l-grid > .pf-m-12-row-on-2xl {
23352
+ grid-row: span 12;
23266
23353
  }
23267
23354
  }
23268
- .pf-v6-c-about-modal-box__close .pf-v6-c-button.pf-m-plain {
23269
- font-size: var(--pf-v6-c-about-modal-box__close--c-button--FontSize);
23270
- }
23271
-
23272
- :where(:root, .pf-v6-l-level) {
23273
- --pf-v6-l-level--m-gutter--Gap: var(--pf-t--global--spacer--gutter--default);
23274
- }
23275
-
23276
- .pf-v6-l-level {
23277
- display: flex;
23278
- flex-wrap: wrap;
23279
- align-items: center;
23280
- justify-content: space-between;
23281
- }
23282
-
23283
- .pf-v6-l-level.pf-m-gutter {
23284
- gap: var(--pf-v6-l-level--m-gutter--Gap);
23355
+ .pf-v6-l-grid.pf-m-gutter {
23356
+ grid-gap: var(--pf-v6-l-grid--m-gutter--GridGap);
23285
23357
  }
23286
23358
 
23287
23359
  :where(:root, .pf-v6-l-split) {
@@ -23322,77 +23394,4 @@ label.pf-v6-c-tree-view__node-text {
23322
23394
 
23323
23395
  .pf-v6-l-stack.pf-m-gutter {
23324
23396
  gap: var(--pf-v6-l-stack--m-gutter--Gap);
23325
- }
23326
-
23327
- :where(:root, .pf-v6-l-gallery) {
23328
- --pf-v6-l-gallery--m-gutter--GridGap: var(--pf-t--global--spacer--gutter--default);
23329
- --pf-v6-l-gallery--GridTemplateColumns--min: 250px;
23330
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
23331
- --pf-v6-l-gallery--GridTemplateColumns--max: 1fr;
23332
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
23333
- --pf-v6-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-v6-l-gallery--GridTemplateColumns--minmax--min), var(--pf-v6-l-gallery--GridTemplateColumns--minmax--max)));
23334
- --pf-v6-l-gallery--GridTemplateRows: auto;
23335
- }
23336
-
23337
- .pf-v6-l-gallery {
23338
- display: grid;
23339
- grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
23340
- grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
23341
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
23342
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
23343
- }
23344
-
23345
- .pf-v6-l-gallery.pf-m-gutter {
23346
- grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
23347
- }
23348
-
23349
- @media (min-width: 36rem) {
23350
- .pf-v6-l-gallery {
23351
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
23352
- }
23353
- }
23354
- @media (min-width: 48rem) {
23355
- .pf-v6-l-gallery {
23356
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)));
23357
- }
23358
- }
23359
- @media (min-width: 62rem) {
23360
- .pf-v6-l-gallery {
23361
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))));
23362
- }
23363
- }
23364
- @media (min-width: 75rem) {
23365
- .pf-v6-l-gallery {
23366
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min)))));
23367
- }
23368
- }
23369
- @media (min-width: 90.625rem) {
23370
- .pf-v6-l-gallery {
23371
- --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
23372
- }
23373
- }
23374
- @media (min-width: 36rem) {
23375
- .pf-v6-l-gallery {
23376
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));
23377
- }
23378
- }
23379
- @media (min-width: 48rem) {
23380
- .pf-v6-l-gallery {
23381
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)));
23382
- }
23383
- }
23384
- @media (min-width: 62rem) {
23385
- .pf-v6-l-gallery {
23386
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))));
23387
- }
23388
- }
23389
- @media (min-width: 75rem) {
23390
- .pf-v6-l-gallery {
23391
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max)))));
23392
- }
23393
- }
23394
- @media (min-width: 90.625rem) {
23395
- .pf-v6-l-gallery {
23396
- --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max))))));
23397
- }
23398
23397
  }