@patternfly/patternfly 6.3.0-prerelease.54 → 6.3.0-prerelease.56

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 (33) hide show
  1. package/base/patternfly-variables.css +0 -36
  2. package/base/tokens/tokens-local.scss +0 -38
  3. package/components/Accordion/accordion.css +2 -2
  4. package/components/Accordion/accordion.scss +2 -2
  5. package/components/Banner/banner.css +1 -1
  6. package/components/Banner/banner.scss +1 -1
  7. package/components/CodeBlock/code-block.css +1 -1
  8. package/components/CodeBlock/code-block.scss +1 -1
  9. package/components/DatePicker/date-picker.css +3 -0
  10. package/components/DatePicker/date-picker.scss +4 -0
  11. package/components/Drawer/drawer.css +2 -2
  12. package/components/Drawer/drawer.scss +2 -2
  13. package/components/Login/login.css +1 -1
  14. package/components/Login/login.scss +1 -1
  15. package/components/Menu/menu.css +1 -1
  16. package/components/Menu/menu.scss +1 -1
  17. package/components/ModalBox/modal-box.css +1 -1
  18. package/components/ModalBox/modal-box.scss +1 -1
  19. package/components/Page/page.css +61 -22
  20. package/components/Page/page.scss +42 -13
  21. package/components/Popover/popover.css +1 -1
  22. package/components/Popover/popover.scss +1 -1
  23. package/components/Table/table.css +1 -1
  24. package/components/Table/table.scss +1 -1
  25. package/components/_index.css +75 -33
  26. package/docs/components/Progress/examples/Progress.md +222 -210
  27. package/package.json +1 -1
  28. package/patternfly-base-no-globals.css +0 -36
  29. package/patternfly-base.css +0 -36
  30. package/patternfly-no-globals.css +75 -69
  31. package/patternfly.css +75 -69
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/components/Page/page.scss CHANGED
@@ -18,7 +18,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
18
18
  --#{$page}__sidebar--Width: var(--#{$page}__sidebar--Width--base);
19
19
  --#{$page}__sidebar--xl--Width: var(--#{$page}__sidebar--Width--base);
20
20
  --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21
- --#{$page}__sidebar--BoxShadow: none;
21
+ --#{$page}__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
22
22
 
23
23
  // TODO Reduced Motion default needed
24
24
  --#{$page}__sidebar--TransitionProperty: opacity;
@@ -35,6 +35,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
35
35
  --#{$page}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
36
36
  --#{$page}__sidebar--PaddingInlineStart: 0;
37
37
  --#{$page}__sidebar--PaddingInlineEnd: 0;
38
+ --#{$page}__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
39
+ --#{$page}__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
38
40
 
39
41
  @media screen and (prefers-reduced-motion: no-preference) {
40
42
  --#{$page}__sidebar--Opacity: 1;
@@ -64,6 +66,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
64
66
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
65
67
  --#{$page}__sidebar--TranslateX: var(--#{$page}__sidebar--xl--TranslateX);
66
68
  --#{$page}__sidebar--Opacity: var(--#{$page}__sidebar--xl--Opacity);
69
+ --#{$page}__sidebar--BorderInlineEndWidth: 0;
67
70
  }
68
71
 
69
72
  // Container for the main content area (grid area)
@@ -76,13 +79,19 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
76
79
  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
77
80
  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset);
78
81
  --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
79
- --#{$page}__main-container--BorderWidth: var(--pf-t--global--border--width--main--default);
80
- --#{$page}__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
82
+ --#{$page}__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
83
+ --#{$page}__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
84
+ --#{$page}__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
85
+ --#{$page}__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
86
+ --#{$page}__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
81
87
  --#{$page}__main-container--xs--AlignSelf: stretch;
82
88
  --#{$page}__main-container--xs--BorderRadius: 0;
83
89
  --#{$page}__main-container--xs--MarginInlineStart: 0;
84
90
  --#{$page}__main-container--xs--MaxHeight: 100%;
85
91
  --#{$page}__main-container--xs--MarginInlineEnd: 0;
92
+ --#{$page}__main-container--xs--BorderBlockEndWidth: 0;
93
+ --#{$page}__main-container--xs--BorderInlineStartWidth: 0px; // needs a unit because it's used in calc()
94
+ --#{$page}__main-container--xs--BorderInlineEndWidth: 0px; // needs a unit because it's used in calc()
86
95
 
87
96
  // Main section
88
97
  --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -101,28 +110,36 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
101
110
  // Sticky
102
111
  --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
103
112
  --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
113
+ --#{$page}--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
114
+ --#{$page}--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
104
115
  --#{$page}--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
105
116
  --#{$page}--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
117
+ --#{$page}--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
118
+ --#{$page}--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
106
119
 
107
120
  // Shadows
108
121
  --#{$page}--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
109
122
  --#{$page}--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
123
+ --#{$page}--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
124
+ --#{$page}--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
110
125
  --#{$page}--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
111
126
  --#{$page}--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
127
+ --#{$page}--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
128
+ --#{$page}--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
112
129
 
113
130
  // Main section horizontal subnav
114
131
  --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
115
132
  --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
116
133
  --#{$page}__main-subnav--PaddingBlockEnd: 0;
117
- --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
118
- --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth));
134
+ --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineStartWidth));
135
+ --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineEndWidth));
119
136
  --#{$page}__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
120
137
 
121
138
  // Main section breadcrumb
122
139
  --#{$page}__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
123
- --#{$page}__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
140
+ --#{$page}__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineEndWidth)); // subtract the border of the main section
124
141
  --#{$page}__main-breadcrumb--PaddingBlockEnd: 0;
125
- --#{$page}__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderWidth)); // subtract the border of the main section
142
+ --#{$page}__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main-container--BorderInlineStartWidth)); // subtract the border of the main section
126
143
  --#{$page}__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
127
144
  --#{$page}__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
128
145
 
@@ -219,6 +236,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
219
236
  overflow-y: auto;
220
237
  -webkit-overflow-scrolling: touch;
221
238
  background-color: var(--#{$page}__sidebar--BackgroundColor);
239
+ border-inline-end: var(--#{$page}__sidebar--BorderInlineEndWidth) solid var(--#{$page}__sidebar--BorderInlineEndColor);
222
240
  opacity: var(--#{$page}__sidebar--Opacity);
223
241
  transition: var(--#{$page}__sidebar--TransitionProperty) var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
224
242
 
@@ -237,7 +255,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
237
255
  box-shadow: var(--#{$page}__sidebar--BoxShadow);
238
256
 
239
257
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
240
- --#{$page}__sidebar--BoxShadow: none;
258
+ --#{$page}__sidebar--BoxShadow: var(--#{$page}__sidebar--BoxShadow);
241
259
  }
242
260
  }
243
261
 
@@ -333,11 +351,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
333
351
 
334
352
  &.pf-m-shadow-bottom {
335
353
  z-index: var(--#{$page}--section--m-shadow-bottom--ZIndex);
354
+ border-block-end: var(--#{$page}--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--#{$page}--section--m-shadow-bottom--BorderBlockEndColor);
336
355
  box-shadow: var(--#{$page}--section--m-shadow-bottom--BoxShadow);
337
356
  }
338
357
 
339
358
  &.pf-m-shadow-top {
340
359
  z-index: var(--#{$page}--section--m-shadow-top--ZIndex);
360
+ border-block-start: var(--#{$page}--section--m-shadow-top--BorderBlockStartWidth) solid var(--#{$page}--section--m-shadow-top--BorderBlockStartColor);
341
361
  box-shadow: var(--#{$page}--section--m-shadow-top--BoxShadow);
342
362
  }
343
363
 
@@ -351,6 +371,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
351
371
  position: sticky;
352
372
  inset-block-start: 0;
353
373
  z-index: var(--#{$page}--section--m-sticky-top--ZIndex);
374
+ border-block-end: var(--#{$page}--section--m-sticky-top--BorderBlockEndWidth) solid var(--#{$page}--section--m-sticky-top--BorderBlockEndColor);
354
375
  box-shadow: var(--#{$page}--section--m-sticky-top--BoxShadow);
355
376
  }
356
377
 
@@ -358,6 +379,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
358
379
  position: sticky;
359
380
  inset-block-end: 0;
360
381
  z-index: var(--#{$page}--section--m-sticky-bottom--ZIndex);
382
+ border-block-start: var(--#{$page}--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--#{$page}--section--m-sticky-bottom--BorderBlockStartColor);
361
383
  box-shadow: var(--#{$page}--section--m-sticky-bottom--BoxShadow);
362
384
  }
363
385
  }
@@ -373,7 +395,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
373
395
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
374
396
  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
375
397
  background: var(--#{$page}__main-container--BackgroundColor);
376
- border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
398
+ border: solid var(--#{$page}__main-container--BorderColor);
399
+ border-block-start-width: var(--#{$page}__main-container--BorderBlockStartWidth);
400
+ border-block-end-width: var(--#{$page}__main-container--BorderBlockEndWidth);
401
+ border-inline-start-width: var(--#{$page}__main-container--BorderInlineStartWidth);
402
+ border-inline-end-width: var(--#{$page}__main-container--BorderInlineEndWidth);
377
403
  border-radius: var(--#{$page}__main-container--BorderRadius);
378
404
 
379
405
  @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
@@ -382,6 +408,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
382
408
  --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
383
409
  --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--xs--MaxHeight);
384
410
  --#{$page}__main-container--BorderRadius: var(--#{$page}__main-container--xs--BorderRadius);
411
+ --#{$page}__main-container--BorderBlockEndWidth: var(--#{$page}__main-container--xs--BorderBlockEndWidth);
412
+ --#{$page}__main-container--BorderInlineStartWidth: var(--#{$page}__main-container--xs--BorderInlineStartWidth);
413
+ --#{$page}__main-container--BorderInlineEndWidth: var(--#{$page}__main-container--xs--BorderInlineEndWidth);
385
414
  }
386
415
  }
387
416
 
@@ -492,8 +521,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
492
521
  gap: var(--#{$page}__main-section--RowGap);
493
522
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
494
523
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
495
- padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
496
- padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
524
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderInlineStartWidth));
525
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderInlineEndWidth));
497
526
  background-color: var(--#{$page}__main-section--BackgroundColor);
498
527
 
499
528
  &.pf-m-secondary {
@@ -508,8 +537,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
508
537
  &.pf-m-padding#{$breakpoint-name} {
509
538
  padding-block-start: var(--#{$page}__main-section--PaddingBlockStart);
510
539
  padding-block-end: var(--#{$page}__main-section--PaddingBlockEnd);
511
- padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderWidth));
512
- padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderWidth));
540
+ padding-inline-start: calc(var(--#{$page}__main-section--PaddingInlineStart) - var(--#{$page}__main-container--BorderInlineStartWidth));
541
+ padding-inline-end: calc(var(--#{$page}__main-section--PaddingInlineEnd) - var(--#{$page}__main-container--BorderInlineEndWidth));
513
542
  }
514
543
 
515
544
  &.pf-m-no-padding#{$breakpoint-name} {
package/components/Popover/popover.css CHANGED
@@ -3,7 +3,7 @@
3
3
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
4
4
  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
5
5
  --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
6
- --pf-v6-c-popover--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
6
+ --pf-v6-c-popover--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
7
7
  --pf-v6-c-popover--BorderColor: var(--pf-t--global--border--color--high-contrast);
8
8
  --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
9
9
  --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
package/components/Popover/popover.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
7
7
  --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
8
8
  --#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md);
9
- --#{$popover}--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
9
+ --#{$popover}--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
10
10
  --#{$popover}--BorderColor: var(--pf-t--global--border--color--high-contrast);
11
11
  --#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium);
12
12
 
package/components/Table/table.css CHANGED
@@ -121,7 +121,7 @@
121
121
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
122
122
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
123
123
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
124
- --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
124
+ --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
125
125
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
126
126
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
127
127
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
package/components/Table/table.scss CHANGED
@@ -194,7 +194,7 @@
194
194
 
195
195
  // * Compound expandable
196
196
  --#{$table}--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
197
- --#{$table}--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
197
+ --#{$table}--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
198
198
 
199
199
  // * Table compact th
200
200
  --#{$table}--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
package/components/_index.css CHANGED
@@ -271,8 +271,8 @@
271
271
  --pf-v6-c-accordion__item--m-bordered--BorderBlockEndColor: var(--pf-t--global--border--color--default);
272
272
  --pf-v6-c-accordion__item--BorderWidth: 0;
273
273
  --pf-v6-c-accordion__item--BorderColor: var(--pf-t--global--border--color--high-contrast);
274
- --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
275
- --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
274
+ --pf-v6-c-accordion__item--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
275
+ --pf-v6-c-accordion__expandable-content--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
276
276
  --pf-v6-c-accordion__expandable-content--BorderColor: var(--pf-t--global--border--color--high-contrast);
277
277
  }
278
278
  @media screen and (prefers-reduced-motion: no-preference) {
@@ -1262,7 +1262,7 @@
1262
1262
  --pf-v6-c-banner--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
1263
1263
  --pf-v6-c-banner--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
1264
1264
  --pf-v6-c-banner--BorderColor: var(--pf-t--global--border--color--high-contrast);
1265
- --pf-v6-c-banner--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
1265
+ --pf-v6-c-banner--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
1266
1266
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
1267
1267
  --pf-v6-c-banner--link--TextDecoration: underline;
1268
1268
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
@@ -3162,7 +3162,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3162
3162
 
3163
3163
  .pf-v6-c-code-block {
3164
3164
  --pf-v6-c-code-block--BorderColor: var(--pf-t--global--border--color--high-contrast);
3165
- --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
3165
+ --pf-v6-c-code-block--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
3166
3166
  --pf-v6-c-code-block--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3167
3167
  --pf-v6-c-code-block--BorderRadius: var(--pf-t--global--border--radius--medium);
3168
3168
  --pf-v6-c-code-block__header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -5312,6 +5312,8 @@ ul) {
5312
5312
  --pf-v6-c-date-picker__input--c-form-control--Width: calc(var(--pf-v6-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-v6-c-date-picker__input--c-form-control--width-base));
5313
5313
  --pf-v6-c-date-picker__input--c-form-control--width-base: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
5314
5314
  --pf-v6-c-date-picker__input--c-form-control--width-chars: 11;
5315
+ --pf-v6-c-date-picker__calendar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
5316
+ --pf-v6-c-date-picker__calendar--BorderColor: var(--pf-t--global--border--color--high-contrast);
5315
5317
  --pf-v6-c-date-picker__calendar--BackgroundColor: var(--pf-t--global--background--color--floating--default);
5316
5318
  --pf-v6-c-date-picker__calendar--BoxShadow: var(--pf-t--global--box-shadow--md);
5317
5319
  --pf-v6-c-date-picker__calendar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -5342,6 +5344,7 @@ ul) {
5342
5344
  inset-inline-end: var(--pf-v6-c-date-picker__calendar--InsetInlineEnd);
5343
5345
  z-index: var(--pf-v6-c-date-picker__calendar--ZIndex);
5344
5346
  background-color: var(--pf-v6-c-date-picker__calendar--BackgroundColor);
5347
+ border: var(--pf-v6-c-date-picker__calendar--BorderWidth) solid var(--pf-v6-c-date-picker__calendar--BorderColor);
5345
5348
  box-shadow: var(--pf-v6-c-date-picker__calendar--BoxShadow);
5346
5349
  }
5347
5350
  .pf-v6-c-date-picker__calendar.pf-m-align-right {
@@ -5780,9 +5783,9 @@ ul) {
5780
5783
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
5781
5784
  --pf-v6-c-drawer__panel--BoxShadow: none;
5782
5785
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
5783
- --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default);
5786
+ --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--high-contrast--regular);
5784
5787
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
5785
- --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
5788
+ --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--high-contrast--regular);
5786
5789
  --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
5787
5790
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
5788
5791
  --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: 0;
@@ -9437,7 +9440,7 @@ ul.pf-v6-c-list {
9437
9440
  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
9438
9441
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
9439
9442
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
9440
- --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
9443
+ --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
9441
9444
  --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
9442
9445
  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
9443
9446
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
@@ -10217,7 +10220,7 @@ ul.pf-v6-c-list {
10217
10220
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
10218
10221
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
10219
10222
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
10220
- --pf-v6-c-menu--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
10223
+ --pf-v6-c-menu--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
10221
10224
  --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
10222
10225
  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
10223
10226
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
@@ -11355,7 +11358,7 @@ ul.pf-v6-c-list {
11355
11358
  .pf-v6-c-modal-box {
11356
11359
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
11357
11360
  --pf-v6-c-modal-box--BorderColor: var(--pf-t--global--border--color--high-contrast);
11358
- --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
11361
+ --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
11359
11362
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
11360
11363
  --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
11361
11364
  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);
@@ -12462,7 +12465,7 @@ ul.pf-v6-c-list {
12462
12465
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
12463
12466
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
12464
12467
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12465
- --pf-v6-c-page__sidebar--BoxShadow: none;
12468
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
12466
12469
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
12467
12470
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12468
12471
  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
@@ -12477,6 +12480,8 @@ ul.pf-v6-c-list {
12477
12480
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
12478
12481
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
12479
12482
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
12483
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12484
+ --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
12480
12485
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
12481
12486
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
12482
12487
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -12501,13 +12506,19 @@ ul.pf-v6-c-list {
12501
12506
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
12502
12507
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
12503
12508
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
12504
- --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--border--width--main--default);
12509
+ --pf-v6-c-page__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default);
12510
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default);
12511
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
12512
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
12505
12513
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
12506
12514
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
12507
12515
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
12508
12516
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
12509
12517
  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
12510
12518
  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
12519
+ --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
12520
+ --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
12521
+ --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
12511
12522
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
12512
12523
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12513
12524
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12520,22 +12531,30 @@ ul.pf-v6-c-list {
12520
12531
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
12521
12532
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
12522
12533
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
12534
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12535
+ --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
12523
12536
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
12524
12537
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
12538
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12539
+ --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12525
12540
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
12526
12541
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
12542
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
12543
+ --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
12527
12544
  --pf-v6-c-page--section--m-shadow-top--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
12528
12545
  --pf-v6-c-page--section--m-shadow-top--ZIndex: var(--pf-t--global--z-index--xs);
12546
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12547
+ --pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
12529
12548
  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12530
12549
  --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
12531
12550
  --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
12532
- --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12533
- --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12551
+ --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
12552
+ --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
12534
12553
  --pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12535
12554
  --pf-v6-c-page__main-breadcrumb--PaddingBlockStart: var(--pf-t--global--spacer--md);
12536
- --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12555
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
12537
12556
  --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: 0;
12538
- --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderWidth));
12557
+ --pf-v6-c-page__main-breadcrumb--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
12539
12558
  --pf-v6-c-page__main-breadcrumb--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12540
12559
  --pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd: var(--pf-t--global--spacer--md);
12541
12560
  --pf-v6-c-page__main-tabs--PaddingBlockStart: 0;
@@ -12558,6 +12577,7 @@ ul.pf-v6-c-list {
12558
12577
  .pf-v6-c-page {
12559
12578
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
12560
12579
  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
12580
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
12561
12581
  }
12562
12582
  }
12563
12583
 
@@ -12651,6 +12671,7 @@ ul.pf-v6-c-list {
12651
12671
  overflow-y: auto;
12652
12672
  -webkit-overflow-scrolling: touch;
12653
12673
  background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
12674
+ border-inline-end: var(--pf-v6-c-page__sidebar--BorderInlineEndWidth) solid var(--pf-v6-c-page__sidebar--BorderInlineEndColor);
12654
12675
  opacity: var(--pf-v6-c-page__sidebar--Opacity);
12655
12676
  transition: var(--pf-v6-c-page__sidebar--TransitionProperty) var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
12656
12677
  transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
@@ -12666,7 +12687,7 @@ ul.pf-v6-c-list {
12666
12687
  }
12667
12688
  @media screen and (min-width: 75rem) {
12668
12689
  .pf-v6-c-page__sidebar.pf-m-expanded {
12669
- --pf-v6-c-page__sidebar--BoxShadow: none;
12690
+ --pf-v6-c-page__sidebar--BoxShadow: var(--pf-v6-c-page__sidebar--BoxShadow);
12670
12691
  }
12671
12692
  }
12672
12693
  .pf-v6-c-page__sidebar.pf-m-collapsed {
@@ -12763,6 +12784,7 @@ ul.pf-v6-c-list {
12763
12784
  .pf-v6-c-page__main-group.pf-m-shadow-bottom,
12764
12785
  .pf-v6-c-page__main-subnav.pf-m-shadow-bottom {
12765
12786
  z-index: var(--pf-v6-c-page--section--m-shadow-bottom--ZIndex);
12787
+ border-block-end: var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndColor);
12766
12788
  box-shadow: var(--pf-v6-c-page--section--m-shadow-bottom--BoxShadow);
12767
12789
  }
12768
12790
  .pf-v6-c-page__main-breadcrumb.pf-m-shadow-top,
@@ -12772,6 +12794,7 @@ ul.pf-v6-c-list {
12772
12794
  .pf-v6-c-page__main-group.pf-m-shadow-top,
12773
12795
  .pf-v6-c-page__main-subnav.pf-m-shadow-top {
12774
12796
  z-index: var(--pf-v6-c-page--section--m-shadow-top--ZIndex);
12797
+ border-block-start: var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-shadow-top--BorderBlockStartColor);
12775
12798
  box-shadow: var(--pf-v6-c-page--section--m-shadow-top--BoxShadow);
12776
12799
  }
12777
12800
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top,
@@ -12783,6 +12806,7 @@ ul.pf-v6-c-list {
12783
12806
  position: sticky;
12784
12807
  inset-block-start: 0;
12785
12808
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12809
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12786
12810
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12787
12811
  }
12788
12812
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom,
@@ -12794,6 +12818,7 @@ ul.pf-v6-c-list {
12794
12818
  position: sticky;
12795
12819
  inset-block-end: 0;
12796
12820
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12821
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12797
12822
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12798
12823
  }
12799
12824
  @media (min-height: 0) {
@@ -12806,6 +12831,7 @@ ul.pf-v6-c-list {
12806
12831
  position: sticky;
12807
12832
  inset-block-start: 0;
12808
12833
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12834
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12809
12835
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12810
12836
  }
12811
12837
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-sm-height,
@@ -12817,6 +12843,7 @@ ul.pf-v6-c-list {
12817
12843
  position: sticky;
12818
12844
  inset-block-end: 0;
12819
12845
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12846
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12820
12847
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12821
12848
  }
12822
12849
  }
@@ -12830,6 +12857,7 @@ ul.pf-v6-c-list {
12830
12857
  position: sticky;
12831
12858
  inset-block-start: 0;
12832
12859
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12860
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12833
12861
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12834
12862
  }
12835
12863
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-md-height,
@@ -12841,6 +12869,7 @@ ul.pf-v6-c-list {
12841
12869
  position: sticky;
12842
12870
  inset-block-end: 0;
12843
12871
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12872
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12844
12873
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12845
12874
  }
12846
12875
  }
@@ -12854,6 +12883,7 @@ ul.pf-v6-c-list {
12854
12883
  position: sticky;
12855
12884
  inset-block-start: 0;
12856
12885
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12886
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12857
12887
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12858
12888
  }
12859
12889
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-lg-height,
@@ -12865,6 +12895,7 @@ ul.pf-v6-c-list {
12865
12895
  position: sticky;
12866
12896
  inset-block-end: 0;
12867
12897
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12898
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12868
12899
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12869
12900
  }
12870
12901
  }
@@ -12878,6 +12909,7 @@ ul.pf-v6-c-list {
12878
12909
  position: sticky;
12879
12910
  inset-block-start: 0;
12880
12911
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12912
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12881
12913
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12882
12914
  }
12883
12915
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-xl-height,
@@ -12889,6 +12921,7 @@ ul.pf-v6-c-list {
12889
12921
  position: sticky;
12890
12922
  inset-block-end: 0;
12891
12923
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12924
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12892
12925
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12893
12926
  }
12894
12927
  }
@@ -12902,6 +12935,7 @@ ul.pf-v6-c-list {
12902
12935
  position: sticky;
12903
12936
  inset-block-start: 0;
12904
12937
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
12938
+ border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
12905
12939
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
12906
12940
  }
12907
12941
  .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-on-2xl-height,
@@ -12913,6 +12947,7 @@ ul.pf-v6-c-list {
12913
12947
  position: sticky;
12914
12948
  inset-block-end: 0;
12915
12949
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
12950
+ border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
12916
12951
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
12917
12952
  }
12918
12953
  }
@@ -12925,7 +12960,11 @@ ul.pf-v6-c-list {
12925
12960
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
12926
12961
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
12927
12962
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
12928
- border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
12963
+ border: solid var(--pf-v6-c-page__main-container--BorderColor);
12964
+ border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
12965
+ border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
12966
+ border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
12967
+ border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
12929
12968
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
12930
12969
  }
12931
12970
  @media screen and (max-width: calc(48rem - 1px)) {
@@ -12935,6 +12974,9 @@ ul.pf-v6-c-list {
12935
12974
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
12936
12975
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
12937
12976
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
12977
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
12978
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
12979
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
12938
12980
  }
12939
12981
  }
12940
12982
 
@@ -13055,8 +13097,8 @@ ul.pf-v6-c-list {
13055
13097
  gap: var(--pf-v6-c-page__main-section--RowGap);
13056
13098
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13057
13099
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13058
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13059
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13100
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13101
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13060
13102
  background-color: var(--pf-v6-c-page__main-section--BackgroundColor);
13061
13103
  }
13062
13104
  .pf-v6-c-page__main-section.pf-m-secondary {
@@ -13065,8 +13107,8 @@ ul.pf-v6-c-list {
13065
13107
  .pf-v6-c-page__main-section.pf-m-padding {
13066
13108
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13067
13109
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13068
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13069
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13110
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13111
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13070
13112
  }
13071
13113
  .pf-v6-c-page__main-section.pf-m-no-padding {
13072
13114
  padding: 0;
@@ -13075,8 +13117,8 @@ ul.pf-v6-c-list {
13075
13117
  .pf-v6-c-page__main-section.pf-m-padding-on-sm {
13076
13118
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13077
13119
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13078
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13079
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13120
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13121
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13080
13122
  }
13081
13123
  .pf-v6-c-page__main-section.pf-m-no-padding-on-sm {
13082
13124
  padding: 0;
@@ -13086,8 +13128,8 @@ ul.pf-v6-c-list {
13086
13128
  .pf-v6-c-page__main-section.pf-m-padding-on-md {
13087
13129
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13088
13130
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13089
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13090
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13131
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13132
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13091
13133
  }
13092
13134
  .pf-v6-c-page__main-section.pf-m-no-padding-on-md {
13093
13135
  padding: 0;
@@ -13097,8 +13139,8 @@ ul.pf-v6-c-list {
13097
13139
  .pf-v6-c-page__main-section.pf-m-padding-on-lg {
13098
13140
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13099
13141
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13100
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13101
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13142
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13143
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13102
13144
  }
13103
13145
  .pf-v6-c-page__main-section.pf-m-no-padding-on-lg {
13104
13146
  padding: 0;
@@ -13108,8 +13150,8 @@ ul.pf-v6-c-list {
13108
13150
  .pf-v6-c-page__main-section.pf-m-padding-on-xl {
13109
13151
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13110
13152
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13111
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13112
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13153
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13154
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13113
13155
  }
13114
13156
  .pf-v6-c-page__main-section.pf-m-no-padding-on-xl {
13115
13157
  padding: 0;
@@ -13119,8 +13161,8 @@ ul.pf-v6-c-list {
13119
13161
  .pf-v6-c-page__main-section.pf-m-padding-on-2xl {
13120
13162
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
13121
13163
  padding-block-end: var(--pf-v6-c-page__main-section--PaddingBlockEnd);
13122
- padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderWidth));
13123
- padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderWidth));
13164
+ padding-inline-start: calc(var(--pf-v6-c-page__main-section--PaddingInlineStart) - var(--pf-v6-c-page__main-container--BorderInlineStartWidth));
13165
+ padding-inline-end: calc(var(--pf-v6-c-page__main-section--PaddingInlineEnd) - var(--pf-v6-c-page__main-container--BorderInlineEndWidth));
13124
13166
  }
13125
13167
  .pf-v6-c-page__main-section.pf-m-no-padding-on-2xl {
13126
13168
  padding: 0;
@@ -13621,7 +13663,7 @@ ul.pf-v6-c-list {
13621
13663
  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
13622
13664
  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
13623
13665
  --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
13624
- --pf-v6-c-popover--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
13666
+ --pf-v6-c-popover--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
13625
13667
  --pf-v6-c-popover--BorderColor: var(--pf-t--global--border--color--high-contrast);
13626
13668
  --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
13627
13669
  --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
@@ -17576,7 +17618,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17576
17618
  --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
17577
17619
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
17578
17620
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
17579
- --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--high-contrast--border--width--regular);
17621
+ --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
17580
17622
  --pf-v6-c-table--m-compact__th--PaddingBlockStart: calc(var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--xs));
17581
17623
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17582
17624
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);