@patternfly/patternfly 6.6.0 → 6.6.1

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 (57) hide show
  1. package/README.md +1 -1
  2. package/components/AboutModalBox/about-modal-box.css +1 -1
  3. package/components/AboutModalBox/about-modal-box.scss +1 -1
  4. package/components/Accordion/accordion.css +3 -3
  5. package/components/Accordion/accordion.scss +3 -3
  6. package/components/Alert/alert.css +7 -7
  7. package/components/Alert/alert.scss +7 -7
  8. package/components/Breadcrumb/breadcrumb.css +3 -3
  9. package/components/Breadcrumb/breadcrumb.scss +3 -3
  10. package/components/Card/card.css +4 -4
  11. package/components/Card/card.scss +4 -4
  12. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  13. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  14. package/components/DataList/data-list.css +5 -5
  15. package/components/DataList/data-list.scss +5 -5
  16. package/components/DualListSelector/dual-list-selector.css +1 -1
  17. package/components/DualListSelector/dual-list-selector.scss +1 -1
  18. package/components/Hint/hint.css +2 -2
  19. package/components/Hint/hint.scss +2 -2
  20. package/components/Menu/menu.css +2 -2
  21. package/components/Menu/menu.scss +3 -3
  22. package/components/ModalBox/modal-box.css +4 -4
  23. package/components/ModalBox/modal-box.scss +5 -5
  24. package/components/Nav/nav.css +2 -2
  25. package/components/Nav/nav.scss +2 -2
  26. package/components/NotificationDrawer/notification-drawer.css +3 -3
  27. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  28. package/components/Pagination/pagination.css +12 -7
  29. package/components/Pagination/pagination.scss +15 -12
  30. package/components/Popover/popover.css +1 -1
  31. package/components/Popover/popover.scss +1 -1
  32. package/components/Progress/progress.css +2 -2
  33. package/components/Progress/progress.scss +2 -2
  34. package/components/Table/table-tree-view.css +3 -0
  35. package/components/Table/table-tree-view.scss +2 -0
  36. package/components/Table/table.css +2 -3
  37. package/components/Table/table.scss +2 -3
  38. package/components/Title/title.css +1 -1
  39. package/components/Title/title.scss +1 -1
  40. package/components/Tooltip/tooltip.css +1 -1
  41. package/components/Tooltip/tooltip.scss +1 -1
  42. package/components/TreeView/tree-view.css +7 -7
  43. package/components/TreeView/tree-view.scss +7 -7
  44. package/components/Wizard/wizard.css +3 -3
  45. package/components/Wizard/wizard.scss +3 -3
  46. package/components/_index.css +70 -63
  47. package/docs/components/DualListSelector/examples/DualListSelector.md +13 -13
  48. package/docs/components/InputGroup/examples/InputGroup.md +1 -1
  49. package/docs/components/Pagination/examples/Pagination.md +0 -162
  50. package/docs/components/Table/examples/Table.md +18 -18
  51. package/docs/components/TreeView/examples/TreeView.md +100 -100
  52. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2557 -5003
  53. package/package.json +1 -1
  54. package/patternfly-no-globals.css +70 -63
  55. package/patternfly.css +70 -63
  56. package/patternfly.min.css +1 -1
  57. package/patternfly.min.css.map +1 -1
@@ -50,7 +50,8 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
50
50
  --#{$pagination}--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
51
51
 
52
52
  // bottom
53
- --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
53
+ --#{$pagination}--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
54
+ --#{$pagination}--m-bottom--BorderRadius: 0;
54
55
  --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
55
56
  --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
56
57
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
@@ -64,6 +65,8 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
64
65
  --#{$pagination}--m-bottom--m-static--PaddingBlockEnd: 0;
65
66
  --#{$pagination}--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
66
67
  --#{$pagination}--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
68
+ --#{$pagination}--m-bottom--m-static--BorderRadius: 0;
69
+ --#{$pagination}--m-bottom--m-static--BackgroundColor: transparent;
67
70
  --#{$pagination}--m-bottom--m-sticky-base--InsetBlockEnd: 0;
68
71
 
69
72
  :where(:root.pf-v6-theme-glass) & {
@@ -71,6 +74,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
71
74
  --#{$pagination}--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
72
75
  --#{$pagination}--m-sticky--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
73
76
  --#{$pagination}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
77
+ --#{$pagination}--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
78
+ --#{$pagination}--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
79
+ --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-sticky--BorderRadius--glass);
74
80
  }
75
81
 
76
82
  // page menu
@@ -82,6 +88,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
82
88
  --#{$pagination}__page-menu--md--Display: var(--#{$pagination}__page-menu--Display--base);
83
89
 
84
90
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
91
+ --#{$pagination}--m-bottom--BackgroundColor: transparent;
85
92
  --#{$pagination}--m-bottom--BoxShadow: none;
86
93
  --#{$pagination}--m-bottom--BorderBlockStartWidth: 0;
87
94
  --#{$pagination}__page-menu--Display: var(--#{$pagination}__page-menu--md--Display);
@@ -106,11 +113,6 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
106
113
  border-block-start-width: var(--#{$pagination}--BorderBlockStartWidth);
107
114
  border-block-end-width: var(--#{$pagination}--BorderBlockEndWidth);
108
115
 
109
- :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
110
- :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
111
- --#{$pagination}--m-bottom--BackgroundColor: transparent;
112
- }
113
-
114
116
  .#{$pagination}__page-menu {
115
117
  display: var(--#{$pagination}__page-menu--Display);
116
118
  }
@@ -128,12 +130,9 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
128
130
  padding-inline-start: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineStart);
129
131
  padding-inline-end: var(--#{$pagination}--m-bottom--m-sticky--PaddingInlineEnd);
130
132
  background-color: var(--#{$pagination}--m-bottom--BackgroundColor);
133
+ border-radius: var(--#{$pagination}--m-bottom--BorderRadius);
131
134
  box-shadow: var(--#{$pagination}--m-bottom--BoxShadow);
132
135
 
133
- :where(:root.pf-v6-theme-glass) &.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
134
- --#{$pagination}--m-bottom--BackgroundColor: transparent;
135
- }
136
-
137
136
  .#{$pagination}__nav-control.pf-m-first,
138
137
  .#{$pagination}__nav-control.pf-m-last,
139
138
  .#{$pagination}__nav-page-select {
@@ -154,6 +153,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
154
153
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
155
154
  --#{$pagination}--m-bottom--MarginBlockStart: 0;
156
155
  --#{$pagination}--m-bottom--InsetBlockEnd: auto;
156
+ --#{$pagination}--m-bottom--BorderRadius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);
157
157
 
158
158
  position: relative;
159
159
  justify-content: flex-end;
@@ -161,7 +161,7 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
161
161
  padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
162
162
  padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
163
163
  padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
164
-
164
+
165
165
  .#{$pagination}__nav-control.pf-m-first,
166
166
  .#{$pagination}__nav-control.pf-m-last,
167
167
  .#{$pagination}__nav-page-select {
@@ -184,15 +184,18 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
184
184
  }
185
185
 
186
186
  &.pf-m-static {
187
+ --#{$pagination}--m-bottom--BackgroundColor: var(--#{$pagination}--m-bottom--m-static--BackgroundColor);
188
+
187
189
  position: relative;
188
190
  padding-block-start: var(--#{$pagination}--m-bottom--m-static--PaddingBlockStart);
189
191
  padding-block-end: var(--#{$pagination}--m-bottom--m-static--PaddingBlockEnd);
190
192
  padding-inline-start: var(--#{$pagination}--m-bottom--m-static--PaddingInlineStart);
191
193
  padding-inline-end: var(--#{$pagination}--m-bottom--m-static--PaddingInlineEnd);
192
194
  border: 0;
195
+ border-radius: var(--#{$pagination}--m-bottom--m-static--BorderRadius);
193
196
  box-shadow: none;
194
197
  }
195
-
198
+
196
199
  &.pf-m-sticky {
197
200
  --#{$pagination}--m-bottom--InsetBlockEnd: 0;
198
201
  --#{$pagination}--BorderBlockEndWidth: var(--#{$pagination}--m-sticky--BorderBlockEndWidth);
@@ -37,7 +37,7 @@
37
37
  --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
38
38
  --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
39
39
  --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
40
- --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default));
40
+ --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--plain));
41
41
  --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
42
42
  --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
43
43
  --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
@@ -49,7 +49,7 @@
49
49
  --#{$popover}__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
50
50
 
51
51
  // Close
52
- --#{$popover}__close--InsetBlockStart: calc(var(--#{$popover}__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default)); // align top of button with top of text
52
+ --#{$popover}__close--InsetBlockStart: calc(var(--#{$popover}__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--plain)); // align top of button with top of text
53
53
  --#{$popover}__close--InsetInlineEnd: var(--#{$popover}__content--PaddingInlineEnd); // align right of content
54
54
  --#{$popover}__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
55
55
 
@@ -130,7 +130,7 @@
130
130
 
131
131
  .pf-v6-c-progress__description {
132
132
  grid-column: 1/2;
133
- overflow-wrap: break-word;
133
+ overflow-wrap: anywhere;
134
134
  }
135
135
  .pf-v6-c-progress__description.pf-m-truncate {
136
136
  overflow: hidden;
@@ -146,7 +146,7 @@
146
146
  align-items: flex-start;
147
147
  justify-content: flex-end;
148
148
  text-align: end;
149
- overflow-wrap: break-word;
149
+ overflow-wrap: anywhere;
150
150
  }
151
151
 
152
152
  .pf-v6-c-progress__status-icon {
@@ -163,7 +163,7 @@
163
163
  // the progress__description is displayed above the progress bar on the left
164
164
  .#{$progress}__description {
165
165
  grid-column: 1 / 2;
166
- overflow-wrap: break-word;
166
+ overflow-wrap: anywhere;
167
167
 
168
168
  &.pf-m-truncate {
169
169
  @include pf-v6-text-overflow;
@@ -179,7 +179,7 @@
179
179
  align-items: flex-start;
180
180
  justify-content: flex-end;
181
181
  text-align: end;
182
- overflow-wrap: break-word;
182
+ overflow-wrap: anywhere;
183
183
  }
184
184
 
185
185
  // the progress__status-icon is an icon displayed always in the upper right
@@ -16,6 +16,9 @@
16
16
  --pf-v6-c-table--m-no-inset__tree-view-main--MarginInlineStart: 0;
17
17
  }
18
18
 
19
+ .pf-v6-c-table.pf-m-tree-view {
20
+ --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 90deg;
21
+ }
19
22
  .pf-v6-c-table.pf-m-tree-view > tbody > tr {
20
23
  --pf-v6-c-table--m-tree-view__toggle--InsetInlineStart: var(--pf-v6-c-table__tree-view-main--PaddingInlineStart);
21
24
  }
@@ -37,6 +37,8 @@ $pf-v6-c-tree-view--MaxDepth: 10;
37
37
 
38
38
  // - Table tree view
39
39
  .#{$table}.pf-m-tree-view {
40
+ --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 90deg;
41
+
40
42
  > tbody > tr {
41
43
  --#{$table}--m-tree-view__toggle--InsetInlineStart: var(--#{$table}__tree-view-main--PaddingInlineStart);
42
44
 
@@ -54,8 +54,8 @@
54
54
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
55
55
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
56
56
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
57
- --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
57
+ --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
58
+ --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
59
59
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
60
60
  --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
61
61
  --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
@@ -963,7 +963,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
963
963
  }
964
964
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__tr:last-child:not(.pf-m-border-row) {
965
965
  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
966
- pointer-events: none;
967
966
  border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor);
968
967
  }
969
968
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
@@ -89,8 +89,8 @@
89
89
  --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
90
90
 
91
91
  // * Table button
92
- --#{$table}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
93
- --#{$table}__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
92
+ --#{$table}__button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
93
+ --#{$table}__button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
94
94
  --#{$table}__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
95
95
  --#{$table}__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
96
96
  --#{$table}__button--Color: var(--pf-t--global--text--color--regular);
@@ -1304,7 +1304,6 @@
1304
1304
 
1305
1305
  .#{$table}__tr:last-child:not(.pf-m-border-row) {
1306
1306
  z-index: var(--#{$table}__thead--m-nested-column-header--after--ZIndex);
1307
- pointer-events: none;
1308
1307
  border-block-end: var(--#{$table}__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--#{$table}__thead--m-nested-column-header--BorderBlockEndColor);
1309
1308
  }
1310
1309
 
@@ -41,7 +41,7 @@
41
41
 
42
42
  .pf-v6-c-title {
43
43
  font-family: var(--pf-v6-c-title--FontFamily);
44
- overflow-wrap: break-word;
44
+ overflow-wrap: anywhere;
45
45
  }
46
46
  .pf-v6-c-title.pf-m-4xl {
47
47
  font-size: var(--pf-v6-c-title--m-4xl--FontSize);
@@ -71,7 +71,7 @@
71
71
 
72
72
  .#{$title} {
73
73
  font-family: var(--#{$title}--FontFamily);
74
- overflow-wrap: break-word;
74
+ overflow-wrap: anywhere;
75
75
 
76
76
  &.pf-m-4xl {
77
77
  font-size: var(--#{$title}--m-4xl--FontSize);
@@ -98,7 +98,7 @@
98
98
  font-size: var(--pf-v6-c-tooltip__content--FontSize);
99
99
  color: var(--pf-v6-c-tooltip__content--Color);
100
100
  text-align: center;
101
- overflow-wrap: break-word;
101
+ overflow-wrap: anywhere;
102
102
  background-color: var(--pf-v6-c-tooltip__content--BackgroundColor);
103
103
  border-radius: var(--pf-v6-c-tooltip__content--BorderRadius);
104
104
  }
@@ -129,7 +129,7 @@
129
129
  font-size: var(--#{$tooltip}__content--FontSize);
130
130
  color: var(--#{$tooltip}__content--Color);
131
131
  text-align: center;
132
- overflow-wrap: break-word;
132
+ overflow-wrap: anywhere;
133
133
  background-color: var(--#{$tooltip}__content--BackgroundColor);
134
134
  border-radius: var(--#{$tooltip}__content--BorderRadius);
135
135
 
@@ -1,10 +1,10 @@
1
1
  .pf-v6-c-tree-view {
2
- --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));
2
+ --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart) + var(--pf-v6-c-tree-view__node-toggle--PaddingInlineEnd) + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
3
3
  --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));
4
4
  --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
5
- --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
6
+ --pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
7
+ --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
8
8
  --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
9
9
  --pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
10
10
  --pf-v6-c-tree-view__node--BackgroundColor: transparent;
@@ -48,9 +48,9 @@
48
48
  --pf-v6-c-tree-view__node-toggle--BackgroundColor: transparent;
49
49
  --pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-t--global--icon--color--regular);
50
50
  --pf-v6-c-tree-view__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
51
- --pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
52
52
  --pf-v6-c-tree-view__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
53
- --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
54
54
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
55
55
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
56
56
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
@@ -66,7 +66,7 @@
66
66
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
67
67
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
68
68
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
69
- --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
69
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
70
70
  --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
71
71
  --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
72
72
  --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
@@ -4,16 +4,16 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
4
4
 
5
5
  @include pf-root($tree-view) {
6
6
  // Node base
7
- --#{$tree-view}__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$tree-view}__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
7
+ --#{$tree-view}__node--indent--base: calc(var(--#{$tree-view}__node-toggle--PaddingInlineStart) + var(--#{$tree-view}__node-toggle--PaddingInlineEnd) + var(--#{$tree-view}__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
8
8
  --#{$tree-view}__node--nested-indent--base: calc(var(--#{$tree-view}__node--indent--base) - var(--pf-t--global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it
9
9
 
10
10
  // Content
11
11
  --#{$tree-view}__content--BorderRadius: var(--pf-t--global--border--radius--small);
12
12
 
13
13
  // Node
14
- --#{$tree-view}__node--PaddingBlockStart: var(--pf-t--global--spacer--sm);
15
- --#{$tree-view}__node--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16
- --#{$tree-view}__node--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
14
+ --#{$tree-view}__node--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
15
+ --#{$tree-view}__node--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
16
+ --#{$tree-view}__node--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
17
17
  --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}__node--indent--base);
18
18
  --#{$tree-view}__node--Color: var(--pf-t--global--text--color--subtle);
19
19
  --#{$tree-view}__node--BackgroundColor: transparent;
@@ -66,9 +66,9 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
66
66
 
67
67
  // Toggle icon
68
68
  --#{$tree-view}__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
69
- --#{$tree-view}__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
69
+ --#{$tree-view}__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
70
70
  --#{$tree-view}__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
71
- --#{$tree-view}__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
71
+ --#{$tree-view}__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
72
72
  --#{$tree-view}__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
73
73
  --#{$tree-view}__node-toggle--MarginBlockStart: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
74
74
  --#{$tree-view}__node-toggle--MarginBlockEnd: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
@@ -92,7 +92,7 @@ $pf-v6-c-tree-view--MaxNesting: 10 !default;
92
92
  --#{$tree-view}__node-icon--Color: var(--pf-t--global--icon--color--subtle);
93
93
  --#{$tree-view}__node-toggle-icon--base--Rotate: 0;
94
94
  --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__node-toggle-icon--base--Rotate);
95
- --#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
95
+ --#{$tree-view}__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
96
96
 
97
97
  // Disabled
98
98
  --#{$tree-view}__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -259,7 +259,7 @@
259
259
  align-items: baseline;
260
260
  margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
261
261
  text-align: start;
262
- overflow-wrap: break-word;
262
+ overflow-wrap: anywhere;
263
263
  }
264
264
  .pf-v6-c-wizard__toggle-list-item:not(:last-child) {
265
265
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
@@ -395,7 +395,7 @@
395
395
  padding-inline: 0;
396
396
  color: var(--pf-v6-c-wizard__nav-link--Color);
397
397
  text-align: start;
398
- overflow-wrap: break-word;
398
+ overflow-wrap: anywhere;
399
399
  text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
400
400
  counter-increment: wizard-nav-count;
401
401
  background-color: transparent;
@@ -514,7 +514,7 @@
514
514
  flex-direction: column;
515
515
  overflow-x: hidden;
516
516
  overflow-y: auto;
517
- overflow-wrap: break-word;
517
+ overflow-wrap: anywhere;
518
518
  }
519
519
 
520
520
  .pf-v6-c-wizard__main-body {
@@ -325,7 +325,7 @@
325
325
  align-items: baseline;
326
326
  margin-block-end: var(--#{$wizard}__toggle-list-item--MarginBlockEnd);
327
327
  text-align: start;
328
- overflow-wrap: break-word;
328
+ overflow-wrap: anywhere;
329
329
 
330
330
  &:not(:last-child) {
331
331
  margin-inline-end: var(--#{$wizard}__toggle-list-item--not-last-child--MarginInlineEnd);
@@ -478,7 +478,7 @@
478
478
  padding-inline: 0;
479
479
  color: var(--#{$wizard}__nav-link--Color);
480
480
  text-align: start; // needed for when the item is a button
481
- overflow-wrap: break-word;
481
+ overflow-wrap: anywhere;
482
482
  text-decoration-line: var(--#{$wizard}__nav-link--TextDecoration);
483
483
  counter-increment: wizard-nav-count;
484
484
  background-color: transparent;
@@ -614,7 +614,7 @@
614
614
  flex-direction: column;
615
615
  overflow-x: hidden;
616
616
  overflow-y: auto;
617
- overflow-wrap: break-word;
617
+ overflow-wrap: anywhere;
618
618
  }
619
619
 
620
620
  .#{$wizard}__main-body {