@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +35 -4
  59. package/components/Menu/menu.scss +32 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +7 -1
  71. package/components/Panel/panel.scss +7 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1390 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2837 -437
  165. package/patternfly.css +2839 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/components/Alert/alert-group.scss CHANGED
@@ -38,35 +38,60 @@
38
38
  var(--#{$alert-group}--m-toast__item--c-alert--TransitionTimingFunction)
39
39
  0s;
40
40
 
41
- // Alert group item removal reduced motion
42
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
43
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
44
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
45
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
46
- --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
47
-
48
- // Alert group item removal
49
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
50
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
51
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
52
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
53
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
54
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
55
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
56
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
57
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
58
- --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
41
+ // Alert group item removal (outgoing) reduced motion
42
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--opacity--default: var(--pf-t--global--motion--duration--fade--default);
43
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default: var(--pf-t--global--motion--timing-function--accelerate);
44
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default: var(--pf-t--global--motion--duration--fade--default);
45
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--margin-block--default: var(--pf-t--global--motion--duration--fade--default);
46
+ --#{$alert-group}--m-toast__item--m-outgoing--c-alert--TransitionDelay--default: var(--pf-t--global--motion--duration--fade--default);
47
+
48
+ // TODO Legacy variables for alert group item removal reduced motion - remove in breaking change
49
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default: initial;
50
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default: initial;
51
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default: initial;
52
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default: initial;
53
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default: initial;
54
+
55
+ // Alert group item removal (outgoing)
56
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-out--short);
57
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--accelerate);
58
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--opacity: var(--pf-t--global--motion--duration--slide-out--short);
59
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--opacity: var(--pf-t--global--motion--timing-function--accelerate);
60
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--margin-block: var(--pf-t--global--motion--duration--fade--short);
61
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block: var(--pf-t--global--motion--timing-function--accelerate);
62
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--margin-block: var(--pf-t--global--motion--duration--slide-out--short);
63
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows: var(--pf-t--global--motion--duration--slide-in--short);
64
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows: var(--pf-t--global--motion--timing-function--accelerate);
65
+ --#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows: var(--pf-t--global--motion--duration--slide-out--short);
59
66
 
60
- // Alert removal
61
- --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
62
- --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
63
- --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: all
64
- var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration)
65
- var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction)
66
- var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration);
67
+ // TODO Legacy variables for Alert group item removal - remove in breaking change
68
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform: initial;
69
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform: initial;
70
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity: initial;
71
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity: initial;
72
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block: initial;
73
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block: initial;
74
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block: initial;
75
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows: initial;
76
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows: initial;
77
+ --#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows: initial;
78
+
79
+ // Alert removal (outgoing)
80
+ --#{$alert-group}--m-toast__item--m-outgoing--c-alert--TransitionDuration: var(--pf-t--global--motion--duration--slide-out--short);
81
+ --#{$alert-group}--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
82
+ --#{$alert-group}--m-toast__item--m-outgoing--c-alert--Transition: all
83
+ var(--#{$alert-group}--m-toast__item--m-outgoing--c-alert--TransitionDuration)
84
+ var(--#{$alert-group}--m-toast__item--m-outgoing--c-alert--TransitionTimingFunction)
85
+ var(--#{$alert-group}--m-toast__item--m-outgoing--c-alert--TransitionDuration);
67
86
 
68
- // Overflow button
69
- --#{$alert-group}__overflow-button--BorderWidth: 0;
87
+ // TODO Legacy variables for Alert removal - remove in breaking change
88
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDuration: initial;
89
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionTimingFunction: initial;
90
+ --#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition: initial;
91
+
92
+ // Overflow button
93
+ --#{$alert-group}__overflow-button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
94
+ --#{$alert-group}__overflow-button--BorderColor: var(--pf-t--global--border--color--high-contrast);
70
95
  --#{$alert-group}__overflow-button--BorderRadius: var(--pf-t--global--border--radius--medium);
71
96
  --#{$alert-group}__overflow-button--PaddingBlockStart: var(--pf-t--global--spacer--md);
72
97
  --#{$alert-group}__overflow-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -75,6 +100,7 @@
75
100
  --#{$alert-group}__overflow-button--Color: var(--pf-t--global--text--color--link--default);
76
101
  --#{$alert-group}__overflow-button--BoxShadow: var(--pf-t--global--box-shadow--lg);
77
102
  --#{$alert-group}__overflow-button--BackgroundColor: var(--pf-t--global--background--color--floating--default);
103
+ --#{$alert-group}__overflow-button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
78
104
  --#{$alert-group}__overflow-button--hover--Color: var(--pf-t--global--text--color--link--hover);
79
105
  --#{$alert-group}__overflow-button--hover--BackgroundColor: var(--pf-t--global--background--color--floating--hover);
80
106
  --#{$alert-group}__overflow-button--hover--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
@@ -110,9 +136,23 @@
110
136
  padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingInlineEnd);
111
137
  color: var(--#{$alert-group}__overflow-button--Color);
112
138
  background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
113
- border-width: var(--#{$alert-group}__overflow-button--BorderWidth);
139
+ border: 0;
114
140
  border-radius: var(--#{$alert-group}__overflow-button--BorderRadius);
115
141
  box-shadow: var(--#{$alert-group}__overflow-button--BoxShadow);
142
+
143
+ &::after {
144
+ position: absolute;
145
+ inset: 0;
146
+ pointer-events: none;
147
+ content: "";
148
+ border: var(--#{$alert-group}__overflow-button--BorderWidth) solid var(--#{$alert-group}__overflow-button--BorderColor);
149
+ border-radius: inherit;
150
+ }
151
+
152
+ &:hover,
153
+ &:focus {
154
+ --#{$alert-group}__overflow-button--BorderWidth: var(--#{$alert-group}__overflow-button--hover--BorderWidth);
155
+ }
116
156
  }
117
157
 
118
158
  .#{$alert-group}__item {
@@ -155,7 +195,8 @@
155
195
 
156
196
  // This class is used BEFORE the alert item comes into the list
157
197
  // Only apply if the item is the first alert in the list (all new alerts should appear at the top)
158
- &.pf-m-offstage-top:first-child {
198
+ &.pf-m-offstage-top:first-child, // TODO remove in breaking change
199
+ &.pf-m-incoming:first-child {
159
200
  // make the item have no height and position it up above
160
201
  grid-template-rows: 0fr;
161
202
  margin-block: 0;
@@ -174,7 +215,8 @@
174
215
 
175
216
  // Add this class before removing an alert
176
217
  // TODO auto dismissal should be the same motion, but has a different duration
177
- &.pf-m-offstage-right {
218
+ &.pf-m-offstage-right, // TODO remove in breaking change
219
+ &.pf-m-outgoing {
178
220
  grid-template-rows: 0fr; // collapse vertically to bring up the items below
179
221
  margin-block: 0;
180
222
  overflow: hidden;
@@ -186,13 +228,13 @@
186
228
  transition:
187
229
  grid-template-rows
188
230
  0s
189
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default),
231
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows--default, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows--default)),
190
232
  margin-block
191
233
  0s
192
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default),
234
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block--default, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--margin-block--default)),
193
235
  opacity
194
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default)
195
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default);
236
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity--default, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--opacity--default))
237
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity--default, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--opacity--default));
196
238
 
197
239
  & .pf-v6-c-alert {
198
240
  min-height: 0;
@@ -202,32 +244,37 @@
202
244
  transition:
203
245
  all
204
246
  0s
205
- var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default);
247
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--TransitionDelay--default, var(--#{$alert-group}--m-toast__item--m-outgoing--c-alert--TransitionDelay--default));
206
248
  }
207
249
 
208
- // This transition will happen when the item is removed (.pf-m-offstage-right is added)
250
+ // This transition will happen when the item is removed (.pf-m-outgoing is added)
209
251
  // Slide it down into place, then reduce height
210
252
  // These values are for regular motion
211
253
  @media screen and (prefers-reduced-motion: no-preference) {
212
254
  transition:
213
255
  transform
214
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform)
215
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform),
256
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--transform, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--transform))
257
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--transform, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--transform)),
216
258
  opacity
217
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity)
218
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity),
259
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--opacity, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--opacity))
260
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--opacity, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--opacity)),
219
261
  margin-block
220
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block)
221
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block)
222
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block),
262
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--margin-block, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--margin-block))
263
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--margin-block, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--margin-block))
264
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--margin-block, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--margin-block)),
223
265
  grid-template-rows
224
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows)
225
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows)
226
- var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows);
227
- transform: translateX(100%);
266
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDuration--grid-template-rows, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDuration--grid-template-rows))
267
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionTimingFunction--grid-template-rows, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionTimingFunction--grid-template-rows))
268
+ var(--#{$alert-group}--m-toast__item--m-offstage-right--TransitionDelay--grid-template-rows, var(--#{$alert-group}--m-toast__item--m-outgoing--TransitionDelay--grid-template-rows));
228
269
 
270
+ @include pf-v6-bidirectional-style(
271
+ $prop: transform,
272
+ $ltr-val: translateX(100%),
273
+ $rtl-val: translateX(#{pf-v6-calc-inverse(100%)}),
274
+ );
275
+
229
276
  & .pf-v6-c-alert {
230
- transition: var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition);
277
+ transition: var(--#{$alert-group}--m-toast__item--m-offstage-right--c-alert--Transition, var(--#{$alert-group}--m-toast__item--m-outgoing--c-alert--Transition));
231
278
  }
232
279
  }
233
280
  }
package/components/Badge/badge.css CHANGED
@@ -12,6 +12,7 @@
12
12
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
13
13
  --pf-v6-c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
14
14
  --pf-v6-c-badge--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
15
+ --pf-v6-c-badge--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
15
16
  --pf-v6-c-badge--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
16
17
  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
17
18
  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -44,6 +45,7 @@
44
45
  border-radius: inherit;
45
46
  }
46
47
  .pf-v6-c-badge.pf-m-read {
48
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-badge--m-read--BorderColor);
47
49
  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
48
50
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
49
51
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-read__toggle-icon--Color);
package/components/Badge/badge.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  // Modifiers
20
20
  --#{$badge}--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
21
21
  --#{$badge}--m-read--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
22
+ --#{$badge}--m-read--BorderColor: var(--pf-t--global--border--color--high-contrast);
22
23
  --#{$badge}--m-read__toggle-icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
23
24
  --#{$badge}--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
24
25
  --#{$badge}--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -52,6 +53,7 @@
52
53
  }
53
54
 
54
55
  &.pf-m-read {
56
+ --#{$badge}--BorderColor: var(--#{$badge}--m-read--BorderColor);
55
57
  --#{$badge}--Color: var(--#{$badge}--m-read--Color);
56
58
  --#{$badge}--BackgroundColor: var(--#{$badge}--m-read--BackgroundColor);
57
59
  --#{$badge}__toggle-icon--Color: var(--#{$badge}--m-read__toggle-icon--Color);
package/components/Banner/banner.css CHANGED
@@ -8,6 +8,8 @@
8
8
  --pf-v6-c-banner--FontSize: var(--pf-t--global--font--size--body--default);
9
9
  --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
10
10
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
11
+ --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
12
+ --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11
13
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
12
14
  --pf-v6-c-banner--link--TextDecoration: underline;
13
15
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -58,6 +60,8 @@
58
60
  color: var(--pf-v6-c-banner--Color);
59
61
  white-space: nowrap;
60
62
  background-color: var(--pf-v6-c-banner--BackgroundColor);
63
+ border-block-start: var(--pf-v6-c-banner--BorderWidth) solid var(--pf-v6-c-banner--BorderColor);
64
+ border-block-end: var(--pf-v6-c-banner--BorderWidth) solid var(--pf-v6-c-banner--BorderColor);
61
65
  }
62
66
  .pf-v6-c-banner.pf-m-danger {
63
67
  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-danger--BackgroundColor);
package/components/Banner/banner.scss CHANGED
@@ -10,6 +10,8 @@
10
10
  --#{$banner}--FontSize: var(--pf-t--global--font--size--body--default);
11
11
  --#{$banner}--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
12
12
  --#{$banner}--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
13
+ --#{$banner}--BorderColor: var(--pf-t--global--border--color--high-contrast);
14
+ --#{$banner}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13
15
 
14
16
  @media (min-width: $pf-v6-global--breakpoint--md) {
15
17
  --#{$banner}--PaddingInlineEnd: var(--#{$banner}--md--PaddingInlineEnd);
@@ -67,6 +69,8 @@
67
69
  color: var(--#{$banner}--Color);
68
70
  white-space: nowrap;
69
71
  background-color: var(--#{$banner}--BackgroundColor);
72
+ border-block-start: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor);
73
+ border-block-end: var(--#{$banner}--BorderWidth) solid var(--#{$banner}--BorderColor);
70
74
 
71
75
  &.pf-m-danger {
72
76
  --#{$banner}--BackgroundColor: var(--#{$banner}--m-danger--BackgroundColor);