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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +36 -26
  3. package/css/components/Accordion/accordion.css +16 -13
  4. package/css/components/Alert/alert.css +5 -4
  5. package/css/components/Avatar/avatar.css +12 -4
  6. package/css/components/BackgroundImage/background-image.css +6 -3
  7. package/css/components/Banner/banner.css +8 -6
  8. package/css/components/Brand/brand.css +3 -1
  9. package/css/components/Breadcrumb/breadcrumb.css +4 -3
  10. package/css/components/Button/button.css +6 -6
  11. package/css/components/CalendarMonth/calendar-month.css +4 -3
  12. package/css/components/Card/card.css +7 -6
  13. package/css/components/ClipboardCopy/clipboard-copy.css +4 -3
  14. package/css/components/CodeEditor/code-editor.css +1 -1
  15. package/css/components/Compass/compass.css +6 -2
  16. package/css/components/DataList/data-list.css +28 -21
  17. package/css/components/DescriptionList/description-list.css +7 -5
  18. package/css/components/Divider/divider.css +7 -5
  19. package/css/components/Drawer/drawer.css +38 -28
  20. package/css/components/DualListSelector/dual-list-selector.css +17 -11
  21. package/css/components/ExpandableSection/expandable-section.css +16 -14
  22. package/css/components/Form/form.css +1 -1
  23. package/css/components/FormControl/form-control.css +1 -1
  24. package/css/components/JumpLinks/jump-links.css +4 -3
  25. package/css/components/Label/label-group.css +2 -2
  26. package/css/components/Label/label.css +4 -3
  27. package/css/components/Login/login.css +51 -37
  28. package/css/components/Masthead/masthead.css +20 -18
  29. package/css/components/Menu/menu.css +23 -14
  30. package/css/components/ModalBox/modal-box.css +9 -7
  31. package/css/components/Nav/nav.css +13 -9
  32. package/css/components/NotificationDrawer/notification-drawer.css +6 -6
  33. package/css/components/Page/page.css +35 -29
  34. package/css/components/Sidebar/sidebar.css +1 -1
  35. package/css/components/Skeleton/skeleton.css +16 -15
  36. package/css/components/Slider/slider.css +32 -18
  37. package/css/components/Switch/switch.css +3 -1
  38. package/css/components/Table/table-tree-view.css +4 -2
  39. package/css/components/Table/table.css +31 -27
  40. package/css/components/Tabs/tabs.css +17 -15
  41. package/css/components/Toolbar/toolbar.css +14 -8
  42. package/css/components/TreeView/tree-view.css +44 -13
  43. package/css/components/TreeView/tree-view.d.ts +1 -0
  44. package/css/components/TreeView/tree-view.js +1 -0
  45. package/css/components/TreeView/tree-view.mjs +1 -0
  46. package/css/components/Wizard/wizard.css +20 -16
  47. package/css/components/_index.css +598 -427
  48. package/css/layouts/Gallery/gallery.css +6 -2
  49. package/css/layouts/_index.css +6 -2
  50. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.5.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.10...@patternfly/react-styles@6.5.0-prerelease.11) (2026-02-05)
7
+
8
+ ### Features
9
+
10
+ - **TreeView:** add support for disabled TreeViewListItems ([#12140](https://github.com/patternfly/patternfly-react/issues/12140)) ([3514831](https://github.com/patternfly/patternfly-react/commit/35148312f5d9ce4e706ad36b801455fc987842bb))
11
+
6
12
  # [6.5.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.9...@patternfly/react-styles@6.5.0-prerelease.10) (2026-01-09)
7
13
 
8
14
  **Note:** Version bump only for package @patternfly/react-styles
@@ -17,31 +17,6 @@
17
17
  --pf-v6-c-about-modal-box__brand--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
18
18
  --pf-v6-c-about-modal-box__brand--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
19
19
  --pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
20
- --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
21
- --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
22
- --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
23
- --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
24
- --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
25
- --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
26
- --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
27
- --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
28
- --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
29
- --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
30
- --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
31
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
32
- --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
33
- --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
34
- --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
35
- --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
36
- --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
37
- --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
38
- --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
39
- --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
40
- --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
41
- --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
42
- --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
43
- --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
44
- --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
45
20
  }
46
21
  @media screen and (min-width: 36rem) {
47
22
  .pf-v6-c-about-modal-box {
@@ -50,6 +25,14 @@
50
25
  --pf-v6-c-about-modal-box__brand--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__brand--sm--PaddingBlockEnd);
51
26
  }
52
27
  }
28
+ .pf-v6-c-about-modal-box {
29
+ --pf-v6-c-about-modal-box__close--ZIndex: var(--pf-t--global--z-index--2xl);
30
+ --pf-v6-c-about-modal-box__close--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
31
+ --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
32
+ --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
33
+ --pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
34
+ --pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
35
+ }
53
36
  @media only screen and (min-width: 36rem) {
54
37
  .pf-v6-c-about-modal-box {
55
38
  --pf-v6-c-about-modal-box__close--PaddingBlockEnd: var(--pf-v6-c-about-modal-box__close--sm--PaddingBlockEnd);
@@ -60,17 +43,42 @@
60
43
  --pf-v6-c-about-modal-box__close--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__close--lg--PaddingInlineEnd);
61
44
  }
62
45
  }
46
+ .pf-v6-c-about-modal-box {
47
+ --pf-v6-c-about-modal-box__close--c-button--FontSize: var(--pf-t--global--icon--size--lg);
48
+ --pf-v6-c-about-modal-box__brand-image--Height: 2.3125rem;
49
+ --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
50
+ --pf-v6-c-about-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--xl);
52
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
53
+ --pf-v6-c-about-modal-box__header--sm--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
54
+ }
63
55
  @media only screen and (min-width: 36rem) {
64
56
  .pf-v6-c-about-modal-box {
65
57
  --pf-v6-c-about-modal-box__header--PaddingInlineEnd: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineEnd);
66
58
  --pf-v6-c-about-modal-box__header--PaddingInlineStart: var(--pf-v6-c-about-modal-box__header--sm--PaddingInlineStart);
67
59
  }
68
60
  }
61
+ .pf-v6-c-about-modal-box {
62
+ --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-t--global--spacer--xl);
63
+ --pf-v6-c-about-modal-box__strapline--FontSize: var(--pf-t--global--font--size--body--sm);
64
+ --pf-v6-c-about-modal-box__strapline--Color: var(--pf-t--global--text--color--subtle);
65
+ --pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
66
+ }
69
67
  @media only screen and (min-width: 36rem) {
70
68
  .pf-v6-c-about-modal-box {
71
69
  --pf-v6-c-about-modal-box__strapline--PaddingBlockStart: var(--pf-v6-c-about-modal-box__strapline--sm--PaddingBlockStart);
72
70
  }
73
71
  }
72
+ .pf-v6-c-about-modal-box {
73
+ --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-t--global--spacer--xl);
74
+ --pf-v6-c-about-modal-box__content--MarginInlineEnd: var(--pf-t--global--spacer--xl);
75
+ --pf-v6-c-about-modal-box__content--MarginBlockEnd: var(--pf-t--global--spacer--xl);
76
+ --pf-v6-c-about-modal-box__content--MarginInlineStart: var(--pf-t--global--spacer--xl);
77
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockStart: var(--pf-t--global--spacer--2xl);
78
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineEnd: var(--pf-t--global--spacer--3xl);
79
+ --pf-v6-c-about-modal-box__content--sm--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
80
+ --pf-v6-c-about-modal-box__content--sm--MarginInlineStart: var(--pf-t--global--spacer--3xl);
81
+ }
74
82
  @media only screen and (min-width: 36rem) {
75
83
  .pf-v6-c-about-modal-box {
76
84
  --pf-v6-c-about-modal-box__content--MarginBlockStart: var(--pf-v6-c-about-modal-box__content--sm--MarginBlockStart);
@@ -94,7 +102,6 @@
94
102
  background-repeat: no-repeat;
95
103
  background-position: var(--pf-v6-c-about-modal-box--BackgroundPosition);
96
104
  background-size: var(--pf-v6-c-about-modal-box--BackgroundSize);
97
- --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
98
105
  }
99
106
  @media only screen and (min-width: 36rem) {
100
107
  .pf-v6-c-about-modal-box {
@@ -110,6 +117,9 @@
110
117
  grid-template-columns: var(--pf-v6-c-about-modal-box--lg--GridTemplateColumns);
111
118
  }
112
119
  }
120
+ .pf-v6-c-about-modal-box {
121
+ --pf-v6-c-about-modal-box--BackgroundPosition: bottom right;
122
+ }
113
123
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-about-modal-box {
114
124
  --pf-v6-c-about-modal-box--BackgroundPosition: bottom left;
115
125
  }
@@ -58,6 +58,18 @@
58
58
  --pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity: 1;
59
59
  --pf-v6-c-accordion__expandable-content--TranslateY: 0;
60
60
  --pf-v6-c-accordion__item--m-expanded__expandable-content--TranslateY: 0;
61
+ }
62
+ @media screen and (prefers-reduced-motion: no-preference) {
63
+ .pf-v6-c-accordion {
64
+ --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
65
+ --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
66
+ --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
67
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
68
+ --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
69
+ --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
70
+ }
71
+ }
72
+ .pf-v6-c-accordion {
61
73
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
62
74
  --pf-v6-c-accordion__expandable-content-body--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
63
75
  --pf-v6-c-accordion__expandable-content-body--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -83,16 +95,6 @@
83
95
  --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
84
96
  --pf-v6-c-accordion__item--m-expanded__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
85
97
  }
86
- @media screen and (prefers-reduced-motion: no-preference) {
87
- .pf-v6-c-accordion {
88
- --pf-v6-c-accordion__item--before--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
89
- --pf-v6-c-accordion__item--before--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
90
- --pf-v6-c-accordion__item--before--TranslateY: -.5rem;
91
- --pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
92
- --pf-v6-c-accordion__expandable-content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
93
- --pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
94
- }
95
- }
96
98
 
97
99
  .pf-v6-c-accordion {
98
100
  display: flex;
@@ -203,13 +205,14 @@
203
205
  color: var(--pf-v6-c-accordion__toggle-text--Color);
204
206
  }
205
207
 
208
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
209
+ scale: -1 1;
210
+ }
211
+
206
212
  .pf-v6-c-accordion__toggle-icon {
207
213
  transition: var(--pf-v6-c-accordion__toggle-icon--Transition);
208
214
  transform: rotate(var(--pf-v6-c-accordion__toggle-icon--Rotate));
209
215
  }
210
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-accordion__toggle-icon {
211
- scale: -1 1;
212
- }
213
216
 
214
217
  .pf-v6-c-accordion__expandable-content:where([hidden]) {
215
218
  display: revert;
@@ -140,14 +140,15 @@
140
140
  margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
141
141
  }
142
142
 
143
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
144
+ scale: -1 1;
145
+ }
146
+
143
147
  .pf-v6-c-alert__toggle-icon {
144
148
  display: inline-block;
145
149
  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
146
150
  transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
147
151
  }
148
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {
149
- scale: -1 1;
150
- }
151
152
 
152
153
  .pf-v6-c-alert__icon {
153
154
  grid-area: icon;
@@ -164,9 +165,9 @@
164
165
  }
165
166
  .pf-v6-c-alert__title.pf-m-truncate {
166
167
  display: -webkit-box;
168
+ overflow: hidden;
167
169
  -webkit-box-orient: vertical;
168
170
  -webkit-line-clamp: var(--pf-v6-c-alert__title--max-lines);
169
- overflow: hidden;
170
171
  }
171
172
 
172
173
  .pf-v6-c-alert__description {
@@ -28,7 +28,6 @@
28
28
  }
29
29
  .pf-v6-c-avatar.pf-m-sm {
30
30
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width);
31
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
32
31
  }
33
32
  @media (min-width: 36rem) {
34
33
  .pf-v6-c-avatar.pf-m-sm {
@@ -55,6 +54,9 @@
55
54
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-sm--Width-on-2xl, var(--pf-v6-c-avatar--m-sm--Width-on-xl, var(--pf-v6-c-avatar--m-sm--Width-on-lg, var(--pf-v6-c-avatar--m-sm--Width-on-md, var(--pf-v6-c-avatar--m-sm--Width-on-sm, var(--pf-v6-c-avatar--m-sm--Width))))));
56
55
  }
57
56
  }
57
+ .pf-v6-c-avatar.pf-m-sm {
58
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height);
59
+ }
58
60
  @media (min-width: 36rem) {
59
61
  .pf-v6-c-avatar.pf-m-sm {
60
62
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-sm--Height-on-sm, var(--pf-v6-c-avatar--m-sm--Height));
@@ -82,7 +84,6 @@
82
84
  }
83
85
  .pf-v6-c-avatar.pf-m-md {
84
86
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width);
85
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
86
87
  }
87
88
  @media (min-width: 36rem) {
88
89
  .pf-v6-c-avatar.pf-m-md {
@@ -109,6 +110,9 @@
109
110
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-md--Width-on-2xl, var(--pf-v6-c-avatar--m-md--Width-on-xl, var(--pf-v6-c-avatar--m-md--Width-on-lg, var(--pf-v6-c-avatar--m-md--Width-on-md, var(--pf-v6-c-avatar--m-md--Width-on-sm, var(--pf-v6-c-avatar--m-md--Width))))));
110
111
  }
111
112
  }
113
+ .pf-v6-c-avatar.pf-m-md {
114
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height);
115
+ }
112
116
  @media (min-width: 36rem) {
113
117
  .pf-v6-c-avatar.pf-m-md {
114
118
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-md--Height-on-sm, var(--pf-v6-c-avatar--m-md--Height));
@@ -136,7 +140,6 @@
136
140
  }
137
141
  .pf-v6-c-avatar.pf-m-lg {
138
142
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width);
139
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
140
143
  }
141
144
  @media (min-width: 36rem) {
142
145
  .pf-v6-c-avatar.pf-m-lg {
@@ -163,6 +166,9 @@
163
166
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-lg--Width-on-2xl, var(--pf-v6-c-avatar--m-lg--Width-on-xl, var(--pf-v6-c-avatar--m-lg--Width-on-lg, var(--pf-v6-c-avatar--m-lg--Width-on-md, var(--pf-v6-c-avatar--m-lg--Width-on-sm, var(--pf-v6-c-avatar--m-lg--Width))))));
164
167
  }
165
168
  }
169
+ .pf-v6-c-avatar.pf-m-lg {
170
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height);
171
+ }
166
172
  @media (min-width: 36rem) {
167
173
  .pf-v6-c-avatar.pf-m-lg {
168
174
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-lg--Height-on-sm, var(--pf-v6-c-avatar--m-lg--Height));
@@ -190,7 +196,6 @@
190
196
  }
191
197
  .pf-v6-c-avatar.pf-m-xl {
192
198
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width);
193
- --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
194
199
  }
195
200
  @media (min-width: 36rem) {
196
201
  .pf-v6-c-avatar.pf-m-xl {
@@ -217,6 +222,9 @@
217
222
  --pf-v6-c-avatar--Width: var(--pf-v6-c-avatar--m-xl--Width-on-2xl, var(--pf-v6-c-avatar--m-xl--Width-on-xl, var(--pf-v6-c-avatar--m-xl--Width-on-lg, var(--pf-v6-c-avatar--m-xl--Width-on-md, var(--pf-v6-c-avatar--m-xl--Width-on-sm, var(--pf-v6-c-avatar--m-xl--Width))))));
218
223
  }
219
224
  }
225
+ .pf-v6-c-avatar.pf-m-xl {
226
+ --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height);
227
+ }
220
228
  @media (min-width: 36rem) {
221
229
  .pf-v6-c-avatar.pf-m-xl {
222
230
  --pf-v6-c-avatar--Height: var(--pf-v6-c-avatar--m-xl--Height-on-sm, var(--pf-v6-c-avatar--m-xl--Height));
@@ -9,6 +9,12 @@
9
9
 
10
10
  .pf-v6-c-background-image {
11
11
  --pf-v6-c-background-image--BackgroundPosition: bottom right;
12
+ }
13
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
14
+ --pf-v6-c-background-image--BackgroundPosition: bottom left;
15
+ }
16
+
17
+ .pf-v6-c-background-image {
12
18
  position: fixed;
13
19
  inset-block-start: 0;
14
20
  inset-inline-start: 0;
@@ -20,7 +26,4 @@
20
26
  background-repeat: no-repeat;
21
27
  background-position: var(--pf-v6-c-background-image--BackgroundPosition);
22
28
  background-size: var(--pf-v6-c-background-image--BackgroundSize);
23
- }
24
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-background-image {
25
- --pf-v6-c-background-image--BackgroundPosition: bottom left;
26
29
  }
@@ -10,6 +10,14 @@
10
10
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
11
11
  --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
12
  --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
+ }
14
+ @media (min-width: 48rem) {
15
+ .pf-v6-c-banner {
16
+ --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
17
+ --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
18
+ }
19
+ }
20
+ .pf-v6-c-banner {
13
21
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
14
22
  --pf-v6-c-banner--link--TextDecoration: underline;
15
23
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -43,12 +51,6 @@
43
51
  --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
44
52
  --pf-v6-c-banner--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
45
53
  }
46
- @media (min-width: 48rem) {
47
- .pf-v6-c-banner {
48
- --pf-v6-c-banner--PaddingInlineEnd: var(--pf-v6-c-banner--md--PaddingInlineEnd);
49
- --pf-v6-c-banner--PaddingInlineStart: var(--pf-v6-c-banner--md--PaddingInlineStart);
50
- }
51
- }
52
54
 
53
55
  .pf-v6-c-banner {
54
56
  flex-shrink: 0;
@@ -7,7 +7,6 @@
7
7
  width: var(--pf-v6-c-brand--Width--base);
8
8
  height: var(--pf-v6-c-brand--Height--base);
9
9
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
10
- --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
11
10
  }
12
11
  @media (min-width: 36rem) {
13
12
  .pf-v6-c-brand {
@@ -34,6 +33,9 @@
34
33
  --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width-on-2xl, var(--pf-v6-c-brand--Width-on-xl, var(--pf-v6-c-brand--Width-on-lg, var(--pf-v6-c-brand--Width-on-md, var(--pf-v6-c-brand--Width-on-sm, var(--pf-v6-c-brand--Width))))));
35
34
  }
36
35
  }
36
+ .pf-v6-c-brand {
37
+ --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height);
38
+ }
37
39
  @media (min-width: 36rem) {
38
40
  .pf-v6-c-brand {
39
41
  --pf-v6-c-brand--Height--base: var(--pf-v6-c-brand--Height-on-sm, var(--pf-v6-c-brand--Height));
@@ -48,15 +48,16 @@
48
48
  margin-inline-end: var(--pf-v6-c-breadcrumb__item--MarginInlineEnd);
49
49
  }
50
50
 
51
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
52
+ scale: -1 1;
53
+ }
54
+
51
55
  .pf-v6-c-breadcrumb__item-divider {
52
56
  margin-inline-end: var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd);
53
57
  font-size: var(--pf-v6-c-breadcrumb__item-divider--FontSize);
54
58
  line-height: 1;
55
59
  color: var(--pf-v6-c-breadcrumb__item-divider--Color);
56
60
  }
57
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-breadcrumb__item-divider {
58
- scale: -1 1;
59
- }
60
61
 
61
62
  .pf-v6-c-breadcrumb__link {
62
63
  padding-inline-start: var(--pf-v6-c-breadcrumb__link--PaddingInlineStart);
@@ -449,6 +449,12 @@
449
449
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
450
450
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
451
451
  }
452
+ span.pf-v6-c-button.pf-m-link.pf-m-inline {
453
+ --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
454
+ --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
455
+ --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
456
+ }
457
+
452
458
  .pf-v6-c-button.pf-m-link.pf-m-inline {
453
459
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
454
460
  --pf-v6-c-button--JustifyContent: var(--pf-v6-c-button--m-link--m-inline--JustifyContent);
@@ -488,12 +494,6 @@
488
494
  background: transparent;
489
495
  outline-offset: 0.125rem;
490
496
  }
491
- span.pf-v6-c-button.pf-m-link.pf-m-inline {
492
- --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
493
- --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
494
- --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
495
- }
496
-
497
497
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
498
498
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
499
499
  }
@@ -87,13 +87,14 @@
87
87
  margin-block-end: var(--pf-v6-c-calendar-month__header--MarginBlockEnd);
88
88
  }
89
89
 
90
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
91
+ scale: -1 1;
92
+ }
93
+
90
94
  .pf-v6-c-calendar-month__header-nav-control {
91
95
  margin-inline-start: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineStart);
92
96
  margin-inline-end: var(--pf-v6-c-calendar-month__header-nav-control--MarginInlineEnd);
93
97
  }
94
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-calendar-month__header-nav-control {
95
- scale: -1 1;
96
- }
97
98
 
98
99
  .pf-v6-c-calendar-month__header-month {
99
100
  flex-grow: 1;
@@ -207,12 +207,12 @@
207
207
  flex-wrap: wrap;
208
208
  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
209
209
  }
210
- .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
211
- margin-inline-start: 0;
212
- }
213
210
  .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
214
211
  margin-inline-end: auto;
215
212
  }
213
+ .pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
214
+ margin-inline-start: 0;
215
+ }
216
216
 
217
217
  .pf-v6-c-card__header-main {
218
218
  flex-grow: 1;
@@ -226,15 +226,16 @@
226
226
  margin-inline-end: var(--pf-v6-c-card__header-toggle--MarginInlineEnd);
227
227
  }
228
228
 
229
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
230
+ scale: -1 1;
231
+ }
232
+
229
233
  .pf-v6-c-card__header-toggle-icon {
230
234
  display: inline-block;
231
235
  transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
232
236
  transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
233
237
  transition-property: transform;
234
238
  }
235
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
236
- scale: -1 1;
237
- }
238
239
 
239
240
  .pf-v6-c-card__title-text {
240
241
  font-family: var(--pf-v6-c-card__title-text--FontFamily);
@@ -50,13 +50,14 @@
50
50
  gap: var(--pf-v6-c-clipboard-copy__group--Gap);
51
51
  }
52
52
 
53
- .pf-v6-c-clipboard-copy__toggle-icon {
54
- transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
55
- }
56
53
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-clipboard-copy__toggle-icon {
57
54
  scale: -1 1;
58
55
  }
59
56
 
57
+ .pf-v6-c-clipboard-copy__toggle-icon {
58
+ transition: var(--pf-v6-c-clipboard-copy__toggle-icon--Transition);
59
+ }
60
+
60
61
  .pf-v6-c-clipboard-copy__expandable-content {
61
62
  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
62
63
  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
@@ -70,8 +70,8 @@
70
70
 
71
71
  .pf-v6-c-code-editor__container {
72
72
  display: flex;
73
- flex-direction: column;
74
73
  flex-grow: 1;
74
+ flex-direction: column;
75
75
  }
76
76
 
77
77
  .pf-v6-c-code-editor__header {
@@ -183,23 +183,27 @@
183
183
  }
184
184
  .pf-v6-c-compass__sidebar.pf-m-start {
185
185
  translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
186
- grid-area: sidebar-start;
187
186
  }
188
187
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
189
188
  translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
190
189
  }
191
190
 
191
+ .pf-v6-c-compass__sidebar.pf-m-start {
192
+ grid-area: sidebar-start;
193
+ }
192
194
  .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
193
195
  margin-inline-end: var(--pf-v6-c-compass--Gap);
194
196
  }
195
197
  .pf-v6-c-compass__sidebar.pf-m-end {
196
198
  translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
197
- grid-area: sidebar-end;
198
199
  }
199
200
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
200
201
  translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
201
202
  }
202
203
 
204
+ .pf-v6-c-compass__sidebar.pf-m-end {
205
+ grid-area: sidebar-end;
206
+ }
203
207
  .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
204
208
  margin-inline-start: var(--pf-v6-c-compass--Gap);
205
209
  }
@@ -412,6 +412,14 @@
412
412
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
413
413
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
414
414
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
415
+ }
416
+ @media screen and (min-width: 36rem) {
417
+ .pf-v6-c-data-list {
418
+ --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
419
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
420
+ }
421
+ }
422
+ .pf-v6-c-data-list {
415
423
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
416
424
  --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
417
425
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
@@ -421,6 +429,14 @@
421
429
  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
422
430
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
423
431
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
432
+ }
433
+ @media screen and (min-width: 36rem) {
434
+ .pf-v6-c-data-list {
435
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
436
+ --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
437
+ }
438
+ }
439
+ .pf-v6-c-data-list {
424
440
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
425
441
  --pf-v6-c-data-list__item-row--PaddingInlineStart: var(--pf-t--global--spacer--md);
426
442
  --pf-v6-c-data-list__item-row--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -516,18 +532,6 @@
516
532
  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
517
533
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
518
534
  }
519
- @media screen and (min-width: 36rem) {
520
- .pf-v6-c-data-list {
521
- --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-v6-c-data-list--sm--BorderBlockStartColor);
522
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-v6-c-data-list--sm--BorderBlockStartWidth);
523
- }
524
- }
525
- @media screen and (min-width: 36rem) {
526
- .pf-v6-c-data-list {
527
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-v6-c-data-list__item--sm--BorderBlockEndWidth);
528
- --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-v6-c-data-list__item--sm--BorderBlockEndColor);
529
- }
530
- }
531
535
 
532
536
  .pf-v6-c-data-list {
533
537
  font-size: var(--pf-v6-c-data-list--FontSize);
@@ -690,12 +694,6 @@
690
694
  --pf-v6-hidden-visible--hidden--Display: none;
691
695
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
692
696
  display: var(--pf-v6-hidden-visible--Display);
693
- gap: var(--pf-v6-c-data-list__item-action--Gap);
694
- align-content: flex-start;
695
- align-items: flex-start;
696
- padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
697
- padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
698
- margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
699
697
  }
700
698
  .pf-v6-c-data-list__item-action.pf-m-hidden {
701
699
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -740,6 +738,14 @@
740
738
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
741
739
  }
742
740
  }
741
+ .pf-v6-c-data-list__item-action {
742
+ gap: var(--pf-v6-c-data-list__item-action--Gap);
743
+ align-content: flex-start;
744
+ align-items: flex-start;
745
+ padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
746
+ padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
747
+ margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
748
+ }
743
749
 
744
750
  .pf-v6-c-data-list__toggle {
745
751
  margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
@@ -747,15 +753,16 @@
747
753
  margin-inline-start: var(--pf-v6-c-data-list__toggle--MarginInlineStart);
748
754
  }
749
755
 
756
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
757
+ scale: -1 1;
758
+ }
759
+
750
760
  .pf-v6-c-data-list__toggle-icon {
751
761
  height: var(--pf-v6-c-data-list__toggle-icon--Height);
752
762
  pointer-events: none;
753
763
  transition: var(--pf-v6-c-data-list__toggle-icon--Transition);
754
764
  transform: rotate(var(--pf-v6-c-data-list__toggle-icon--Rotate));
755
765
  }
756
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-data-list__toggle-icon {
757
- scale: -1 1;
758
- }
759
766
 
760
767
  .pf-v6-c-data-list__item-content {
761
768
  display: grid;
@@ -16,6 +16,13 @@
16
16
  --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
17
17
  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
18
18
  --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
19
+ }
20
+ @media screen and (min-width: 36rem) {
21
+ .pf-v6-c-description-list {
22
+ --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
23
+ }
24
+ }
25
+ .pf-v6-c-description-list {
19
26
  --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
20
27
  --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
21
28
  --pf-v6-c-description-list__term-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -44,11 +51,6 @@
44
51
  --pf-v6-c-description-list--m-horizontal__term--width-on-2xl: inherit;
45
52
  --pf-v6-c-description-list__term--width: var(--pf-v6-c-description-list--m-horizontal__term--width);
46
53
  }
47
- @media screen and (min-width: 36rem) {
48
- .pf-v6-c-description-list {
49
- --pf-v6-c-description-list__term--Display: var(--pf-v6-c-description-list__term--sm--Display);
50
- }
51
- }
52
54
  @media (min-width: 36rem) {
53
55
  .pf-v6-c-description-list {
54
56
  --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));
@@ -13,11 +13,6 @@
13
13
  --pf-v6-hidden-visible--hidden--Display: none;
14
14
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
15
15
  display: var(--pf-v6-hidden-visible--Display);
16
- flex-shrink: 0;
17
- align-items: stretch;
18
- align-self: stretch;
19
- justify-content: center;
20
- border: 0;
21
16
  }
22
17
  .pf-v6-c-divider.pf-m-hidden {
23
18
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -62,6 +57,13 @@
62
57
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
63
58
  }
64
59
  }
60
+ .pf-v6-c-divider {
61
+ flex-shrink: 0;
62
+ align-items: stretch;
63
+ align-self: stretch;
64
+ justify-content: center;
65
+ border: 0;
66
+ }
65
67
  .pf-v6-c-divider::before {
66
68
  flex-basis: var(--pf-v6-c-divider--before--FlexBasis);
67
69
  content: "";