@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
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  # PatternFly
2
-
2
+
3
3
  ## Contributing
4
4
 
5
5
  We welcome contributions to PatternFly! Please read our [Contributing Guide](https://pf-core-staging.patternfly.org/contribution) to learn how to get started, submit issues, and contribute code to the project.
@@ -164,7 +164,7 @@
164
164
  overflow-x: hidden;
165
165
  overflow-y: auto;
166
166
  overscroll-behavior: contain;
167
- overflow-wrap: break-word;
167
+ overflow-wrap: anywhere;
168
168
  -webkit-overflow-scrolling: touch;
169
169
  }
170
170
  @media screen and (min-width: 36rem) {
@@ -176,7 +176,7 @@
176
176
  overflow-x: hidden;
177
177
  overflow-y: auto;
178
178
  overscroll-behavior: contain;
179
- overflow-wrap: break-word;
179
+ overflow-wrap: anywhere;
180
180
  -webkit-overflow-scrolling: touch;
181
181
 
182
182
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
@@ -4,10 +4,10 @@
4
4
  --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
5
5
  --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
6
6
  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
7
- --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
7
+ --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
8
8
  --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9
- --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
10
- --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
10
+ --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
11
11
  --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
12
12
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
13
13
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -11,10 +11,10 @@
11
11
 
12
12
  // accordion toggle
13
13
  --#{$accordion}__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
14
- --#{$accordion}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14
+ --#{$accordion}__toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
15
15
  --#{$accordion}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
16
- --#{$accordion}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17
- --#{$accordion}__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16
+ --#{$accordion}__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
17
+ --#{$accordion}__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
18
18
  --#{$accordion}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
19
19
  --#{$accordion}__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20
20
  --#{$accordion}__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
@@ -14,9 +14,9 @@
14
14
  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
15
  --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
16
16
  --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
17
- --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
18
- --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
19
- --pf-v6-c-alert__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--action--horizontal--plain--default));
17
+ --pf-v6-c-alert__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
18
+ --pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
19
+ --pf-v6-c-alert__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
20
20
  --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
21
21
  --pf-v6-c-alert__toggle-icon--Rotate: 0;
22
22
  --pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -28,8 +28,8 @@
28
28
  --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
29
29
  --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
30
30
  --pf-v6-c-alert__title--max-lines: 1;
31
- --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
32
- --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
+ --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
32
+ --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
33
33
  --pf-v6-c-alert__action--TranslateY: 0.125rem;
34
34
  --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
35
35
  --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -163,7 +163,7 @@
163
163
  grid-area: title;
164
164
  font-weight: var(--pf-v6-c-alert__title--FontWeight);
165
165
  color: var(--pf-v6-c-alert__title--Color);
166
- overflow-wrap: break-word;
166
+ overflow-wrap: anywhere;
167
167
  }
168
168
  .pf-v6-c-alert__title.pf-m-truncate {
169
169
  display: -webkit-box;
@@ -175,7 +175,7 @@
175
175
  .pf-v6-c-alert__description {
176
176
  grid-area: description;
177
177
  padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
178
- overflow-wrap: break-word;
178
+ overflow-wrap: anywhere;
179
179
  }
180
180
  .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
181
181
  --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);
@@ -19,9 +19,9 @@
19
19
  --#{$alert}--FontSize: var(--pf-t--global--font--size--body--default);
20
20
 
21
21
  // Toggle
22
- --#{$alert}__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
23
- --#{$alert}__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
24
- --#{$alert}__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--action--horizontal--plain--default));
22
+ --#{$alert}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
23
+ --#{$alert}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
24
+ --#{$alert}__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
25
25
  --#{$alert}__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
26
26
 
27
27
  // Toggle icon
@@ -41,8 +41,8 @@
41
41
  --#{$alert}__title--max-lines: 1;
42
42
 
43
43
  // Action
44
- --#{$alert}__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
45
- --#{$alert}__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
44
+ --#{$alert}__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
45
+ --#{$alert}__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
46
46
  --#{$alert}__action--TranslateY: #{pf-size-prem(2px)};
47
47
  --#{$alert}__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
48
48
 
@@ -205,7 +205,7 @@
205
205
  grid-area: title;
206
206
  font-weight: var(--#{$alert}__title--FontWeight);
207
207
  color: var(--#{$alert}__title--Color);
208
- overflow-wrap: break-word;
208
+ overflow-wrap: anywhere;
209
209
 
210
210
  &.pf-m-truncate {
211
211
  @include pf-v6-line-clamp("var(--#{$alert}__title--max-lines)");
@@ -215,7 +215,7 @@
215
215
  .#{$alert}__description {
216
216
  grid-area: description;
217
217
  padding-block-start: var(--#{$alert}__description--PaddingBlockStart);
218
- overflow-wrap: break-word;
218
+ overflow-wrap: anywhere;
219
219
 
220
220
  + .#{$alert}__action-group {
221
221
  --#{$alert}__action-group--PaddingBlockStart: var(--#{$alert}__description--action-group--PaddingBlockStart);
@@ -18,9 +18,9 @@
18
18
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
19
19
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
20
20
  --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
21
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
22
22
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
23
- --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
23
+ --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
24
24
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
25
25
  }
26
26
 
@@ -68,7 +68,7 @@
68
68
  font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
69
69
  line-height: inherit;
70
70
  color: var(--pf-v6-c-breadcrumb__link--Color);
71
- overflow-wrap: break-word;
71
+ overflow-wrap: anywhere;
72
72
  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
73
73
  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
74
74
  text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
@@ -29,9 +29,9 @@
29
29
  --#{$breadcrumb}__heading--FontSize: var(--#{$breadcrumb}__item--FontSize);
30
30
 
31
31
  // breadcrumb dropdown
32
- --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
32
+ --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
33
33
  --#{$breadcrumb}__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
34
- --#{$breadcrumb}__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
34
+ --#{$breadcrumb}__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
35
35
  --#{$breadcrumb}__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
36
36
  }
37
37
 
@@ -83,7 +83,7 @@
83
83
  font-weight: var(--#{$breadcrumb}__link--FontWeight);
84
84
  line-height: inherit;
85
85
  color: var(--#{$breadcrumb}__link--Color);
86
- overflow-wrap: break-word;
86
+ overflow-wrap: anywhere;
87
87
  text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
88
88
  text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
89
89
  text-decoration-color: var(--#{$breadcrumb}__link--TextDecorationColor);
@@ -22,13 +22,13 @@
22
22
  --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
23
23
  --pf-v6-c-card__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
24
24
  --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
25
- --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
26
- --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
25
+ --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
26
+ --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
27
27
  --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
28
28
  --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
29
- --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
29
+ --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
30
30
  --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
31
- --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
31
+ --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
32
32
  --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
33
33
  --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
34
34
  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -24,15 +24,15 @@
24
24
  --#{$card}__footer--Color: var(--pf-t--global--text--color--subtle);
25
25
  --#{$card}__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
26
26
  --#{$card}__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
27
- --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
28
- --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
27
+ --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
28
+ --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
29
29
  --#{$card}__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
30
30
  --#{$card}__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
31
31
 
32
32
  // Expandable
33
- --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
33
+ --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
34
34
  --#{$card}__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
35
- --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
35
+ --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
36
36
  --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
37
37
  --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
38
38
  --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -86,7 +86,7 @@
86
86
  }
87
87
 
88
88
  .pf-v6-c-clipboard-copy__text {
89
- overflow-wrap: break-word;
89
+ overflow-wrap: anywhere;
90
90
  white-space: normal;
91
91
  }
92
92
  .pf-v6-c-clipboard-copy__text.pf-m-code {
@@ -108,7 +108,7 @@
108
108
  }
109
109
 
110
110
  .#{$clipboard-copy}__text {
111
- overflow-wrap: break-word;
111
+ overflow-wrap: anywhere;
112
112
  white-space: normal;
113
113
 
114
114
  &.pf-m-code {
@@ -424,7 +424,7 @@
424
424
  --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
425
425
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
426
426
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
427
- --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
427
+ --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
428
428
  --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
429
429
  --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
430
430
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -457,8 +457,8 @@
457
457
  --pf-v6-c-data-list--cell--WordBreak: normal;
458
458
  --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
459
459
  --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
460
- --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
461
- --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
460
+ --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
461
+ --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
462
462
  --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
463
463
  --pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
464
464
  --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -489,8 +489,8 @@
489
489
  --pf-v6-c-data-list__item-action--Display: flex;
490
490
  --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
491
491
  --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
492
- --pf-v6-c-data-list__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--default);
493
- --pf-v6-c-data-list__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--default);
492
+ --pf-v6-c-data-list__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--plain);
493
+ --pf-v6-c-data-list__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--plain);
494
494
  --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
495
495
  --pf-v6-c-data-list__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl);
496
496
  --pf-v6-c-data-list__item-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
@@ -20,7 +20,7 @@
20
20
  --#{$data-list}--pf-m-plain__item--BackgroundColor: transparent;
21
21
  --#{$data-list}__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
22
22
  --#{$data-list}__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
23
- --#{$data-list}__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
23
+ --#{$data-list}__item--m-clickable--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
24
24
  --#{$data-list}__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
25
25
  --#{$data-list}__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
26
26
  --#{$data-list}__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -58,8 +58,8 @@
58
58
 
59
59
  // toggle
60
60
  --#{$data-list}__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1); // offset toggle to align left
61
- --#{$data-list}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
62
- --#{$data-list}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
61
+ --#{$data-list}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
62
+ --#{$data-list}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
63
63
  --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
64
64
  --#{$data-list}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
65
65
  --#{$data-list}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -98,8 +98,8 @@
98
98
  --#{$data-list}__item-action--Display: flex;
99
99
  --#{$data-list}__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
100
100
  --#{$data-list}__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
101
- --#{$data-list}__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--default);
102
- --#{$data-list}__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--default);
101
+ --#{$data-list}__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--plain);
102
+ --#{$data-list}__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--plain);
103
103
  --#{$data-list}__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
104
104
  --#{$data-list}__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl);
105
105
  --#{$data-list}__item-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
@@ -76,7 +76,7 @@
76
76
  --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
77
77
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
78
78
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
79
- --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
79
+ --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
80
80
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
81
81
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
82
82
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
@@ -106,7 +106,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
106
106
 
107
107
  // Icon
108
108
  --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
109
- --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
109
+ --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
110
110
  --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
111
111
  --#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
112
112
  --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
@@ -14,8 +14,8 @@
14
14
  --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
15
15
  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
16
16
  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
17
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
17
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
18
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
19
19
  }
20
20
 
21
21
  .pf-v6-c-hint {
@@ -24,8 +24,8 @@
24
24
 
25
25
  // Hint Actions
26
26
  --#{$hint}__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
27
- --#{$hint}__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
28
- --#{$hint}__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
27
+ --#{$hint}__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
28
+ --#{$hint}__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
29
29
  }
30
30
 
31
31
  .#{$hint} {
@@ -220,7 +220,7 @@
220
220
  --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
221
221
  --pf-v6-c-menu__item-external--Color: transparent;
222
222
  --pf-v6-c-menu__item-select-icon--Color: transparent;
223
- --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
223
+ --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
224
224
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
225
225
  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
226
226
  --pf-v6-c-menu__list-item--hover--BorderColor: transparent;
@@ -587,7 +587,7 @@
587
587
  .pf-v6-c-menu__item-description {
588
588
  font-size: var(--pf-v6-c-menu__item-description--FontSize);
589
589
  color: var(--pf-v6-c-menu__item-description--Color);
590
- overflow-wrap: break-word;
590
+ overflow-wrap: anywhere;
591
591
  }
592
592
 
593
593
  .pf-v6-c-menu__item-check .pf-v6-c-check {
@@ -17,7 +17,7 @@
17
17
  --#{$menu}--BorderRadius: calc(var(--#{$menu}__item--BorderRadius) + var(--#{$menu}--PaddingBlockStart));
18
18
  --#{$menu}--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
19
19
  --#{$menu}--ZIndex: var(--pf-t--global--z-index--sm);
20
- --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled);
20
+ --#{$menu}--button--disabled--Color: var(--pf-t--global--text--color--disabled); // TODO: remove in breaking change
21
21
  --#{$menu}--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
22
22
  --#{$menu}--TransitionDuration: 0s;
23
23
  --#{$menu}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -205,7 +205,7 @@
205
205
  --#{$menu}__item-toggle-icon--Color: var(--#{$menu}--icon--disabled--Color);
206
206
  --#{$menu}__item-external--Color: transparent;
207
207
  --#{$menu}__item-select-icon--Color: transparent;
208
- --#{$menu}__item-description--Color: var(--#{$menu}--icon--disabled--Color);
208
+ --#{$menu}__item-description--Color: var(--#{$menu}__item--m-disabled--Color);
209
209
  --#{$menu}__list-item--BackgroundColor: transparent;
210
210
  --#{$menu}__list-item--hover--BackgroundColor: transparent;
211
211
  --#{$menu}__list-item--hover--BorderColor: transparent;
@@ -627,7 +627,7 @@
627
627
  .#{$menu}__item-description {
628
628
  font-size: var(--#{$menu}__item-description--FontSize);
629
629
  color: var(--#{$menu}__item-description--Color);
630
- overflow-wrap: break-word;
630
+ overflow-wrap: anywhere;
631
631
  }
632
632
 
633
633
  // - Menu check
@@ -34,7 +34,7 @@
34
34
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
35
35
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
36
36
  --pf-v6-c-modal-box__header-main--Gap: var(--pf-t--global--spacer--md);
37
- --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
37
+ --pf-v6-c-modal-box__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
38
38
  --pf-v6-c-modal-box__title--LineHeight: var(--pf-t--global--font--line-height--heading);
39
39
  --pf-v6-c-modal-box__title--FontFamily: var(--pf-t--global--font--family--heading);
40
40
  --pf-v6-c-modal-box__title--FontWeight: var(--pf-t--global--font--weight--heading--default);
@@ -56,8 +56,8 @@
56
56
  --pf-v6-c-modal-box__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
57
57
  --pf-v6-c-modal-box__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
58
58
  --pf-v6-c-modal-box__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
59
- --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
60
- --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
59
+ --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
60
+ --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
61
61
  }
62
62
 
63
63
  .pf-v6-c-modal-box {
@@ -183,7 +183,7 @@
183
183
  overflow-x: hidden;
184
184
  overflow-y: auto;
185
185
  overscroll-behavior: contain;
186
- overflow-wrap: break-word;
186
+ overflow-wrap: anywhere;
187
187
  -webkit-overflow-scrolling: touch;
188
188
  }
189
189
  .pf-v6-c-modal-box__body:last-child {
@@ -39,7 +39,7 @@
39
39
 
40
40
  // Header main
41
41
  --#{$modal-box}__header-main--Gap: var(--pf-t--global--spacer--md);
42
- --#{$modal-box}__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
42
+ --#{$modal-box}__header-main--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
43
43
 
44
44
  // Title
45
45
  --#{$modal-box}__title--LineHeight: var(--pf-t--global--font--line-height--heading);
@@ -75,8 +75,8 @@
75
75
  --#{$modal-box}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
76
76
 
77
77
  // Footer buttons
78
- --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md); // Button spacer is used to manipulate margin-inline-start and/or margin-right values at various breakpoints, with a single value.
79
- --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: calc(var(--#{$modal-box}__footer--c-button--MarginInlineEnd) / 2);
78
+ --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
79
+ --#{$modal-box}__footer--c-button--sm--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
80
80
  }
81
81
 
82
82
  .#{$modal-box} {
@@ -226,7 +226,7 @@
226
226
  overflow-x: hidden;
227
227
  overflow-y: auto;
228
228
  overscroll-behavior: contain;
229
- overflow-wrap: break-word;
229
+ overflow-wrap: anywhere;
230
230
  -webkit-overflow-scrolling: touch;
231
231
 
232
232
  &:last-child {
@@ -249,7 +249,7 @@
249
249
  margin-inline-end: var(--#{$modal-box}__footer--c-button--MarginInlineEnd);
250
250
 
251
251
  @media screen and (min-width: $pf-v6-global--breakpoint--sm) {
252
- --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--#{$modal-box}__footer--c-button--sm--MarginInlineEnd);
252
+ --#{$modal-box}__footer--c-button--MarginInlineEnd: var(--#{$modal-box}__footer--c-button--sm--MarginInlineEnd); // remove in breaking change
253
253
  }
254
254
  }
255
255
  }
@@ -1,6 +1,6 @@
1
1
  .pf-v6-c-nav {
2
- --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
2
+ --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
3
+ --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
4
4
  --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
5
5
  --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
6
6
  --pf-v6-c-nav__list--RowGap: var(--pf-t--global--spacer--sm);
@@ -2,8 +2,8 @@
2
2
 
3
3
  @include pf-root($nav) {
4
4
  // * Nav shared values
5
- --#{$nav}__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
- --#{$nav}__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
+ --#{$nav}__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
6
+ --#{$nav}__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
7
7
  --#{$nav}__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
8
8
  --#{$nav}__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
9
9
  --#{$nav}__list--RowGap: var(--pf-t--global--spacer--sm);
@@ -197,7 +197,7 @@
197
197
 
198
198
  .pf-v6-c-notification-drawer__list-item-header-title {
199
199
  font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
200
- overflow-wrap: break-word;
200
+ overflow-wrap: anywhere;
201
201
  }
202
202
  .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
203
203
  display: -webkit-box;
@@ -219,7 +219,7 @@
219
219
  grid-row: 2/3;
220
220
  grid-column: 1/2;
221
221
  margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
222
- overflow-wrap: break-word;
222
+ overflow-wrap: anywhere;
223
223
  }
224
224
 
225
225
  .pf-v6-c-notification-drawer__list-item-timestamp {
@@ -264,7 +264,7 @@
264
264
  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
265
265
  font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
266
266
  text-align: start;
267
- overflow-wrap: break-word;
267
+ overflow-wrap: anywhere;
268
268
  }
269
269
 
270
270
  .pf-v6-c-notification-drawer__group-toggle-count {
@@ -242,7 +242,7 @@
242
242
 
243
243
  .#{$notification-drawer}__list-item-header-title {
244
244
  font-weight: var(--#{$notification-drawer}__list-item-header-title--FontWeight);
245
- overflow-wrap: break-word;
245
+ overflow-wrap: anywhere;
246
246
 
247
247
  &.pf-m-truncate {
248
248
  @include pf-v6-line-clamp("var(--#{$notification-drawer}__list-item-header-title--max-lines)");
@@ -263,7 +263,7 @@
263
263
  grid-row: 2 / 3;
264
264
  grid-column: 1 / 2;
265
265
  margin-block-end: var(--#{$notification-drawer}__list-item-description--MarginBlockEnd);
266
- overflow-wrap: break-word;
266
+ overflow-wrap: anywhere;
267
267
  }
268
268
 
269
269
  .#{$notification-drawer}__list-item-timestamp {
@@ -307,7 +307,7 @@
307
307
  margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginInlineEnd);
308
308
  font-size: var(--#{$notification-drawer}__group-toggle-title--FontSize);
309
309
  text-align: start;
310
- overflow-wrap: break-word;
310
+ overflow-wrap: anywhere;
311
311
  }
312
312
 
313
313
  .#{$notification-drawer}__group-toggle-count {
@@ -33,7 +33,8 @@
33
33
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
34
34
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
35
35
  --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
36
- --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
37
+ --pf-v6-c-pagination--m-bottom--BorderRadius: 0;
37
38
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
38
39
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
39
40
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
@@ -47,6 +48,8 @@
47
48
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
48
49
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
49
50
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-pagination--m-bottom--m-static--BorderRadius: 0;
52
+ --pf-v6-c-pagination--m-bottom--m-static--BackgroundColor: transparent;
50
53
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
51
54
  }
52
55
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
@@ -54,6 +57,9 @@
54
57
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
55
58
  --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
56
59
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
60
+ --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm);
61
+ --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
62
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
57
63
  }
58
64
  .pf-v6-c-pagination {
59
65
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -65,6 +71,7 @@
65
71
  }
66
72
  @media screen and (min-width: 48rem) {
67
73
  .pf-v6-c-pagination {
74
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
68
75
  --pf-v6-c-pagination--m-bottom--BoxShadow: none;
69
76
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
70
77
  --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
@@ -90,9 +97,6 @@
90
97
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
91
98
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
92
99
  }
93
- :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
94
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
95
- }
96
100
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
97
101
  display: var(--pf-v6-c-pagination__page-menu--Display);
98
102
  }
@@ -108,11 +112,9 @@
108
112
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
109
113
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
110
114
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
115
+ border-radius: var(--pf-v6-c-pagination--m-bottom--BorderRadius);
111
116
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
112
117
  }
113
- :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
114
- --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
115
- }
116
118
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
117
119
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
118
120
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -131,6 +133,7 @@
131
133
  .pf-v6-c-pagination.pf-m-bottom {
132
134
  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
133
135
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
136
+ --pf-v6-c-pagination--m-bottom--BorderRadius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
134
137
  position: relative;
135
138
  justify-content: flex-end;
136
139
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
@@ -155,12 +158,14 @@
155
158
  }
156
159
  }
157
160
  .pf-v6-c-pagination.pf-m-static {
161
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-v6-c-pagination--m-bottom--m-static--BackgroundColor);
158
162
  position: relative;
159
163
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
160
164
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
161
165
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
162
166
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
163
167
  border: 0;
168
+ border-radius: var(--pf-v6-c-pagination--m-bottom--m-static--BorderRadius);
164
169
  box-shadow: none;
165
170
  }
166
171
  .pf-v6-c-pagination.pf-m-sticky {