@patternfly/react-styles 6.0.0-prerelease.1 → 6.0.0-prerelease.3

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 (101) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +18 -13
  3. package/css/components/Accordion/accordion.css +4 -3
  4. package/css/components/ActionList/action-list.css +2 -1
  5. package/css/components/Alert/alert-group.css +2 -1
  6. package/css/components/Alert/alert.css +5 -3
  7. package/css/components/Avatar/avatar.css +2 -1
  8. package/css/components/BackToTop/back-to-top.css +4 -2
  9. package/css/components/Backdrop/backdrop.css +2 -1
  10. package/css/components/BackgroundImage/background-image.css +2 -1
  11. package/css/components/Badge/badge.css +2 -1
  12. package/css/components/Banner/banner.css +4 -2
  13. package/css/components/Brand/brand.css +2 -1
  14. package/css/components/Breadcrumb/breadcrumb.css +2 -1
  15. package/css/components/Button/button.css +4 -3
  16. package/css/components/CalendarMonth/calendar-month.css +3 -2
  17. package/css/components/Card/card.css +6 -4
  18. package/css/components/Check/check.css +3 -2
  19. package/css/components/ClipboardCopy/clipboard-copy.css +5 -7
  20. package/css/components/CodeBlock/code-block.css +2 -1
  21. package/css/components/CodeEditor/code-editor.css +3 -2
  22. package/css/components/Content/content.css +2 -1
  23. package/css/components/DataList/data-list.css +6 -3
  24. package/css/components/DatePicker/date-picker.css +2 -1
  25. package/css/components/DescriptionList/description-list.css +20 -13
  26. package/css/components/Divider/divider.css +2 -1
  27. package/css/components/DragDrop/drag-drop.css +4 -2
  28. package/css/components/Drawer/drawer.css +7 -4
  29. package/css/components/DualListSelector/dual-list-selector.css +6 -4
  30. package/css/components/EmptyState/empty-state.css +2 -1
  31. package/css/components/ExpandableSection/expandable-section.css +2 -1
  32. package/css/components/FileUpload/file-upload.css +3 -2
  33. package/css/components/Form/form.css +14 -18
  34. package/css/components/FormControl/form-control.css +4 -3
  35. package/css/components/HelperText/helper-text.css +2 -1
  36. package/css/components/Hint/hint.css +2 -1
  37. package/css/components/Icon/icon.css +2 -1
  38. package/css/components/InlineEdit/inline-edit.css +2 -1
  39. package/css/components/InputGroup/input-group.css +3 -2
  40. package/css/components/JumpLinks/jump-links.css +5 -3
  41. package/css/components/Label/label-group.css +2 -1
  42. package/css/components/Label/label.css +3 -2
  43. package/css/components/List/list.css +2 -1
  44. package/css/components/Login/login.css +18 -9
  45. package/css/components/Masthead/masthead.css +2 -1
  46. package/css/components/Menu/menu.css +6 -5
  47. package/css/components/MenuToggle/menu-toggle.css +2 -1
  48. package/css/components/ModalBox/modal-box.css +4 -2
  49. package/css/components/MultipleFileUpload/multiple-file-upload.css +2 -1
  50. package/css/components/Nav/nav.css +2 -1
  51. package/css/components/NotificationDrawer/notification-drawer.css +2 -1
  52. package/css/components/NumberInput/number-input.css +2 -1
  53. package/css/components/OverflowMenu/overflow-menu.css +2 -1
  54. package/css/components/Page/page.css +7 -4
  55. package/css/components/Pagination/pagination.css +6 -3
  56. package/css/components/Panel/panel.css +2 -1
  57. package/css/components/Popover/popover.css +2 -1
  58. package/css/components/Progress/progress.css +2 -1
  59. package/css/components/ProgressStepper/progress-stepper.css +4 -2
  60. package/css/components/Radio/radio.css +2 -1
  61. package/css/components/Sidebar/sidebar.css +2 -1
  62. package/css/components/SimpleList/simple-list.css +2 -1
  63. package/css/components/Skeleton/skeleton.css +2 -1
  64. package/css/components/SkipToContent/skip-to-content.css +2 -1
  65. package/css/components/Slider/slider.css +2 -1
  66. package/css/components/Spinner/spinner.css +2 -1
  67. package/css/components/Switch/switch.css +2 -1
  68. package/css/components/TabContent/tab-content.css +2 -1
  69. package/css/components/Table/table-grid.css +2 -1
  70. package/css/components/Table/table-scrollable.css +2 -1
  71. package/css/components/Table/table-tree-view.css +2 -1
  72. package/css/components/Table/table.css +44 -42
  73. package/css/components/Table/table.d.ts +5 -5
  74. package/css/components/Table/table.js +5 -5
  75. package/css/components/Table/table.mjs +5 -5
  76. package/css/components/Tabs/tabs.css +2 -1
  77. package/css/components/TextInputGroup/text-input-group.css +2 -1
  78. package/css/components/Tile/tile.css +2 -1
  79. package/css/components/Timestamp/timestamp.css +2 -1
  80. package/css/components/Title/title.css +2 -1
  81. package/css/components/ToggleGroup/toggle-group.css +2 -1
  82. package/css/components/Toolbar/toolbar.css +5 -3
  83. package/css/components/Tooltip/tooltip.css +2 -1
  84. package/css/components/TreeView/tree-view.css +2 -1
  85. package/css/components/Truncate/truncate.css +2 -1
  86. package/css/components/Wizard/wizard.css +7 -4
  87. package/css/components/_index.css +337 -224
  88. package/css/components/_index.d.ts +1 -1
  89. package/css/components/_index.js +1 -1
  90. package/css/components/_index.mjs +1 -1
  91. package/css/layouts/Bullseye/bullseye.css +2 -1
  92. package/css/layouts/Flex/flex.css +2 -1
  93. package/css/layouts/Gallery/gallery.css +2 -1
  94. package/css/layouts/Grid/grid.css +2 -1
  95. package/css/layouts/Level/level.css +2 -1
  96. package/css/layouts/Split/split.css +2 -1
  97. package/css/layouts/Stack/stack.css +2 -1
  98. package/css/layouts/_index.css +14 -7
  99. package/css/utilities/Text/text.css +6 -6
  100. package/css/utilities/_index.css +6 -6
  101. package/package.json +3 -3
@@ -1,8 +1,8 @@
1
1
  @charset "UTF-8";
2
- :where(:root, .pf-v6-c-about-modal-box) {
2
+ :root,
3
+ .pf-v6-c-about-modal-box {
3
4
  --pf-v6-c-about-modal-box--BackgroundImage: none;
4
5
  --pf-v6-c-about-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
5
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
6
6
  --pf-v6-c-about-modal-box--BackgroundSize--min-width: 200px;
7
7
  --pf-v6-c-about-modal-box--BackgroundSize--width: 60%;
8
8
  --pf-v6-c-about-modal-box--BackgroundSize--max-width: 600px;
@@ -12,7 +12,6 @@
12
12
  --pf-v6-c-about-modal-box--Width: 100%;
13
13
  --pf-v6-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
14
14
  --pf-v6-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
15
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
16
15
  --pf-v6-c-about-modal-box__brand--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
17
16
  --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
18
17
  --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-t--global--spacer--xl);
@@ -46,40 +45,42 @@
46
45
  --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
47
46
  --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
48
47
  }
49
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) :where(:root, .pf-v6-c-about-modal-box) {
50
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
51
- }
52
-
53
48
  @media screen and (min-width: 36rem) {
54
- :where(:root, .pf-v6-c-about-modal-box) {
49
+ :root,
50
+ .pf-v6-c-about-modal-box {
55
51
  --pf-v6-c-about-modal-box__brand--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd);
56
52
  --pf-v6-c-about-modal-box__brand--PaddingInlineStart: var(--pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart);
57
53
  --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
58
54
  }
59
55
  }
60
56
  @media only screen and (min-width: 36rem) {
61
- :where(:root, .pf-v6-c-about-modal-box) {
57
+ :root,
58
+ .pf-v6-c-about-modal-box {
62
59
  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
63
60
  }
64
61
  }
65
62
  @media only screen and (min-width: 62rem) {
66
- :where(:root, .pf-v6-c-about-modal-box) {
63
+ :root,
64
+ .pf-v6-c-about-modal-box {
67
65
  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
68
66
  }
69
67
  }
70
68
  @media only screen and (min-width: 36rem) {
71
- :where(:root, .pf-v6-c-about-modal-box) {
69
+ :root,
70
+ .pf-v6-c-about-modal-box {
72
71
  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
73
72
  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
74
73
  }
75
74
  }
76
75
  @media only screen and (min-width: 36rem) {
77
- :where(:root, .pf-v6-c-about-modal-box) {
76
+ :root,
77
+ .pf-v6-c-about-modal-box {
78
78
  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
79
79
  }
80
80
  }
81
81
  @media only screen and (min-width: 36rem) {
82
- :where(:root, .pf-v6-c-about-modal-box) {
82
+ :root,
83
+ .pf-v6-c-about-modal-box {
83
84
  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
84
85
  --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginInlineEnd);
85
86
  --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockEnd);
@@ -101,6 +102,7 @@
101
102
  background-repeat: no-repeat;
102
103
  background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
103
104
  background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
105
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
104
106
  }
105
107
  @media only screen and (min-width: 36rem) {
106
108
  .pf-v6-c-about-modal-box {
@@ -116,6 +118,9 @@
116
118
  grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
117
119
  }
118
120
  }
121
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
122
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
123
+ }
119
124
 
120
125
  .pf-v6-c-about-modal-box__brand {
121
126
  display: flex;
@@ -193,12 +198,13 @@
193
198
  font-size: var(--pf-v6-c-about-modal-box__close--c-button--FontSize);
194
199
  }
195
200
 
196
- :where(:root, .pf-v6-c-accordion) {
201
+ :root,
202
+ .pf-v6-c-accordion {
197
203
  --pf-v6-c-accordion--BackgroundColor: var(--pf-t--global--background--color--primary--default);
198
204
  --pf-v6-c-accordion--RowGap: var(--pf-t--global--spacer--xs);
199
205
  --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
200
206
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
201
- --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--sm);
207
+ --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
202
208
  --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
203
209
  --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
204
210
  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -207,7 +213,7 @@
207
213
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
208
214
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
209
215
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
210
- --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--md);
216
+ --pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
211
217
  --pf-v6-c-accordion__toggle-text--Color: var(--pf-t--global--text--color--regular);
212
218
  --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
213
219
  --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -345,7 +351,8 @@
345
351
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-v6-c-accordion__expandable-content-body--expandable-content-body--PaddingBlockStart);
346
352
  }
347
353
 
348
- :where(:root, .pf-v6-c-action-list) {
354
+ :root,
355
+ .pf-v6-c-action-list {
349
356
  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
350
357
  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
351
358
  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
@@ -375,7 +382,8 @@
375
382
  column-gap: var(--pf-v6-c-action-list--m-icons--ColumnGap);
376
383
  }
377
384
 
378
- :where(:root, .pf-v6-c-alert) {
385
+ :root,
386
+ .pf-v6-c-alert {
379
387
  --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--lg);
380
388
  --pf-v6-c-alert--BackgroundColor: var(--pf-t--global--background--color--floating--default);
381
389
  --pf-v6-c-alert--GridTemplateColumns: max-content 1fr max-content;
@@ -395,7 +403,8 @@
395
403
  --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
396
404
  --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
397
405
  --pf-v6-c-alert__toggle-icon--Rotate: 0;
398
- --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
406
+ --pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
407
+ --pf-v6-c-alert__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
399
408
  --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
400
409
  --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
401
410
  --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -516,7 +525,7 @@
516
525
 
517
526
  .pf-v6-c-alert__toggle-icon {
518
527
  display: inline-block;
519
- transition: var(--pf-v6-c-alert__toggle-icon--Transition);
528
+ transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
520
529
  transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
521
530
  }
522
531
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
@@ -573,7 +582,8 @@
573
582
  margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
574
583
  }
575
584
 
576
- :where(:root, .pf-v6-c-alert-group) {
585
+ :root,
586
+ .pf-v6-c-alert-group {
577
587
  --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
578
588
  --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
579
589
  --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
@@ -687,7 +697,8 @@
687
697
  --pf-v6-c-alert-group__overflow-button--BoxShadow: var(--pf-v6-c-alert-group__overflow-button--active--BoxShadow);
688
698
  }
689
699
 
690
- :where(:root, .pf-v6-c-avatar) {
700
+ :root,
701
+ .pf-v6-c-avatar {
691
702
  --pf-v6-c-avatar--BorderColor: transparent;
692
703
  --pf-v6-c-avatar--BorderWidth: 0;
693
704
  --pf-v6-c-avatar--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -932,7 +943,8 @@
932
943
  }
933
944
  }
934
945
 
935
- :where(:root, .pf-v6-c-backdrop) {
946
+ :root,
947
+ .pf-v6-c-backdrop {
936
948
  --pf-v6-c-backdrop--Position: fixed;
937
949
  --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
938
950
  --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
@@ -952,7 +964,8 @@
952
964
  overflow: hidden;
953
965
  }
954
966
 
955
- :where(:root, .pf-v6-c-background-image) {
967
+ :root,
968
+ .pf-v6-c-background-image {
956
969
  --pf-v6-c-background-image--BackgroundColor: var(--pf-t--global--background--color--primary--default);
957
970
  --pf-v6-c-background-image--BackgroundImage: none;
958
971
  --pf-v6-c-background-image--BackgroundSize--min-width: 200px;
@@ -979,7 +992,8 @@
979
992
  --pf-v6-c-background-image--BackgroundPosition: bottom left;
980
993
  }
981
994
 
982
- :where(:root, .pf-v6-c-back-to-top) {
995
+ :root,
996
+ .pf-v6-c-back-to-top {
983
997
  --pf-v6-c-back-to-top--InsetInlineEnd: var(--pf-t--global--spacer--2xl);
984
998
  --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-t--global--spacer--lg);
985
999
  --pf-v6-c-back-to-top--md--InsetBlockEnd: var(--pf-t--global--spacer--2xl);
@@ -991,7 +1005,8 @@
991
1005
  --pf-v6-c-back-to-top--c-button--BoxShadow: var(--pf-t--global--box-shadow--sm);
992
1006
  }
993
1007
  @media (min-width: 48rem) {
994
- :where(:root, .pf-v6-c-back-to-top) {
1008
+ :root,
1009
+ .pf-v6-c-back-to-top {
995
1010
  --pf-v6-c-back-to-top--InsetBlockEnd: var(--pf-v6-c-back-to-top--md--InsetBlockEnd);
996
1011
  }
997
1012
  }
@@ -1013,7 +1028,8 @@
1013
1028
  box-shadow: var(--pf-v6-c-back-to-top--c-button--BoxShadow);
1014
1029
  }
1015
1030
 
1016
- :where(:root, .pf-v6-c-badge) {
1031
+ :root,
1032
+ .pf-v6-c-badge {
1017
1033
  --pf-v6-c-badge--BorderColor: transparent;
1018
1034
  --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1019
1035
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -1081,7 +1097,8 @@
1081
1097
  color: var(--pf-v6-c-badge__toggle-icon--Color);
1082
1098
  }
1083
1099
 
1084
- :where(:root, .pf-v6-c-banner) {
1100
+ :root,
1101
+ .pf-v6-c-banner {
1085
1102
  --pf-v6-c-banner--PaddingBlockStart: var(--pf-t--global--spacer--xs);
1086
1103
  --pf-v6-c-banner--PaddingInlineEnd: var(--pf-t--global--spacer--md);
1087
1104
  --pf-v6-c-banner--md--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -1125,7 +1142,8 @@
1125
1142
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
1126
1143
  }
1127
1144
  @media (min-width: 48rem) {
1128
- :where(:root, .pf-v6-c-banner) {
1145
+ :root,
1146
+ .pf-v6-c-banner {
1129
1147
  --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
1130
1148
  --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
1131
1149
  }
@@ -1221,7 +1239,8 @@
1221
1239
  cursor: not-allowed;
1222
1240
  }
1223
1241
 
1224
- :where(:root, .pf-v6-c-brand) {
1242
+ :root,
1243
+ .pf-v6-c-brand {
1225
1244
  --pf-v6-c-brand--Width: auto;
1226
1245
  --pf-v6-c-brand--Height: auto;
1227
1246
  }
@@ -1287,7 +1306,8 @@
1287
1306
  max-width: 100%;
1288
1307
  }
1289
1308
 
1290
- :where(:root, .pf-v6-c-breadcrumb) {
1309
+ :root,
1310
+ .pf-v6-c-breadcrumb {
1291
1311
  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
1292
1312
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
1293
1313
  --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1395,11 +1415,13 @@ button.pf-v6-c-breadcrumb__link {
1395
1415
  display: none;
1396
1416
  }
1397
1417
 
1398
- :where(:root, .pf-v6-c-button) {
1418
+ :root,
1419
+ .pf-v6-c-button {
1399
1420
  --pf-v6-c-button--Display: inline-flex;
1400
1421
  --pf-v6-c-button--AlignItems: baseline;
1401
1422
  --pf-v6-c-button--JustifyContent: center;
1402
1423
  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1424
+ --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1403
1425
  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1404
1426
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1405
1427
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
@@ -1508,7 +1530,6 @@ button.pf-v6-c-breadcrumb__link {
1508
1530
  --pf-v6-c-button--m-plain--Color: var(--pf-t--global--icon--color--regular);
1509
1531
  --pf-v6-c-button--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
1510
1532
  --pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1511
- --pf-v6-c-button--m-plain--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1512
1533
  --pf-v6-c-button--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
1513
1534
  --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
1514
1535
  --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
@@ -1636,6 +1657,7 @@ button.pf-v6-c-breadcrumb__link {
1636
1657
  gap: var(--pf-v6-c-button--Gap);
1637
1658
  align-items: var(--pf-v6-c-button--AlignItems);
1638
1659
  justify-content: var(--pf-v6-c-button--JustifyContent);
1660
+ min-width: var(--pf-v6-c-button--MinWidth);
1639
1661
  padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
1640
1662
  padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
1641
1663
  padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -1872,7 +1894,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1872
1894
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
1873
1895
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
1874
1896
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
1875
- min-width: var(--pf-v6-c-button--m-plain--MinWidth);
1876
1897
  }
1877
1898
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
1878
1899
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
@@ -1982,7 +2003,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1982
2003
  align-items: center;
1983
2004
  }
1984
2005
 
1985
- :where(:root, .pf-v6-c-calendar-month) {
2006
+ :root,
2007
+ .pf-v6-c-calendar-month {
1986
2008
  --pf-v6-c-calendar-month--BackgroundColor: var(--pf-t--global--background--color--primary--default);
1987
2009
  --pf-v6-c-calendar-month--PaddingBlockStart: var(--pf-t--global--spacer--lg);
1988
2010
  --pf-v6-c-calendar-month--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -1990,7 +2012,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1990
2012
  --pf-v6-c-calendar-month--PaddingInlineStart: var(--pf-t--global--spacer--lg);
1991
2013
  --pf-v6-c-calendar-month--FontSize: var(--pf-t--global--font--size--sm);
1992
2014
  --pf-v6-c-calendar-month__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
1993
- --pf-v6-c-calendar-month__header--Gap: var(--pf-t--global--spacer--xs);
2015
+ --pf-v6-c-calendar-month__header--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
1994
2016
  --pf-v6-c-calendar-month__header-year--Width: 9ch;
1995
2017
  --pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd: 0;
1996
2018
  --pf-v6-c-calendar-month__header-nav-control--MarginInlineStart: 0;
@@ -2187,7 +2209,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2187
2209
  pointer-events: none;
2188
2210
  }
2189
2211
 
2190
- :where(:root, .pf-v6-c-card) {
2212
+ :root,
2213
+ .pf-v6-c-card {
2191
2214
  --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
2192
2215
  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
2193
2216
  --pf-v6-c-card--BorderStyle: solid;
@@ -2209,14 +2232,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2209
2232
  --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
2210
2233
  --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
2211
2234
  --pf-v6-c-card__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
2212
- --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--sm);
2235
+ --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
2213
2236
  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2214
2237
  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2215
2238
  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2216
2239
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
2217
2240
  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
2218
2241
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2219
- --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
2242
+ --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
2243
+ --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
2220
2244
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2221
2245
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2222
2246
  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -2389,7 +2413,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2389
2413
 
2390
2414
  .pf-v6-c-card__header-toggle-icon {
2391
2415
  display: inline-block;
2392
- transition: var(--pf-v6-c-card__header-toggle-icon--Transition);
2416
+ transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
2393
2417
  }
2394
2418
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
2395
2419
  scale: -1 1;
@@ -2520,8 +2544,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2520
2544
  color: var(--pf-v6-c-card__footer--Color);
2521
2545
  }
2522
2546
 
2523
- :where(:root, .pf-v6-c-check) {
2524
- --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
2547
+ :root,
2548
+ .pf-v6-c-check {
2549
+ --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
2525
2550
  --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
2526
2551
  --pf-v6-c-check--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
2527
2552
  --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -2599,7 +2624,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2599
2624
  color: var(--pf-v6-c-check__label-required--Color);
2600
2625
  }
2601
2626
 
2602
- :where(:root, .pf-v6-c-clipboard-copy) {
2627
+ :root,
2628
+ .pf-v6-c-clipboard-copy {
2603
2629
  --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
2604
2630
  --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
2605
2631
  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
@@ -2615,12 +2641,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2615
2641
  --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
2616
2642
  --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
2617
2643
  --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
2618
- --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
2644
+ --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
2619
2645
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
2620
2646
  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
2621
2647
  --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2622
- --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--sm);
2623
- --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--xs);
2648
+ --pf-v6-c-clipboard-copy__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
2649
+ --pf-v6-c-clipboard-copy__actions--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--compact);
2624
2650
  --pf-v6-c-clipboard-copy__actions-item--button--Color: var(--pf-t--global--icon--color--subtle);
2625
2651
  --pf-v6-c-clipboard-copy__actions-item--button--hover--Color: var(--pf-t--global--icon--color--regular);
2626
2652
  --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
@@ -2645,9 +2671,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2645
2671
  display: flex;
2646
2672
  gap: var(--pf-v6-c-clipboard-copy__group--Gap);
2647
2673
  }
2648
- .pf-v6-c-clipboard-copy__group > * + * {
2649
- margin-inline-start: -1px;
2650
- }
2651
2674
 
2652
2675
  .pf-v6-c-clipboard-copy__toggle-icon {
2653
2676
  transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
@@ -2697,7 +2720,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2697
2720
  --pf-v6-c-button--m-plain--hover__icon--Color: var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color);
2698
2721
  }
2699
2722
 
2700
- :where(:root, .pf-v6-c-code-block) {
2723
+ :root,
2724
+ .pf-v6-c-code-block {
2701
2725
  --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2702
2726
  --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
2703
2727
  --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -2751,9 +2775,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2751
2775
  font-family: var(--pf-v6-c-code-block__code--FontFamily, inherit);
2752
2776
  }
2753
2777
 
2754
- :where(:root, .pf-v6-c-code-editor) {
2778
+ :root,
2779
+ .pf-v6-c-code-editor {
2755
2780
  --pf-v6-c-code-editor__controls--PaddingInlineStart: var(--pf-t--global--spacer--sm);
2756
- --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--xs);
2781
+ --pf-v6-c-code-editor__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
2757
2782
  --pf-v6-c-code-editor__header--before--BorderBlockEndWidth: var(--pf-t--global--border--width--box--default);
2758
2783
  --pf-v6-c-code-editor__header--before--BorderBlockEndColor: var(--pf-t--global--border--color--default);
2759
2784
  --pf-v6-c-code-editor__header-content--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -2928,7 +2953,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
2928
2953
  margin-inline-start: var(--pf-v6-c-code-editor__tab-icon--text--MarginInlineStart);
2929
2954
  }
2930
2955
 
2931
- :where(:root, .pf-v6-c-content) {
2956
+ :root,
2957
+ .pf-v6-c-content {
2932
2958
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
2933
2959
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
2934
2960
  --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
@@ -3604,7 +3630,8 @@ ul) {
3604
3630
  }
3605
3631
  }
3606
3632
 
3607
- :where(:root, .pf-v6-c-data-list) {
3633
+ :root,
3634
+ .pf-v6-c-data-list {
3608
3635
  --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
3609
3636
  --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
3610
3637
  --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default);
@@ -3714,13 +3741,15 @@ ul) {
3714
3741
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3715
3742
  }
3716
3743
  @media screen and (min-width: 36rem) {
3717
- :where(:root, .pf-v6-c-data-list) {
3744
+ :root,
3745
+ .pf-v6-c-data-list {
3718
3746
  --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
3719
3747
  --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
3720
3748
  }
3721
3749
  }
3722
3750
  @media screen and (min-width: 36rem) {
3723
- :where(:root, .pf-v6-c-data-list) {
3751
+ :root,
3752
+ .pf-v6-c-data-list {
3724
3753
  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
3725
3754
  --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
3726
3755
  }
@@ -4029,19 +4058,20 @@ ul) {
4029
4058
  padding: 0;
4030
4059
  }
4031
4060
 
4032
- :where(:root, .pf-v6-c-description-list) {
4033
- --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--lg);
4034
- --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--lg);
4061
+ :root,
4062
+ .pf-v6-c-description-list {
4063
+ --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
4064
+ --pf-v6-c-description-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
4035
4065
  --pf-v6-c-description-list--GridTemplateColumns--count: 1;
4036
4066
  --pf-v6-c-description-list--GridTemplateColumns--width: 1fr;
4037
4067
  --pf-v6-c-description-list--GridTemplateColumns--min: 0;
4038
- --pf-v6-c-description-list__group--RowGap: var(--pf-t--global--spacer--sm);
4039
- --pf-v6-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--sm);
4068
+ --pf-v6-c-description-list__group--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
4069
+ --pf-v6-c-description-list__group--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
4040
4070
  --pf-v6-c-description-list__group--GridTemplateColumns: auto;
4041
4071
  --pf-v6-c-description-list__group--GridTemplateRows: auto 1fr;
4042
4072
  --pf-v6-c-description-list__group--GridColumn: auto;
4043
- --pf-v6-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--md);
4044
- --pf-v6-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--sm);
4073
+ --pf-v6-c-description-list--m-compact--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--compact);
4074
+ --pf-v6-c-description-list--m-compact--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--compact);
4045
4075
  --pf-v6-c-description-list__term--Display: inline;
4046
4076
  --pf-v6-c-description-list__term--sm--Display: flex;
4047
4077
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -4076,32 +4106,38 @@ ul) {
4076
4106
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
4077
4107
  }
4078
4108
  @media screen and (min-width: 36rem) {
4079
- :where(:root, .pf-v6-c-description-list) {
4109
+ :root,
4110
+ .pf-v6-c-description-list {
4080
4111
  --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
4081
4112
  }
4082
4113
  }
4083
4114
  @media (min-width: 36rem) {
4084
- :where(:root, .pf-v6-c-description-list) {
4115
+ :root,
4116
+ .pf-v6-c-description-list {
4085
4117
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width));
4086
4118
  }
4087
4119
  }
4088
4120
  @media (min-width: 48rem) {
4089
- :where(:root, .pf-v6-c-description-list) {
4121
+ :root,
4122
+ .pf-v6-c-description-list {
4090
4123
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)));
4091
4124
  }
4092
4125
  }
4093
4126
  @media (min-width: 62rem) {
4094
- :where(:root, .pf-v6-c-description-list) {
4127
+ :root,
4128
+ .pf-v6-c-description-list {
4095
4129
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))));
4096
4130
  }
4097
4131
  }
4098
4132
  @media (min-width: 75rem) {
4099
- :where(:root, .pf-v6-c-description-list) {
4133
+ :root,
4134
+ .pf-v6-c-description-list {
4100
4135
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width)))));
4101
4136
  }
4102
4137
  }
4103
4138
  @media (min-width: 90.625rem) {
4104
- :where(:root, .pf-v6-c-description-list) {
4139
+ :root,
4140
+ .pf-v6-c-description-list {
4105
4141
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width-on-2xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-xl, var(--pf-v6-c-description-list--m-horizontal__term--width-on-lg, var(--pf-v6-c-description-list--m-horizontal__term--width-on-md, var(--pf-v6-c-description-list--m-horizontal__term--width-on-sm, var(--pf-v6-c-description-list--m-horizontal__term--width))))));
4106
4142
  }
4107
4143
  }
@@ -4349,7 +4385,8 @@ ul) {
4349
4385
  }
4350
4386
  }
4351
4387
 
4352
- :where(:root, .pf-v6-c-draggable) {
4388
+ :root,
4389
+ .pf-v6-c-draggable {
4353
4390
  --pf-v6-c-draggable--Cursor: auto;
4354
4391
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
4355
4392
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
@@ -4385,7 +4422,8 @@ ul) {
4385
4422
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-v6-c-draggable--m-drag-outside--after--BorderColor);
4386
4423
  }
4387
4424
 
4388
- :where(:root, .pf-v6-c-droppable) {
4425
+ :root,
4426
+ .pf-v6-c-droppable {
4389
4427
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
4390
4428
  --pf-v6-c-droppable--before--Opacity: 0;
4391
4429
  --pf-v6-c-droppable--after--BorderWidth: 0;
@@ -4426,7 +4464,8 @@ ul) {
4426
4464
  --pf-v6-c-droppable--m-dragging--after--BorderColor: var(--pf-v6-c-droppable--m-drag-outside--after--BorderColor);
4427
4465
  }
4428
4466
 
4429
- :where(:root, .pf-v6-c-dual-list-selector) {
4467
+ :root,
4468
+ .pf-v6-c-dual-list-selector {
4430
4469
  --pf-v6-c-dual-list-selector__header--GridArea: pane-header;
4431
4470
  --pf-v6-c-dual-list-selector__tools--GridArea: pane-tools;
4432
4471
  --pf-v6-c-dual-list-selector__status--GridArea: pane-status;
@@ -4471,7 +4510,7 @@ ul) {
4471
4510
  --pf-v6-c-dual-list-selector__status-text--Color: var(--pf-t--global--text--color--subtle);
4472
4511
  --pf-v6-c-dual-list-selector__controls--PaddingInlineEnd: var(--pf-t--global--spacer--md);
4473
4512
  --pf-v6-c-dual-list-selector__controls--PaddingInlineStart: var(--pf-t--global--spacer--md);
4474
- --pf-v6-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--sm);
4513
+ --pf-v6-c-dual-list-selector__controls--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
4475
4514
  --pf-v6-c-dual-list-selector__controls--MarginBlockStart: var(--pf-t--global--spacer--md);
4476
4515
  --pf-v6-c-dual-list-selector__item-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
4477
4516
  --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: 0;
@@ -4481,7 +4520,8 @@ ul) {
4481
4520
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
4482
4521
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
4483
4522
  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
4484
- --pf-v6-c-dual-list-selector__item-toggle-icon--Transition: var(--pf-t--global--transition);
4523
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
4524
+ --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
4485
4525
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
4486
4526
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
4487
4527
  }
@@ -4704,7 +4744,7 @@ ul) {
4704
4744
  min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
4705
4745
  color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
4706
4746
  text-align: center;
4707
- transition: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Transition);
4747
+ transition: transform var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration) var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
4708
4748
  transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
4709
4749
  }
4710
4750
 
@@ -4749,7 +4789,8 @@ ul) {
4749
4789
  --pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart: var(--pf-v6-c-dual-list-selector__item--PaddingInlineStart);
4750
4790
  }
4751
4791
 
4752
- :where(:root, .pf-v6-c-date-picker) {
4792
+ :root,
4793
+ .pf-v6-c-date-picker {
4753
4794
  --pf-v6-c-date-picker--m-top__calendar--InsetBlockStart: 0;
4754
4795
  --pf-v6-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-t--global--spacer--xs));
4755
4796
  --pf-v6-c-date-picker__helper-text--MarginBlockStart: var(--pf-t--global--spacer--sm);
@@ -4807,7 +4848,8 @@ ul) {
4807
4848
  min-width: min-content;
4808
4849
  }
4809
4850
 
4810
- :where(:root, .pf-v6-c-divider) {
4851
+ :root,
4852
+ .pf-v6-c-divider {
4811
4853
  --pf-v6-c-divider--Display: flex;
4812
4854
  --pf-v6-c-divider--Color: var(--pf-t--global--border--color--default);
4813
4855
  --pf-v6-c-divider--Size: var(--pf-t--global--border--width--divider--default);
@@ -5112,7 +5154,8 @@ ul) {
5112
5154
  }
5113
5155
  }
5114
5156
 
5115
- :where(:root, .pf-v6-c-drawer) {
5157
+ :root,
5158
+ .pf-v6-c-drawer {
5116
5159
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
5117
5160
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5118
5161
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -5145,7 +5188,7 @@ ul) {
5145
5188
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
5146
5189
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
5147
5190
  --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
5148
- --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--sm);
5191
+ --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
5149
5192
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
5150
5193
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5151
5194
  --pf-v6-c-drawer__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -5220,10 +5263,12 @@ ul) {
5220
5263
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
5221
5264
  }
5222
5265
  @media screen and (min-width: 75rem) {
5223
- :where(:root, .pf-v6-c-drawer) {
5266
+ :root,
5267
+ .pf-v6-c-drawer {
5224
5268
  --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
5225
5269
  }
5226
- :where(:root, .pf-v6-c-drawer).pf-m-panel-bottom {
5270
+ :root.pf-m-panel-bottom,
5271
+ .pf-v6-c-drawer.pf-m-panel-bottom {
5227
5272
  --pf-v6-c-drawer__panel--MinWidth: auto;
5228
5273
  --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
5229
5274
  }
@@ -5950,7 +5995,8 @@ ul) {
5950
5995
  display: none;
5951
5996
  }
5952
5997
  }
5953
- :where(:root, .pf-v6-c-empty-state) {
5998
+ :root,
5999
+ .pf-v6-c-empty-state {
5954
6000
  --pf-v6-c-empty-state--PaddingBlockStart: var(--pf-t--global--spacer--xl);
5955
6001
  --pf-v6-c-empty-state--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
5956
6002
  --pf-v6-c-empty-state--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
@@ -6089,7 +6135,8 @@ ul) {
6089
6135
  justify-content: center;
6090
6136
  }
6091
6137
 
6092
- :where(:root, .pf-v6-c-expandable-section) {
6138
+ :root,
6139
+ .pf-v6-c-expandable-section {
6093
6140
  --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
6094
6141
  --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
6095
6142
  --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -6170,8 +6217,9 @@ ul) {
6170
6217
  padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
6171
6218
  }
6172
6219
 
6173
- :where(:root, .pf-v6-c-file-upload) {
6174
- --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--sm);
6220
+ :root,
6221
+ .pf-v6-c-file-upload {
6222
+ --pf-v6-c-file-upload--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
6175
6223
  --pf-v6-c-file-upload--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6176
6224
  --pf-v6-c-file-upload--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6177
6225
  --pf-v6-c-file-upload--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -6227,12 +6275,13 @@ ul) {
6227
6275
  transform: translate(-50%, -50%);
6228
6276
  }
6229
6277
 
6230
- :where(:root, .pf-v6-c-form) {
6231
- --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--lg);
6232
- --pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--sm);
6278
+ :root,
6279
+ .pf-v6-c-form {
6280
+ --pf-v6-c-form--GridGap: var(--pf-t--global--spacer--gap--group-to-group--vertical);
6281
+ --pf-v6-c-form__group--Gap: var(--pf-t--global--spacer--gap--group--vertical);
6233
6282
  --pf-v6-c-form__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--xl);
6234
6283
  --pf-v6-c-form--m-horizontal__group-label--md--GridColumnWidth: 9.375rem;
6235
- --pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--md);
6284
+ --pf-v6-c-form--m-horizontal__group-label--md--GridColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
6236
6285
  --pf-v6-c-form--m-horizontal__group-control--md--GridColumnWidth: 1fr;
6237
6286
  --pf-v6-c-form--m-limit-width--MaxWidth: 55rem;
6238
6287
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: calc((((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) + (2 * var(--pf-t--global--border--width--control--default))) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)) - ((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) + var(--pf-t--global--border--width--control--default));
@@ -6249,13 +6298,12 @@ ul) {
6249
6298
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
6250
6299
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
6251
6300
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
6252
- --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
6301
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
6253
6302
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
6254
- --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
6255
- --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
6303
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
6304
+ --pf-v6-c-form__group-control--m-inline--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
6256
6305
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
6257
- --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
6258
- --pf-v6-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--sm);
6306
+ --pf-v6-c-form__group-control--m-stack--Gap: var(--pf-t--global--spacer--gap--group--vertical);
6259
6307
  --pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart: calc(var(--pf-v6-c-form__group-control--m-stack--Gap) * -1 + var(--pf-v6-c-form__helper-text--MarginBlockStart--base));
6260
6308
  --pf-v6-c-form__actions--child--MarginBlockStart: var(--pf-t--global--spacer--sm);
6261
6309
  --pf-v6-c-form__actions--child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -6268,7 +6316,7 @@ ul) {
6268
6316
  --pf-v6-c-form__helper-text--MarginBlockStart--base: var(--pf-t--global--spacer--xs);
6269
6317
  --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__helper-text--MarginBlockStart--base);
6270
6318
  --pf-v6-c-form__section--MarginBlockStart: var(--pf-t--global--spacer--xl);
6271
- --pf-v6-c-form__section--Gap: var(--pf-t--global--spacer--md);
6319
+ --pf-v6-c-form__section--Gap: var(--pf-v6-c-form--GridGap);
6272
6320
  --pf-v6-c-form__section-title--FontSize: var(--pf-t--global--font--size--heading--xs);
6273
6321
  --pf-v6-c-form__section-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
6274
6322
  --pf-v6-c-form__section-title--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -6286,7 +6334,8 @@ ul) {
6286
6334
  --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
6287
6335
  --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6288
6336
  --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
6289
- --pf-v6-c-form__field-group-toggle-icon--Transition: var(--pf-t--global--transition);
6337
+ --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
6338
+ --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
6290
6339
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
6291
6340
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
6292
6341
  --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
@@ -6595,12 +6644,7 @@ ul) {
6595
6644
  .pf-v6-c-form__group-control.pf-m-inline {
6596
6645
  display: flex;
6597
6646
  flex-flow: row wrap;
6598
- }
6599
- .pf-v6-c-form__group-control.pf-m-inline > * {
6600
- margin-inline-end: var(--pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd);
6601
- }
6602
- .pf-v6-c-form__group-control.pf-m-inline > :last-child {
6603
- --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: 0;
6647
+ gap: var(--pf-v6-c-form__group-control--m-inline--Gap);
6604
6648
  }
6605
6649
  .pf-v6-c-form__group-control.pf-m-stack {
6606
6650
  --pf-v6-c-form__helper-text--MarginBlockStart: var(--pf-v6-c-form__group-control--m-stack__helper-text--MarginBlockStart);
@@ -6691,7 +6735,7 @@ ul) {
6691
6735
  display: inline-block;
6692
6736
  min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
6693
6737
  text-align: center;
6694
- transition: var(--pf-v6-c-form__field-group-toggle-icon--Transition);
6738
+ transition: transform var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration) var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
6695
6739
  transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
6696
6740
  }
6697
6741
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {
@@ -6746,8 +6790,9 @@ ul) {
6746
6790
  margin-block-end: var(--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd);
6747
6791
  }
6748
6792
 
6749
- :where(:root, .pf-v6-c-form-control) {
6750
- --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--sm);
6793
+ :root,
6794
+ .pf-v6-c-form-control {
6795
+ --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
6751
6796
  --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
6752
6797
  --pf-v6-c-form-control--FontSize: var(--pf-t--global--font--size--body--default);
6753
6798
  --pf-v6-c-form-control--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -6812,7 +6857,7 @@ ul) {
6812
6857
  --pf-v6-c-form-control--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
6813
6858
  --pf-v6-c-form-control--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
6814
6859
  --pf-v6-c-form-control--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
6815
- --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--sm);
6860
+ --pf-v6-c-form-control__utilities--Gap: var(--pf-t--global--spacer--gap--group--horizontal);
6816
6861
  --pf-v6-c-form-control__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
6817
6862
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
6818
6863
  --pf-v6-c-form-control__toggle-icon--PaddingInlineEnd: var(--pf-v6-c-form-control--inset--base);
@@ -7014,7 +7059,8 @@ select ~ .pf-v6-c-form-control__utilities {
7014
7059
  --pf-v6-c-form-control__utilities--PaddingInlineEnd: 0;
7015
7060
  }
7016
7061
 
7017
- :where(:root, .pf-v6-c-hint) {
7062
+ :root,
7063
+ .pf-v6-c-hint {
7018
7064
  --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
7019
7065
  --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
7020
7066
  --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -7089,7 +7135,8 @@ select ~ .pf-v6-c-form-control__utilities {
7089
7135
  margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
7090
7136
  }
7091
7137
 
7092
- :where(:root, .pf-v6-c-helper-text) {
7138
+ :root,
7139
+ .pf-v6-c-helper-text {
7093
7140
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
7094
7141
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
7095
7142
  --pf-v6-c-helper-text__item-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -7161,7 +7208,8 @@ select ~ .pf-v6-c-form-control__utilities {
7161
7208
  color: var(--pf-v6-c-helper-text__item-text--Color);
7162
7209
  }
7163
7210
 
7164
- :where(:root, .pf-v6-c-icon) {
7211
+ :root,
7212
+ .pf-v6-c-icon {
7165
7213
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
7166
7214
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
7167
7215
  --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
@@ -7417,7 +7465,8 @@ select ~ .pf-v6-c-form-control__utilities {
7417
7465
  transform: translateY(calc(-50% - 0.5 * var(--pf-v6-c-icon__content--svg--VerticalAlign)));
7418
7466
  }
7419
7467
 
7420
- :where(:root, .pf-v6-c-inline-edit) {
7468
+ :root,
7469
+ .pf-v6-c-inline-edit {
7421
7470
  --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
7422
7471
  --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
7423
7472
  --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--hover--Color: var(--pf-t--global--icon--color--brand--hover);
@@ -7500,8 +7549,9 @@ select ~ .pf-v6-c-form-control__utilities {
7500
7549
  display: none;
7501
7550
  }
7502
7551
 
7503
- :where(:root, .pf-v6-c-input-group) {
7504
- --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--xs);
7552
+ :root,
7553
+ .pf-v6-c-input-group {
7554
+ --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
7505
7555
  --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);
7506
7556
  --pf-v6-c-input-group__item--BorderWidth--base: var(--pf-t--global--border--width--control--default);
7507
7557
  --pf-v6-c-input-group__item--BorderColor--base: var(--pf-t--global--border--color--default);
@@ -7573,7 +7623,8 @@ label.pf-v6-c-input-group__text {
7573
7623
  cursor: pointer;
7574
7624
  }
7575
7625
 
7576
- :where(:root, .pf-v6-c-jump-links) {
7626
+ :root,
7627
+ .pf-v6-c-jump-links {
7577
7628
  --pf-v6-c-jump-links__list--Display: flex;
7578
7629
  --pf-v6-c-jump-links__list--PaddingBlockStart: 0;
7579
7630
  --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -7620,7 +7671,8 @@ label.pf-v6-c-input-group__text {
7620
7671
  --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
7621
7672
  --pf-v6-c-jump-links__toggle--Display: none;
7622
7673
  --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
7623
- --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
7674
+ --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
7675
+ --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
7624
7676
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
7625
7677
  --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
7626
7678
  }
@@ -7811,14 +7863,15 @@ label.pf-v6-c-input-group__text {
7811
7863
  .pf-v6-c-jump-links__toggle-icon {
7812
7864
  display: inline-block;
7813
7865
  color: var(--pf-v6-c-jump-links__toggle-icon--Color);
7814
- transition: var(--pf-v6-c-jump-links__toggle-icon--Transition);
7866
+ transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
7815
7867
  transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
7816
7868
  }
7817
7869
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {
7818
7870
  scale: -1 1;
7819
7871
  }
7820
7872
 
7821
- :where(:root, .pf-v6-c-label) {
7873
+ :root,
7874
+ .pf-v6-c-label {
7822
7875
  --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
7823
7876
  --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7824
7877
  --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -7981,7 +8034,7 @@ label.pf-v6-c-input-group__text {
7981
8034
  --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
7982
8035
  --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
7983
8036
  --pf-v6-c-label__content--MaxWidth: 100%;
7984
- --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--xs);
8037
+ --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
7985
8038
  --pf-v6-c-label__content--Cursor: initial;
7986
8039
  --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
7987
8040
  --pf-v6-c-label__text--MaxWidth: 100%;
@@ -8312,7 +8365,8 @@ input.pf-v6-c-label__content {
8312
8365
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
8313
8366
  }
8314
8367
 
8315
- :where(:root, .pf-v6-c-label-group) {
8368
+ :root,
8369
+ .pf-v6-c-label-group {
8316
8370
  --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
8317
8371
  --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
8318
8372
  --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
@@ -8447,7 +8501,8 @@ input.pf-v6-c-label__content {
8447
8501
  display: none;
8448
8502
  }
8449
8503
 
8450
- :where(:root, .pf-v6-c-list) {
8504
+ :root,
8505
+ .pf-v6-c-list {
8451
8506
  --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8452
8507
  --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);
8453
8508
  --pf-v6-c-list--Gap: var(--pf-t--global--spacer--sm);
@@ -8518,7 +8573,8 @@ ul.pf-v6-c-list {
8518
8573
  color: var(--pf-v6-c-list__item-icon--Color);
8519
8574
  }
8520
8575
 
8521
- :where(:root, .pf-v6-c-login) {
8576
+ :root,
8577
+ .pf-v6-c-login {
8522
8578
  --pf-v6-c-login--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8523
8579
  --pf-v6-c-login--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8524
8580
  --pf-v6-c-login__container--xl--GridColumnGap: var(--pf-t--global--spacer--3xl);
@@ -8574,48 +8630,56 @@ ul.pf-v6-c-list {
8574
8630
  --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
8575
8631
  }
8576
8632
  @media (min-width: 75rem) {
8577
- :where(:root, .pf-v6-c-login) {
8633
+ :root,
8634
+ .pf-v6-c-login {
8578
8635
  --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
8579
8636
  }
8580
8637
  }
8581
8638
  @media (min-width: 36rem) {
8582
- :where(:root, .pf-v6-c-login) {
8639
+ :root,
8640
+ .pf-v6-c-login {
8583
8641
  --pf-v6-c-login__header--PaddingInlineEnd: 0;
8584
8642
  --pf-v6-c-login__header--PaddingInlineStart: 0;
8585
8643
  }
8586
8644
  }
8587
8645
  @media (min-width: 75rem) {
8588
- :where(:root, .pf-v6-c-login) {
8646
+ :root,
8647
+ .pf-v6-c-login {
8589
8648
  --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
8590
8649
  --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
8591
8650
  }
8592
8651
  }
8593
8652
  @media (min-width: 75rem) {
8594
- :where(:root, .pf-v6-c-login) {
8653
+ :root,
8654
+ .pf-v6-c-login {
8595
8655
  --pf-v6-c-login__main--MarginBlockEnd: 0;
8596
8656
  }
8597
8657
  }
8598
8658
  @media (min-width: 48rem) {
8599
- :where(:root, .pf-v6-c-login) {
8659
+ :root,
8660
+ .pf-v6-c-login {
8600
8661
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
8601
8662
  --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
8602
8663
  --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
8603
8664
  }
8604
8665
  }
8605
8666
  @media (min-width: 48rem) {
8606
- :where(:root, .pf-v6-c-login) {
8667
+ :root,
8668
+ .pf-v6-c-login {
8607
8669
  --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
8608
8670
  --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
8609
8671
  }
8610
8672
  }
8611
8673
  @media (min-width: 36rem) {
8612
- :where(:root, .pf-v6-c-login) {
8674
+ :root,
8675
+ .pf-v6-c-login {
8613
8676
  --pf-v6-c-login__footer--PaddingInlineEnd: 0;
8614
8677
  --pf-v6-c-login__footer--PaddingInlineStart: 0;
8615
8678
  }
8616
8679
  }
8617
8680
  @media (min-width: 75rem) {
8618
- :where(:root, .pf-v6-c-login) {
8681
+ :root,
8682
+ .pf-v6-c-login {
8619
8683
  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
8620
8684
  }
8621
8685
  }
@@ -8770,7 +8834,8 @@ ul.pf-v6-c-list {
8770
8834
  padding-block-start: var(--pf-v6-c-login__footer--c-list--PaddingBlockStart);
8771
8835
  }
8772
8836
 
8773
- :where(:root, .pf-v6-c-masthead) {
8837
+ :root,
8838
+ .pf-v6-c-masthead {
8774
8839
  --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
8775
8840
  --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
8776
8841
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
@@ -9305,7 +9370,8 @@ ul.pf-v6-c-list {
9305
9370
  padding-inline-end: var(--pf-t--global--spacer--2xl);
9306
9371
  }
9307
9372
 
9308
- :where(:root, .pf-v6-c-menu) {
9373
+ :root,
9374
+ .pf-v6-c-menu {
9309
9375
  --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
9310
9376
  --pf-v6-c-menu--Width: auto;
9311
9377
  --pf-v6-c-menu--MinWidth: auto;
@@ -9391,13 +9457,13 @@ ul.pf-v6-c-list {
9391
9457
  --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
9392
9458
  --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
9393
9459
  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
9394
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
9395
- --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9460
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
9461
+ --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9396
9462
  --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
9397
9463
  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
9398
- --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9464
+ --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9399
9465
  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
9400
- --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
9466
+ --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
9401
9467
  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
9402
9468
  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
9403
9469
  }
@@ -9886,7 +9952,8 @@ ul.pf-v6-c-list {
9886
9952
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
9887
9953
  }
9888
9954
 
9889
- :where(:root, .pf-v6-c-menu-toggle) {
9955
+ :root,
9956
+ .pf-v6-c-menu-toggle {
9890
9957
  --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
9891
9958
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
9892
9959
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -10291,7 +10358,8 @@ ul.pf-v6-c-list {
10291
10358
  color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
10292
10359
  }
10293
10360
 
10294
- :where(:root, .pf-v6-c-modal-box) {
10361
+ :root,
10362
+ .pf-v6-c-modal-box {
10295
10363
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
10296
10364
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
10297
10365
  --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
@@ -10344,7 +10412,8 @@ ul.pf-v6-c-list {
10344
10412
  --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
10345
10413
  }
10346
10414
  @media (min-width: 75rem) {
10347
- :where(:root, .pf-v6-c-modal-box) {
10415
+ :root,
10416
+ .pf-v6-c-modal-box {
10348
10417
  --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
10349
10418
  }
10350
10419
  }
@@ -10496,7 +10565,8 @@ ul.pf-v6-c-list {
10496
10565
  }
10497
10566
  }
10498
10567
 
10499
- :where(:root, .pf-v6-c-multiple-file-upload) {
10568
+ :root,
10569
+ .pf-v6-c-multiple-file-upload {
10500
10570
  --pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
10501
10571
  --pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);
10502
10572
  --pf-v6-c-multiple-file-upload__main--TextAlign: center;
@@ -10706,7 +10776,8 @@ ul.pf-v6-c-list {
10706
10776
  color: var(--pf-v6-c-multiple-file-upload__status-item-progress-size--Color);
10707
10777
  }
10708
10778
 
10709
- :where(:root, .pf-v6-c-nav) {
10779
+ :root,
10780
+ .pf-v6-c-nav {
10710
10781
  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
10711
10782
  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
10712
10783
  --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -11014,7 +11085,8 @@ ul.pf-v6-c-list {
11014
11085
  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
11015
11086
  }
11016
11087
 
11017
- :where(:root, .pf-v6-c-notification-drawer) {
11088
+ :root,
11089
+ .pf-v6-c-notification-drawer {
11018
11090
  --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11019
11091
  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
11020
11092
  --pf-v6-c-notification-drawer__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -11289,7 +11361,8 @@ ul.pf-v6-c-list {
11289
11361
  transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
11290
11362
  }
11291
11363
 
11292
- :where(:root, .pf-v6-c-overflow-menu) {
11364
+ :root,
11365
+ .pf-v6-c-overflow-menu {
11293
11366
  --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
11294
11367
  --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
11295
11368
  --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -11326,7 +11399,8 @@ ul.pf-v6-c-list {
11326
11399
  column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
11327
11400
  }
11328
11401
 
11329
- :where(:root, .pf-v6-c-page) {
11402
+ :root,
11403
+ .pf-v6-c-page {
11330
11404
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11331
11405
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
11332
11406
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
@@ -11334,7 +11408,8 @@ ul.pf-v6-c-list {
11334
11408
  --pf-v6-c-page__sidebar--Width: 18.125rem;
11335
11409
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11336
11410
  --pf-v6-c-page__sidebar--BoxShadow: none;
11337
- --pf-v6-c-page__sidebar--Transition: var(--pf-t--global--transition);
11411
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
11412
+ --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
11338
11413
  --pf-v6-c-page__sidebar--TranslateX: -100%;
11339
11414
  --pf-v6-c-page__sidebar--TranslateZ: 0;
11340
11415
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
@@ -11406,7 +11481,8 @@ ul.pf-v6-c-list {
11406
11481
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
11407
11482
  }
11408
11483
  @media screen and (min-width: 75rem) {
11409
- :where(:root, .pf-v6-c-page) {
11484
+ :root,
11485
+ .pf-v6-c-page {
11410
11486
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
11411
11487
  }
11412
11488
  }
@@ -11455,7 +11531,7 @@ ul.pf-v6-c-list {
11455
11531
  overflow-y: auto;
11456
11532
  -webkit-overflow-scrolling: touch;
11457
11533
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
11458
- transition: var(--pf-v6-c-page__sidebar--Transition);
11534
+ transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
11459
11535
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
11460
11536
  }
11461
11537
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {
@@ -11935,7 +12011,8 @@ ul.pf-v6-c-list {
11935
12011
  flex: 1 0 auto;
11936
12012
  }
11937
12013
 
11938
- :where(:root, .pf-v6-c-pagination) {
12014
+ :root,
12015
+ .pf-v6-c-pagination {
11939
12016
  --pf-v6-c-pagination--inset: 0;
11940
12017
  --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
11941
12018
  --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
@@ -11973,7 +12050,8 @@ ul.pf-v6-c-list {
11973
12050
  --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
11974
12051
  }
11975
12052
  @media screen and (min-width: 48rem) {
11976
- :where(:root, .pf-v6-c-pagination) {
12053
+ :root,
12054
+ .pf-v6-c-pagination {
11977
12055
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
11978
12056
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
11979
12057
  --pf-v6-c-pagination__nav--Display: inline-flex;
@@ -11981,7 +12059,8 @@ ul.pf-v6-c-list {
11981
12059
  }
11982
12060
  }
11983
12061
  @media screen and (min-width: 75rem) {
11984
- :where(:root, .pf-v6-c-pagination) {
12062
+ :root,
12063
+ .pf-v6-c-pagination {
11985
12064
  --pf-v6-c-pagination__scroll-button--Width: var(--pf-v6-c-pagination__scroll-button--xl--Width);
11986
12065
  }
11987
12066
  }
@@ -12282,7 +12361,8 @@ ul.pf-v6-c-list {
12282
12361
  }
12283
12362
  }
12284
12363
 
12285
- :where(:root, .pf-v6-c-panel) {
12364
+ :root,
12365
+ .pf-v6-c-panel {
12286
12366
  --pf-v6-c-panel--Width: auto;
12287
12367
  --pf-v6-c-panel--MinWidth: auto;
12288
12368
  --pf-v6-c-panel--MaxWidth: none;
@@ -12379,7 +12459,8 @@ ul.pf-v6-c-list {
12379
12459
  box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
12380
12460
  }
12381
12461
 
12382
- :where(:root, .pf-v6-c-popover) {
12462
+ :root,
12463
+ .pf-v6-c-popover {
12383
12464
  --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
12384
12465
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
12385
12466
  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
@@ -12581,7 +12662,8 @@ ul.pf-v6-c-list {
12581
12662
  margin-block-start: var(--pf-v6-c-popover__footer--MarginBlockStart);
12582
12663
  }
12583
12664
 
12584
- :where(:root, .pf-v6-c-progress) {
12665
+ :root,
12666
+ .pf-v6-c-progress {
12585
12667
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
12586
12668
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
12587
12669
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
@@ -12745,7 +12827,8 @@ ul.pf-v6-c-list {
12745
12827
  font-variant-numeric: tabular-nums;
12746
12828
  }
12747
12829
 
12748
- :where(:root, .pf-v6-c-progress-stepper) {
12830
+ :root,
12831
+ .pf-v6-c-progress-stepper {
12749
12832
  --pf-v6-c-progress-stepper--m-vertical--GridAutoFlow: row;
12750
12833
  --pf-v6-c-progress-stepper--m-vertical--GridTemplateColumns: auto 1fr;
12751
12834
  --pf-v6-c-progress-stepper--m-vertical__step-connector--before--InsetBlockStart: 0;
@@ -12866,7 +12949,8 @@ ul.pf-v6-c-list {
12866
12949
  --pf-v6-c-progress-stepper--m-center__step-main--before--Content: "";
12867
12950
  }
12868
12951
  @media screen and (min-width: 48rem) {
12869
- :where(:root, .pf-v6-c-progress-stepper) {
12952
+ :root,
12953
+ .pf-v6-c-progress-stepper {
12870
12954
  --pf-v6-c-progress-stepper--GridAutoFlow: var(--pf-v6-c-progress-stepper--m-horizontal--GridAutoFlow);
12871
12955
  --pf-v6-c-progress-stepper--GridTemplateColumns: var(--pf-v6-c-progress-stepper--m-horizontal--GridTemplateColumns);
12872
12956
  --pf-v6-c-progress-stepper__step-connector--before--InsetBlockStart: var(--pf-v6-c-progress-stepper--m-horizontal__step-connector--before--InsetBlockStart);
@@ -13355,7 +13439,8 @@ ul.pf-v6-c-list {
13355
13439
  }
13356
13440
  }
13357
13441
 
13358
- :where(:root, .pf-v6-c-radio) {
13442
+ :root,
13443
+ .pf-v6-c-radio {
13359
13444
  --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
13360
13445
  --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
13361
13446
  --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
@@ -13436,7 +13521,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
13436
13521
  cursor: not-allowed;
13437
13522
  }
13438
13523
 
13439
- :where(:root, .pf-v6-c-sidebar) {
13524
+ :root,
13525
+ .pf-v6-c-sidebar {
13440
13526
  --pf-v6-c-sidebar--inset: var(--pf-t--global--spacer--md);
13441
13527
  --pf-v6-c-sidebar--xl--inset: var(--pf-t--global--spacer--lg);
13442
13528
  --pf-v6-c-sidebar--BorderWidth--base: var(--pf-t--global--border--width--regular);
@@ -13780,7 +13866,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
13780
13866
  --pf-v6-c-sidebar__panel--FlexBasis: 100%;
13781
13867
  }
13782
13868
  }
13783
- :where(:root, .pf-v6-c-simple-list) {
13869
+ :root,
13870
+ .pf-v6-c-simple-list {
13784
13871
  --pf-v6-c-simple-list__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
13785
13872
  --pf-v6-c-simple-list__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
13786
13873
  --pf-v6-c-simple-list__item-link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -13850,7 +13937,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
13850
13937
  margin-block-start: var(--pf-v6-c-simple-list__section--section--MarginBlockStart);
13851
13938
  }
13852
13939
 
13853
- :where(:root, .pf-v6-c-skeleton) {
13940
+ :root,
13941
+ .pf-v6-c-skeleton {
13854
13942
  --pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13855
13943
  --pf-v6-c-skeleton--Width: auto;
13856
13944
  --pf-v6-c-skeleton--Height: auto;
@@ -14015,7 +14103,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14015
14103
  transform: translateX(100%);
14016
14104
  }
14017
14105
  }
14018
- :where(:root, .pf-v6-c-skip-to-content) {
14106
+ :root,
14107
+ .pf-v6-c-skip-to-content {
14019
14108
  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
14020
14109
  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
14021
14110
  --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
@@ -14031,7 +14120,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14031
14120
  inset-inline-start: var(--pf-v6-c-skip-to-content--focus--InsetInlineStart);
14032
14121
  }
14033
14122
 
14034
- :where(:root, .pf-v6-c-slider) {
14123
+ :root,
14124
+ .pf-v6-c-slider {
14035
14125
  --pf-v6-c-slider--value: 0;
14036
14126
  --pf-v6-c-slider__step--InsetInlineStart: 0;
14037
14127
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -14252,7 +14342,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14252
14342
  margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
14253
14343
  }
14254
14344
 
14255
- :where(:root, .pf-v6-c-spinner) {
14345
+ :root,
14346
+ .pf-v6-c-spinner {
14256
14347
  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
14257
14348
  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
14258
14349
  --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
@@ -14328,7 +14419,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14328
14419
  transform: rotate(720deg);
14329
14420
  }
14330
14421
  }
14331
- :where(:root, .pf-v6-c-switch) {
14422
+ :root,
14423
+ .pf-v6-c-switch {
14332
14424
  --pf-v6-c-switch--FontSize: var(--pf-t--global--font--size--sm);
14333
14425
  --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
14334
14426
  --pf-v6-c-switch__toggle-icon--FontSize: calc(var(--pf-v6-c-switch--FontSize) * .625);
@@ -14476,7 +14568,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14476
14568
  vertical-align: top;
14477
14569
  }
14478
14570
 
14479
- :where(:root, .pf-v6-c-tab-content) {
14571
+ :root,
14572
+ .pf-v6-c-tab-content {
14480
14573
  --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
14481
14574
  --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
14482
14575
  --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
@@ -14521,7 +14614,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14521
14614
  --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
14522
14615
  }
14523
14616
 
14524
- :where(:root, .pf-v6-c-table[class*=pf-m-grid]) {
14617
+ :root,
14618
+ .pf-v6-c-table {
14525
14619
  --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
14526
14620
  --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
14527
14621
  --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
@@ -16085,7 +16179,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16085
16179
  }
16086
16180
  }
16087
16181
 
16088
- :where(:root, .pf-v6-c-table) {
16182
+ :root,
16183
+ .pf-v6-c-table {
16089
16184
  --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
16090
16185
  --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
16091
16186
  --pf-v6-c-table--border-width--base: var(--pf-t--global--border--width--divider--default);
@@ -16135,7 +16230,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16135
16230
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16136
16231
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16137
16232
  --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
16138
- --pf-v6-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
16233
+ --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
16234
+ --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
16139
16235
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
16140
16236
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
16141
16237
  --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -16158,7 +16254,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16158
16254
  --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16159
16255
  --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
16160
16256
  --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16161
- --pf-v6-c-table__expandable-row--Transition: var(--pf-t--global--transition);
16162
16257
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
16163
16258
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
16164
16259
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -16387,6 +16482,11 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16387
16482
  .pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
16388
16483
  --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize);
16389
16484
  --pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight);
16485
+ --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
16486
+ --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
16487
+ --pf-v6-c-table--cell--Overflow: hidden;
16488
+ --pf-v6-c-table--cell--TextOverflow: ellipsis;
16489
+ --pf-v6-c-table--cell--WhiteSpace: nowrap;
16390
16490
  }
16391
16491
  .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
16392
16492
  outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
@@ -16413,40 +16513,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16413
16513
  .pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td).pf-m-help {
16414
16514
  min-width: var(--pf-v6-c-table__th--m-help--MinWidth);
16415
16515
  }
16416
- .pf-v6-c-table > thead, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-truncate, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-truncate {
16417
- --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
16418
- --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
16419
- --pf-v6-c-table--cell--Overflow: hidden;
16420
- --pf-v6-c-table--cell--TextOverflow: ellipsis;
16421
- --pf-v6-c-table--cell--WhiteSpace: nowrap;
16422
- }
16423
-
16424
- .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-wrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-wrap {
16425
- --pf-v6-c-table--cell--MinWidth: 0;
16426
- --pf-v6-c-table--cell--MaxWidth: none;
16427
- --pf-v6-c-table--cell--Overflow: visible;
16428
- --pf-v6-c-table--cell--TextOverflow: clip;
16429
- --pf-v6-c-table--cell--WhiteSpace: normal;
16430
- }
16431
- .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-nowrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-nowrap {
16432
- --pf-v6-c-table--cell--MinWidth: 0;
16433
- --pf-v6-c-table--cell--MaxWidth: none;
16434
- --pf-v6-c-table--cell--Overflow: visible;
16435
- --pf-v6-c-table--cell--TextOverflow: clip;
16436
- --pf-v6-c-table--cell--WhiteSpace: nowrap;
16437
- }
16438
- .pf-v6-c-table :where([class*=pf-v6-c-table]) .pf-v6-c-table__icon, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-fit-content, :where(.pf-v6-c-table) > :is(thead, tbody) .pf-v6-c-table__icon, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-fit-content {
16439
- --pf-v6-c-table--cell--MinWidth: fit-content;
16440
- --pf-v6-c-table--cell--MaxWidth: none;
16441
- --pf-v6-c-table--cell--Width: 1%;
16442
- --pf-v6-c-table--cell--Overflow: visible;
16443
- --pf-v6-c-table--cell--TextOverflow: clip;
16444
- --pf-v6-c-table--cell--WhiteSpace: nowrap;
16445
- }
16446
- .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-break-word, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-break-word {
16447
- --pf-v6-c-table--cell--WordBreak: break-word;
16448
- --pf-v6-c-table--cell--WhiteSpace: normal;
16449
- }
16450
16516
  .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) {
16451
16517
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
16452
16518
  --pf-v6-c-table__tbody--BorderBlockEndWidth: 0;
@@ -16510,6 +16576,40 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16510
16576
  --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
16511
16577
  }
16512
16578
 
16579
+ [class*=pf-v6-c-table].pf-m-truncate {
16580
+ --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
16581
+ --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
16582
+ --pf-v6-c-table--cell--Overflow: hidden;
16583
+ --pf-v6-c-table--cell--TextOverflow: ellipsis;
16584
+ --pf-v6-c-table--cell--WhiteSpace: nowrap;
16585
+ }
16586
+ [class*=pf-v6-c-table].pf-m-wrap {
16587
+ --pf-v6-c-table--cell--MinWidth: 0;
16588
+ --pf-v6-c-table--cell--MaxWidth: none;
16589
+ --pf-v6-c-table--cell--Overflow: visible;
16590
+ --pf-v6-c-table--cell--TextOverflow: clip;
16591
+ --pf-v6-c-table--cell--WhiteSpace: normal;
16592
+ }
16593
+ [class*=pf-v6-c-table].pf-m-nowrap {
16594
+ --pf-v6-c-table--cell--MinWidth: 0;
16595
+ --pf-v6-c-table--cell--MaxWidth: none;
16596
+ --pf-v6-c-table--cell--Overflow: visible;
16597
+ --pf-v6-c-table--cell--TextOverflow: clip;
16598
+ --pf-v6-c-table--cell--WhiteSpace: nowrap;
16599
+ }
16600
+ [class*=pf-v6-c-table] .pf-v6-c-table__icon, [class*=pf-v6-c-table].pf-m-fit-content {
16601
+ --pf-v6-c-table--cell--MinWidth: fit-content;
16602
+ --pf-v6-c-table--cell--MaxWidth: none;
16603
+ --pf-v6-c-table--cell--Width: 1%;
16604
+ --pf-v6-c-table--cell--Overflow: visible;
16605
+ --pf-v6-c-table--cell--TextOverflow: clip;
16606
+ --pf-v6-c-table--cell--WhiteSpace: nowrap;
16607
+ }
16608
+ [class*=pf-v6-c-table].pf-m-break-word {
16609
+ --pf-v6-c-table--cell--WordBreak: break-word;
16610
+ --pf-v6-c-table--cell--WhiteSpace: normal;
16611
+ }
16612
+
16513
16613
  .pf-v6-c-table__text {
16514
16614
  --pf-v6-c-table--cell--MaxWidth: 100%;
16515
16615
  position: relative;
@@ -16624,7 +16724,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16624
16724
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
16625
16725
  }
16626
16726
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
16627
- transition: var(--pf-v6-c-table__toggle--c-button__toggle-icon--Transition);
16727
+ transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
16628
16728
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
16629
16729
  }
16630
16730
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
@@ -16776,10 +16876,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
16776
16876
  position: relative;
16777
16877
  border-block-end: 0 solid transparent;
16778
16878
  }
16779
- .pf-v6-c-table__expandable-row,
16780
- .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td):first-child::after {
16781
- transition: var(--pf-v6-c-table__expandable-row--Transition);
16782
- }
16783
16879
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
16784
16880
  :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
16785
16881
  padding-block-start: 0;
@@ -16947,7 +17043,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
16947
17043
  --pf-v6-c-table--cell--Width: 100%;
16948
17044
  }
16949
17045
 
16950
- :where(:root, .pf-v6-c-table) {
17046
+ :root,
17047
+ .pf-v6-c-table {
16951
17048
  --pf-v6-c-table__sticky-cell--MinWidth--base: 8.75rem;
16952
17049
  --pf-v6-c-table__sticky-cell--MinWidth: var(--pf-v6-c-table__sticky-cell--MinWidth--base);
16953
17050
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
@@ -17011,7 +17108,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17011
17108
  overflow: auto;
17012
17109
  }
17013
17110
 
17014
- :where(:root, .pf-v6-c-table) {
17111
+ :root,
17112
+ .pf-v6-c-table {
17015
17113
  --pf-v6-c-table__tree-view-main--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-table__tree-view-icon--MinWidth));
17016
17114
  --pf-v6-c-table__tree-view-main--nested-indent--base: calc(var(--pf-v6-c-table__tree-view-main--indent--base) - var(--pf-t--global--spacer--md));
17017
17115
  --pf-v6-c-table__tree-view-main--c-button--MarginInlineEnd: var(--pf-t--global--spacer--sm);
@@ -17831,7 +17929,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17831
17929
  }
17832
17930
  }
17833
17931
 
17834
- :where(:root, .pf-v6-c-tabs) {
17932
+ :root,
17933
+ .pf-v6-c-tabs {
17835
17934
  --pf-v6-c-tabs--inset: 0;
17836
17935
  --pf-v6-c-tabs--Width: auto;
17837
17936
  --pf-v6-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);
@@ -18643,7 +18742,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18643
18742
  }
18644
18743
  }
18645
18744
 
18646
- :where(:root, .pf-v6-c-text-input-group) {
18745
+ :root,
18746
+ .pf-v6-c-text-input-group {
18647
18747
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
18648
18748
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
18649
18749
  --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
@@ -18844,7 +18944,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18844
18944
  display: flex;
18845
18945
  }
18846
18946
 
18847
- :where(:root, .pf-v6-c-tile) {
18947
+ :root,
18948
+ .pf-v6-c-tile {
18848
18949
  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
18849
18950
  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18850
18951
  --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -18947,7 +19048,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18947
19048
  color: var(--pf-v6-c-tile__icon--Color);
18948
19049
  }
18949
19050
 
18950
- :where(:root, .pf-v6-c-timestamp) {
19051
+ :root,
19052
+ .pf-v6-c-timestamp {
18951
19053
  --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
18952
19054
  --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
18953
19055
  --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;
@@ -18978,7 +19080,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18978
19080
  --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
18979
19081
  }
18980
19082
 
18981
- :where(:root, .pf-v6-c-title) {
19083
+ :root,
19084
+ .pf-v6-c-title {
18982
19085
  --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
18983
19086
  --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
18984
19087
  --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);
@@ -19083,7 +19186,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19083
19186
  line-height: var(--pf-v6-c-title--m-h6--LineHeight);
19084
19187
  }
19085
19188
 
19086
- :where(:root, .pf-v6-c-toggle-group) {
19189
+ :root,
19190
+ .pf-v6-c-toggle-group {
19087
19191
  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
19088
19192
  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
19089
19193
  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -19206,7 +19310,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19206
19310
  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginInlineStart);
19207
19311
  }
19208
19312
 
19209
- :where(:root, .pf-v6-c-toolbar) {
19313
+ :root,
19314
+ .pf-v6-c-toolbar {
19210
19315
  --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
19211
19316
  --pf-v6-c-toolbar--PaddingBlockStart: 0;
19212
19317
  --pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19245,7 +19350,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19245
19350
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19246
19351
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19247
19352
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
19248
- --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-t--global--transition);
19353
+ --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
19354
+ --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
19249
19355
  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
19250
19356
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
19251
19357
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -19577,7 +19683,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19577
19683
 
19578
19684
  .pf-v6-c-toolbar__expand-all-icon {
19579
19685
  display: inline-flex;
19580
- transition: var(--pf-v6-c-toolbar__expand-all-icon--Transition);
19686
+ transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
19581
19687
  transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
19582
19688
  }
19583
19689
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {
@@ -21108,7 +21214,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21108
21214
  display: inline-flex;
21109
21215
  }
21110
21216
  }
21111
- :where(:root, .pf-v6-c-tooltip) {
21217
+ :root,
21218
+ .pf-v6-c-tooltip {
21112
21219
  --pf-v6-c-tooltip--MaxWidth: 18.75rem;
21113
21220
  --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
21114
21221
  --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -21230,7 +21337,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21230
21337
  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));
21231
21338
  }
21232
21339
 
21233
- :where(:root, .pf-v6-c-truncate) {
21340
+ :root,
21341
+ .pf-v6-c-truncate {
21234
21342
  --pf-v6-c-truncate--MinWidth: 6ch;
21235
21343
  --pf-v6-c-truncate__start--MinWidth: 6ch;
21236
21344
  }
@@ -21276,7 +21384,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21276
21384
  direction: rtl;
21277
21385
  }
21278
21386
  }
21279
- :where(:root, .pf-v6-c-number-input) {
21387
+ :root,
21388
+ .pf-v6-c-number-input {
21280
21389
  --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
21281
21390
  --pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
21282
21391
  --pf-v6-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
@@ -21315,7 +21424,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21315
21424
  font-size: var(--pf-v6-c-number-input__icon--FontSize);
21316
21425
  }
21317
21426
 
21318
- :where(:root, .pf-v6-c-tree-view) {
21427
+ :root,
21428
+ .pf-v6-c-tree-view {
21319
21429
  --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
21320
21430
  --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
21321
21431
  --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -21768,7 +21878,8 @@ label.pf-v6-c-tree-view__node-text {
21768
21878
  --pf-v6-c-tree-view--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
21769
21879
  }
21770
21880
 
21771
- :where(:root, .pf-v6-c-wizard) {
21881
+ :root,
21882
+ .pf-v6-c-wizard {
21772
21883
  --pf-v6-c-wizard--Height: initial;
21773
21884
  --pf-v6-c-wizard--Height--base: 100%;
21774
21885
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
@@ -21809,7 +21920,8 @@ label.pf-v6-c-tree-view__node-text {
21809
21920
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21810
21921
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21811
21922
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
21812
- --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
21923
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
21924
+ --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
21813
21925
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
21814
21926
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
21815
21927
  --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
@@ -21883,7 +21995,8 @@ label.pf-v6-c-tree-view__node-text {
21883
21995
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
21884
21996
  }
21885
21997
  @media screen and (min-width: 62rem) {
21886
- :where(:root, .pf-v6-c-wizard) {
21998
+ :root,
21999
+ .pf-v6-c-wizard {
21887
22000
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
21888
22001
  --pf-v6-c-wizard__nav--BoxShadow: none;
21889
22002
  }
@@ -22214,7 +22327,7 @@ label.pf-v6-c-tree-view__node-text {
22214
22327
 
22215
22328
  .pf-v6-c-wizard__nav-link-toggle-icon {
22216
22329
  display: inline-block;
22217
- transition: var(--pf-v6-c-wizard__nav-link-toggle-icon--Transition);
22330
+ transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
22218
22331
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
22219
22332
  }
22220
22333
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {