@patternfly/patternfly 6.3.0-prerelease.76 → 6.3.0-prerelease.77

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 (14) hide show
  1. package/components/CalendarMonth/calendar-month.css +23 -8
  2. package/components/CalendarMonth/calendar-month.scss +26 -8
  3. package/components/Card/card.css +2 -0
  4. package/components/Card/card.scss +2 -0
  5. package/components/Drawer/drawer.css +3 -1
  6. package/components/Drawer/drawer.scss +4 -1
  7. package/components/Page/page.css +9 -5
  8. package/components/Page/page.scss +8 -5
  9. package/components/_index.css +37 -14
  10. package/package.json +1 -1
  11. package/patternfly-no-globals.css +37 -14
  12. package/patternfly.css +37 -14
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/components/CalendarMonth/calendar-month.css CHANGED
@@ -46,12 +46,14 @@
46
46
  --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
47
47
  --pf-v6-c-calendar-month__date--Width: 4ch;
48
48
  --pf-v6-c-calendar-month__date--Height: 4ch;
49
+ --pf-v6-c-calendar-month__date--BorderWidth: 0;
50
+ --pf-v6-c-calendar-month__date--BorderColor: transparent;
49
51
  --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
50
52
  --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
51
53
  --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
52
54
  --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
53
55
  --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
54
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
56
+ --pf-v6-c-calendar-month__date--after--BorderWidth: 0;
55
57
  --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
56
58
  --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
57
59
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -60,9 +62,12 @@
60
62
  --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
61
63
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
62
64
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
65
+ --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
63
66
  --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
64
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
65
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
67
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
68
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
69
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
70
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
66
71
  }
67
72
 
68
73
  .pf-v6-c-calendar-month {
@@ -143,8 +148,8 @@
143
148
  }
144
149
  .pf-v6-c-calendar-month__dates-cell.pf-m-current {
145
150
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
146
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
147
- --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
151
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth);
152
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor);
148
153
  }
149
154
  .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
150
155
  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
@@ -167,8 +172,10 @@
167
172
  .pf-v6-c-calendar-month__dates-cell.pf-m-selected {
168
173
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
169
174
  --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
175
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
176
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor);
170
177
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
171
- --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
178
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
172
179
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
173
180
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
174
181
  --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
@@ -192,6 +199,12 @@
192
199
  background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
193
200
  border: 0;
194
201
  }
202
+ .pf-v6-c-calendar-month__date::before {
203
+ position: absolute;
204
+ inset: 0;
205
+ content: "";
206
+ border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor);
207
+ }
195
208
  .pf-v6-c-calendar-month__date::after {
196
209
  position: absolute;
197
210
  inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
@@ -201,15 +214,17 @@
201
214
  content: "";
202
215
  border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
203
216
  }
204
- .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
217
+ .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after {
205
218
  border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
206
219
  }
207
220
  .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
208
221
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
209
- border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
222
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
223
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor);
210
224
  }
211
225
  .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
212
226
  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
227
+ --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth);
213
228
  outline: 0;
214
229
  }
215
230
  .pf-v6-c-calendar-month__date:disabled {
package/components/CalendarMonth/calendar-month.scss CHANGED
@@ -58,12 +58,14 @@
58
58
  // date button
59
59
  --#{$calendar-month}__date--Width: 4ch;
60
60
  --#{$calendar-month}__date--Height: 4ch;
61
+ --#{$calendar-month}__date--BorderWidth: 0;
62
+ --#{$calendar-month}__date--BorderColor: transparent;
61
63
  --#{$calendar-month}__date--BorderRadius: var(--pf-t--global--border--radius--large);
62
64
  --#{$calendar-month}__date--Color: var(--pf-t--global--text--color--regular);
63
65
  --#{$calendar-month}__date--BackgroundColor: transparent;
64
66
  --#{$calendar-month}__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
65
67
  --#{$calendar-month}__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
66
- --#{$calendar-month}__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
68
+ --#{$calendar-month}__date--after--BorderWidth: 0;
67
69
  --#{$calendar-month}__date--after--BorderColor: transparent;
68
70
  --#{$calendar-month}__date--after--OutlineOffset: 0;
69
71
  --#{$calendar-month}__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -72,9 +74,12 @@
72
74
  --#{$calendar-month}__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
73
75
  --#{$calendar-month}__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
74
76
  --#{$calendar-month}__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
77
+ --#{$calendar-month}__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
75
78
  --#{$calendar-month}__date--after--focus--OutlineOffset: -2px;
76
- --#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
77
- --#{$calendar-month}__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
79
+ --#{$calendar-month}__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
80
+ --#{$calendar-month}__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
81
+ --#{$calendar-month}__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
82
+ --#{$calendar-month}__dates-cell--m-selected__date--BorderColor: transparent;
78
83
  }
79
84
 
80
85
  .#{$calendar-month} {
@@ -158,8 +163,8 @@
158
163
 
159
164
  &.pf-m-current {
160
165
  --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-current__date--BackgroundColor);
161
- --#{$calendar-month}__date--after--BorderWidth: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderWidth);
162
- --#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__dates-cell--m-current__date--after--BorderColor);
166
+ --#{$calendar-month}__date--BorderWidth: var(--#{$calendar-month}__dates-cell--m-current__date--BorderWidth);
167
+ --#{$calendar-month}__date--BorderColor: var(--#{$calendar-month}__dates-cell--m-current__date--BorderColor);
163
168
  }
164
169
 
165
170
  &.pf-m-in-range {
@@ -187,10 +192,12 @@
187
192
  &.pf-m-selected {
188
193
  --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--BackgroundColor);
189
194
  --#{$calendar-month}__date--Color: var(--#{$calendar-month}__dates-cell--m-selected__date--Color);
195
+ --#{$calendar-month}__date--BorderWidth: var(--#{$calendar-month}__dates-cell--m-selected__date--BorderWidth);
196
+ --#{$calendar-month}__date--BorderColor: var(--#{$calendar-month}__dates-cell--m-selected__date--BorderColor);
190
197
 
191
198
  // tweak the hover styling for a selected date
192
199
  --#{$calendar-month}__date--hover--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--hover--BackgroundColor);
193
- --#{$calendar-month}__date--hover--BorderWidth: 0;
200
+ --#{$calendar-month}__date--hover--BorderWidth: var(--#{$calendar-month}__dates-cell--m-selected__date--BorderWidth);
194
201
 
195
202
  // tweak the focus styling for a selected date
196
203
  --#{$calendar-month}__date--focus--BackgroundColor: var(--#{$calendar-month}__dates-cell--m-selected__date--focus--BackgroundColor);
@@ -218,6 +225,15 @@
218
225
  background-color: var(--#{$calendar-month}__date--BackgroundColor);
219
226
  border: 0;
220
227
 
228
+ // base border
229
+ &::before {
230
+ position: absolute;
231
+ inset: 0;
232
+ content: "";
233
+ border: var(--#{$calendar-month}__date--BorderWidth) solid var(--#{$calendar-month}__date--BorderColor);
234
+ }
235
+
236
+ // offset focus outline
221
237
  &::after {
222
238
  position: absolute;
223
239
  inset-block-start: var(--#{$calendar-month}__date--after--OutlineOffset);
@@ -229,6 +245,7 @@
229
245
  }
230
246
 
231
247
  &,
248
+ &::before,
232
249
  &::after {
233
250
  border-radius: var(--#{$calendar-month}__date--BorderRadius);
234
251
  }
@@ -236,13 +253,14 @@
236
253
  &:hover,
237
254
  &.pf-m-hover {
238
255
  --#{$calendar-month}__date--BackgroundColor: var(--#{$calendar-month}__date--hover--BackgroundColor);
239
-
240
- border: var(--#{$calendar-month}__date--hover--BorderColor) solid var(--#{$calendar-month}__date--hover--BorderWidth);
256
+ --#{$calendar-month}__date--BorderWidth: var(--#{$calendar-month}__date--hover--BorderWidth);
257
+ --#{$calendar-month}__date--BorderColor: var(--#{$calendar-month}__date--hover--BorderColor);
241
258
  }
242
259
 
243
260
  &:focus,
244
261
  &.pf-m-focus {
245
262
  --#{$calendar-month}__date--after--BorderColor: var(--#{$calendar-month}__date--focus--after--BorderColor);
263
+ --#{$calendar-month}__date--after--BorderWidth: var(--#{$calendar-month}__date--focus--after--BorderWidth);
246
264
 
247
265
  outline: 0;
248
266
  }
package/components/Card/card.css CHANGED
@@ -71,6 +71,7 @@
71
71
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
72
72
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
73
73
  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
74
+ --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
74
75
  --pf-v6-c-card--m-full-height--Height: 100%;
75
76
  --pf-v6-c-card--m-plain--BorderColor: transparent;
76
77
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -157,6 +158,7 @@
157
158
  }
158
159
  .pf-v6-c-card.pf-m-secondary {
159
160
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
161
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
160
162
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
161
163
  }
162
164
  .pf-v6-c-card.pf-m-plain {
package/components/Card/card.scss CHANGED
@@ -98,6 +98,7 @@
98
98
  // Secondary
99
99
  --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
100
100
  --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
101
+ --#{$card}--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
101
102
 
102
103
  // Full height
103
104
  --#{$card}--m-full-height--Height: 100%;
@@ -221,6 +222,7 @@
221
222
 
222
223
  &.pf-m-secondary {
223
224
  --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
225
+ --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
224
226
  --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
225
227
  }
226
228
 
package/components/Drawer/drawer.css CHANGED
@@ -111,7 +111,8 @@
111
111
  --pf-v6-c-drawer__panel--BoxShadow: none;
112
112
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
113
113
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
114
- --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
114
+ --pf-v6-c-drawer--m-inline__panel--after--Width: 0;
115
+ --pf-v6-c-drawer--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default);
115
116
  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
116
117
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
117
118
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -419,6 +420,7 @@
419
420
 
420
421
  @media screen and (min-width: 48rem) {
421
422
  .pf-v6-c-drawer {
423
+ --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
422
424
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
423
425
  }
424
426
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
package/components/Drawer/drawer.scss CHANGED
@@ -169,7 +169,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
169
169
  // Divider
170
170
  // TODO remove these variables in a breaking change in favor of setting the border variables directly
171
171
  --#{$drawer}__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
172
- --#{$drawer}--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default); // TODO this turns on border always for inline
172
+ --#{$drawer}--m-inline__panel--after--Width: 0;
173
+ --#{$drawer}--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default); // TODO this turns on border always for inline
173
174
  --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
174
175
  --#{$drawer}__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
175
176
  --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -515,6 +516,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
515
516
  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
516
517
  // Default
517
518
  .#{$drawer} {
519
+ --#{$drawer}--m-inline__panel--after--Width: var(--#{$drawer}--m-inline__panel--after--md--Width);
520
+
518
521
  min-width: var(--#{$drawer}__panel--MinWidth);
519
522
 
520
523
  > .#{$drawer}__main {
package/components/Page/page.css CHANGED
@@ -124,6 +124,15 @@
124
124
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
125
125
  }
126
126
  }
127
+ @media screen and (max-width: calc(48rem - 1px)) {
128
+ .pf-v6-c-page {
129
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
130
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
131
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
132
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
133
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
134
+ }
135
+ }
127
136
 
128
137
  .pf-v6-c-page {
129
138
  display: grid;
@@ -514,13 +523,8 @@
514
523
  @media screen and (max-width: calc(48rem - 1px)) {
515
524
  .pf-v6-c-page__main-container {
516
525
  --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
517
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
518
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
519
526
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
520
527
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
521
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
522
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
523
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
524
528
  }
525
529
  }
526
530
 
package/components/Page/page.scss CHANGED
@@ -93,6 +93,14 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
93
93
  --#{$page}__main-container--xs--BorderInlineStartWidth: 0px; // needs a unit because it's used in calc()
94
94
  --#{$page}__main-container--xs--BorderInlineEndWidth: 0px; // needs a unit because it's used in calc()
95
95
 
96
+ @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
97
+ --#{$page}__main-container--MarginInlineStart: var(--#{$page}__main-container--xs--MarginInlineStart);
98
+ --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
99
+ --#{$page}__main-container--BorderBlockEndWidth: var(--#{$page}__main-container--xs--BorderBlockEndWidth);
100
+ --#{$page}__main-container--BorderInlineStartWidth: var(--#{$page}__main-container--xs--BorderInlineStartWidth);
101
+ --#{$page}__main-container--BorderInlineEndWidth: var(--#{$page}__main-container--xs--BorderInlineEndWidth);
102
+ }
103
+
96
104
  // Main section
97
105
  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
98
106
  --#{$page}__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg); // This is the intended spacing - the border of the main section will be subtracted
@@ -408,13 +416,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
408
416
 
409
417
  @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
410
418
  --#{$page}__main-container--AlignSelf: var(--#{$page}__main-container--xs--AlignSelf);
411
- --#{$page}__main-container--MarginInlineStart: var(--#{$page}__main-container--xs--MarginInlineStart);
412
- --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
413
419
  --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--xs--MaxHeight);
414
420
  --#{$page}__main-container--BorderRadius: var(--#{$page}__main-container--xs--BorderRadius);
415
- --#{$page}__main-container--BorderBlockEndWidth: var(--#{$page}__main-container--xs--BorderBlockEndWidth);
416
- --#{$page}__main-container--BorderInlineStartWidth: var(--#{$page}__main-container--xs--BorderInlineStartWidth);
417
- --#{$page}__main-container--BorderInlineEndWidth: var(--#{$page}__main-container--xs--BorderInlineEndWidth);
418
421
  }
419
422
  }
420
423
 
package/components/_index.css CHANGED
@@ -2458,12 +2458,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2458
2458
  --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
2459
2459
  --pf-v6-c-calendar-month__date--Width: 4ch;
2460
2460
  --pf-v6-c-calendar-month__date--Height: 4ch;
2461
+ --pf-v6-c-calendar-month__date--BorderWidth: 0;
2462
+ --pf-v6-c-calendar-month__date--BorderColor: transparent;
2461
2463
  --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
2462
2464
  --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
2463
2465
  --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
2464
2466
  --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
2465
2467
  --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
2466
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
2468
+ --pf-v6-c-calendar-month__date--after--BorderWidth: 0;
2467
2469
  --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
2468
2470
  --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
2469
2471
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -2472,9 +2474,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2472
2474
  --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
2473
2475
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
2474
2476
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
2477
+ --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
2475
2478
  --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
2476
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2477
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
2479
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2480
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
2481
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
2482
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
2478
2483
  }
2479
2484
 
2480
2485
  .pf-v6-c-calendar-month {
@@ -2555,8 +2560,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2555
2560
  }
2556
2561
  .pf-v6-c-calendar-month__dates-cell.pf-m-current {
2557
2562
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
2558
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
2559
- --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
2563
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth);
2564
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor);
2560
2565
  }
2561
2566
  .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
2562
2567
  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
@@ -2579,8 +2584,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2579
2584
  .pf-v6-c-calendar-month__dates-cell.pf-m-selected {
2580
2585
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
2581
2586
  --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
2587
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
2588
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor);
2582
2589
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
2583
- --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
2590
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
2584
2591
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
2585
2592
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
2586
2593
  --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
@@ -2604,6 +2611,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2604
2611
  background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
2605
2612
  border: 0;
2606
2613
  }
2614
+ .pf-v6-c-calendar-month__date::before {
2615
+ position: absolute;
2616
+ inset: 0;
2617
+ content: "";
2618
+ border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor);
2619
+ }
2607
2620
  .pf-v6-c-calendar-month__date::after {
2608
2621
  position: absolute;
2609
2622
  inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
@@ -2613,15 +2626,17 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2613
2626
  content: "";
2614
2627
  border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
2615
2628
  }
2616
- .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
2629
+ .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after {
2617
2630
  border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
2618
2631
  }
2619
2632
  .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
2620
2633
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
2621
- border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
2634
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
2635
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor);
2622
2636
  }
2623
2637
  .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
2624
2638
  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
2639
+ --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth);
2625
2640
  outline: 0;
2626
2641
  }
2627
2642
  .pf-v6-c-calendar-month__date:disabled {
@@ -2704,6 +2719,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2704
2719
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
2705
2720
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
2706
2721
  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
2722
+ --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
2707
2723
  --pf-v6-c-card--m-full-height--Height: 100%;
2708
2724
  --pf-v6-c-card--m-plain--BorderColor: transparent;
2709
2725
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -2790,6 +2806,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2790
2806
  }
2791
2807
  .pf-v6-c-card.pf-m-secondary {
2792
2808
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
2809
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
2793
2810
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
2794
2811
  }
2795
2812
  .pf-v6-c-card.pf-m-plain {
@@ -5792,7 +5809,8 @@ ul) {
5792
5809
  --pf-v6-c-drawer__panel--BoxShadow: none;
5793
5810
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
5794
5811
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
5795
- --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
5812
+ --pf-v6-c-drawer--m-inline__panel--after--Width: 0;
5813
+ --pf-v6-c-drawer--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default);
5796
5814
  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
5797
5815
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
5798
5816
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -6100,6 +6118,7 @@ ul) {
6100
6118
 
6101
6119
  @media screen and (min-width: 48rem) {
6102
6120
  .pf-v6-c-drawer {
6121
+ --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
6103
6122
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
6104
6123
  }
6105
6124
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -12606,6 +12625,15 @@ ul.pf-v6-c-list {
12606
12625
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
12607
12626
  }
12608
12627
  }
12628
+ @media screen and (max-width: calc(48rem - 1px)) {
12629
+ .pf-v6-c-page {
12630
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
12631
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12632
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
12633
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
12634
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
12635
+ }
12636
+ }
12609
12637
 
12610
12638
  .pf-v6-c-page {
12611
12639
  display: grid;
@@ -12996,13 +13024,8 @@ ul.pf-v6-c-list {
12996
13024
  @media screen and (max-width: calc(48rem - 1px)) {
12997
13025
  .pf-v6-c-page__main-container {
12998
13026
  --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
12999
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
13000
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
13001
13027
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
13002
13028
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
13003
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
13004
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
13005
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
13006
13029
  }
13007
13030
  }
13008
13031
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.3.0-prerelease.76",
4
+ "version": "6.3.0-prerelease.77",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "engines": {
package/patternfly-no-globals.css CHANGED
@@ -11125,12 +11125,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11125
11125
  --pf-v6-c-calendar-month__dates-cell--m-adjacent-month__date--Color: var(--pf-t--global--text--color--subtle);
11126
11126
  --pf-v6-c-calendar-month__date--Width: 4ch;
11127
11127
  --pf-v6-c-calendar-month__date--Height: 4ch;
11128
+ --pf-v6-c-calendar-month__date--BorderWidth: 0;
11129
+ --pf-v6-c-calendar-month__date--BorderColor: transparent;
11128
11130
  --pf-v6-c-calendar-month__date--BorderRadius: var(--pf-t--global--border--radius--large);
11129
11131
  --pf-v6-c-calendar-month__date--Color: var(--pf-t--global--text--color--regular);
11130
11132
  --pf-v6-c-calendar-month__date--BackgroundColor: transparent;
11131
11133
  --pf-v6-c-calendar-month__date--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
11132
11134
  --pf-v6-c-calendar-month__date--disabled--Color: var(--pf-t--global--text--color--on-disabled);
11133
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-t--global--border--width--regular);
11135
+ --pf-v6-c-calendar-month__date--after--BorderWidth: 0;
11134
11136
  --pf-v6-c-calendar-month__date--after--BorderColor: transparent;
11135
11137
  --pf-v6-c-calendar-month__date--after--OutlineOffset: 0;
11136
11138
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -11139,9 +11141,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11139
11141
  --pf-v6-c-calendar-month__date--focus--Color: var(--pf-t--global--icon--color--on-brand--clicked);
11140
11142
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-t--global--color--brand--default);
11141
11143
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-t--global--border--color--hover);
11144
+ --pf-v6-c-calendar-month__date--focus--after--BorderWidth: var(--pf-t--global--border--width--regular);
11142
11145
  --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
11143
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11144
- --pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
11146
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11147
+ --pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor: var(--pf-t--global--border--color--high-contrast);
11148
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
11149
+ --pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor: transparent;
11145
11150
  }
11146
11151
 
11147
11152
  .pf-v6-c-calendar-month {
@@ -11222,8 +11227,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11222
11227
  }
11223
11228
  .pf-v6-c-calendar-month__dates-cell.pf-m-current {
11224
11229
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BackgroundColor);
11225
- --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderWidth);
11226
- --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--after--BorderColor);
11230
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderWidth);
11231
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-current__date--BorderColor);
11227
11232
  }
11228
11233
  .pf-v6-c-calendar-month__dates-cell.pf-m-in-range {
11229
11234
  --pf-v6-c-calendar-month__dates-cell--after--BorderBlockStartWidth: var(--pf-v6-c-calendar-month__dates-cell--m-in-range--after--BorderBlockStartWidth);
@@ -11246,8 +11251,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11246
11251
  .pf-v6-c-calendar-month__dates-cell.pf-m-selected {
11247
11252
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BackgroundColor);
11248
11253
  --pf-v6-c-calendar-month__date--Color: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--Color);
11254
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
11255
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderColor);
11249
11256
  --pf-v6-c-calendar-month__date--hover--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--hover--BackgroundColor);
11250
- --pf-v6-c-calendar-month__date--hover--BorderWidth: 0;
11257
+ --pf-v6-c-calendar-month__date--hover--BorderWidth: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--BorderWidth);
11251
11258
  --pf-v6-c-calendar-month__date--focus--BackgroundColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--BackgroundColor);
11252
11259
  --pf-v6-c-calendar-month__date--focus--after--BorderColor: var(--pf-v6-c-calendar-month__dates-cell--m-selected__date--focus--after--BorderColor);
11253
11260
  --pf-v6-c-calendar-month__date--after--OutlineOffset: var(--pf-v6-c-calendar-month__date--after--focus--OutlineOffset);
@@ -11271,6 +11278,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11271
11278
  background-color: var(--pf-v6-c-calendar-month__date--BackgroundColor);
11272
11279
  border: 0;
11273
11280
  }
11281
+ .pf-v6-c-calendar-month__date::before {
11282
+ position: absolute;
11283
+ inset: 0;
11284
+ content: "";
11285
+ border: var(--pf-v6-c-calendar-month__date--BorderWidth) solid var(--pf-v6-c-calendar-month__date--BorderColor);
11286
+ }
11274
11287
  .pf-v6-c-calendar-month__date::after {
11275
11288
  position: absolute;
11276
11289
  inset-block-start: var(--pf-v6-c-calendar-month__date--after--OutlineOffset);
@@ -11280,15 +11293,17 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11280
11293
  content: "";
11281
11294
  border: var(--pf-v6-c-calendar-month__date--after--BorderWidth) solid var(--pf-v6-c-calendar-month__date--after--BorderColor);
11282
11295
  }
11283
- .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::after {
11296
+ .pf-v6-c-calendar-month__date, .pf-v6-c-calendar-month__date::before, .pf-v6-c-calendar-month__date::after {
11284
11297
  border-radius: var(--pf-v6-c-calendar-month__date--BorderRadius);
11285
11298
  }
11286
11299
  .pf-v6-c-calendar-month__date:hover, .pf-v6-c-calendar-month__date.pf-m-hover {
11287
11300
  --pf-v6-c-calendar-month__date--BackgroundColor: var(--pf-v6-c-calendar-month__date--hover--BackgroundColor);
11288
- border: var(--pf-v6-c-calendar-month__date--hover--BorderColor) solid var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
11301
+ --pf-v6-c-calendar-month__date--BorderWidth: var(--pf-v6-c-calendar-month__date--hover--BorderWidth);
11302
+ --pf-v6-c-calendar-month__date--BorderColor: var(--pf-v6-c-calendar-month__date--hover--BorderColor);
11289
11303
  }
11290
11304
  .pf-v6-c-calendar-month__date:focus, .pf-v6-c-calendar-month__date.pf-m-focus {
11291
11305
  --pf-v6-c-calendar-month__date--after--BorderColor: var(--pf-v6-c-calendar-month__date--focus--after--BorderColor);
11306
+ --pf-v6-c-calendar-month__date--after--BorderWidth: var(--pf-v6-c-calendar-month__date--focus--after--BorderWidth);
11292
11307
  outline: 0;
11293
11308
  }
11294
11309
  .pf-v6-c-calendar-month__date:disabled {
@@ -11371,6 +11386,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11371
11386
  --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
11372
11387
  --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11373
11388
  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
11389
+ --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11374
11390
  --pf-v6-c-card--m-full-height--Height: 100%;
11375
11391
  --pf-v6-c-card--m-plain--BorderColor: transparent;
11376
11392
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
@@ -11457,6 +11473,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11457
11473
  }
11458
11474
  .pf-v6-c-card.pf-m-secondary {
11459
11475
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
11476
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
11460
11477
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
11461
11478
  }
11462
11479
  .pf-v6-c-card.pf-m-plain {
@@ -14459,7 +14476,8 @@ ul) {
14459
14476
  --pf-v6-c-drawer__panel--BoxShadow: none;
14460
14477
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
14461
14478
  --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
14462
- --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
14479
+ --pf-v6-c-drawer--m-inline__panel--after--Width: 0;
14480
+ --pf-v6-c-drawer--m-inline__panel--after--md--Width: var(--pf-t--global--border--width--divider--default);
14463
14481
  --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
14464
14482
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
14465
14483
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
@@ -14767,6 +14785,7 @@ ul) {
14767
14785
 
14768
14786
  @media screen and (min-width: 48rem) {
14769
14787
  .pf-v6-c-drawer {
14788
+ --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
14770
14789
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
14771
14790
  }
14772
14791
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -21273,6 +21292,15 @@ ul.pf-v6-c-list {
21273
21292
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
21274
21293
  }
21275
21294
  }
21295
+ @media screen and (max-width: calc(48rem - 1px)) {
21296
+ .pf-v6-c-page {
21297
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
21298
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
21299
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
21300
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
21301
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
21302
+ }
21303
+ }
21276
21304
 
21277
21305
  .pf-v6-c-page {
21278
21306
  display: grid;
@@ -21663,13 +21691,8 @@ ul.pf-v6-c-list {
21663
21691
  @media screen and (max-width: calc(48rem - 1px)) {
21664
21692
  .pf-v6-c-page__main-container {
21665
21693
  --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
21666
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
21667
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
21668
21694
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
21669
21695
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
21670
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
21671
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
21672
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
21673
21696
  }
21674
21697
  }
21675
21698