@patternfly/react-styles 6.3.0-prerelease.9 → 6.3.1-prerelease.0

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 (39) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/css/components/Accordion/accordion.css +40 -15
  3. package/css/components/Alert/alert-group.css +15 -2
  4. package/css/components/Badge/badge.css +2 -0
  5. package/css/components/Banner/banner.css +4 -0
  6. package/css/components/Button/button.css +35 -5
  7. package/css/components/Card/card.css +5 -4
  8. package/css/components/CodeBlock/code-block.css +3 -0
  9. package/css/components/CodeEditor/code-editor.css +8 -3
  10. package/css/components/Drawer/drawer.css +44 -41
  11. package/css/components/DualListSelector/dual-list-selector.css +19 -1
  12. package/css/components/Label/label.css +20 -11
  13. package/css/components/Login/login.css +3 -0
  14. package/css/components/Menu/menu.css +11 -0
  15. package/css/components/MenuToggle/menu-toggle.css +12 -5
  16. package/css/components/ModalBox/modal-box.css +3 -0
  17. package/css/components/Nav/nav.css +17 -0
  18. package/css/components/Page/page.css +62 -23
  19. package/css/components/Panel/panel.css +7 -1
  20. package/css/components/Popover/popover.css +4 -0
  21. package/css/components/Progress/progress.css +10 -0
  22. package/css/components/SimpleList/simple-list.css +15 -0
  23. package/css/components/Table/table-grid.css +30 -0
  24. package/css/components/Table/table-grid.d.ts +2 -1
  25. package/css/components/Table/table-grid.js +2 -1
  26. package/css/components/Table/table-grid.mjs +2 -1
  27. package/css/components/Table/table.css +59 -15
  28. package/css/components/Tabs/tabs.css +7 -0
  29. package/css/components/TextInputGroup/text-input-group.css +7 -0
  30. package/css/components/TreeView/tree-view.css +15 -0
  31. package/css/components/Wizard/wizard.css +33 -6
  32. package/css/components/Wizard/wizard.d.ts +1 -1
  33. package/css/components/Wizard/wizard.js +1 -1
  34. package/css/components/Wizard/wizard.mjs +1 -1
  35. package/css/components/_index.css +490 -132
  36. package/css/components/_index.d.ts +0 -1
  37. package/css/components/_index.js +0 -1
  38. package/css/components/_index.mjs +0 -1
  39. package/package.json +3 -3
@@ -9,6 +9,11 @@
9
9
  --pf-v6-c-drawer__panel--MinWidth: 50%;
10
10
  --pf-v6-c-drawer__panel--MaxHeight: auto;
11
11
  --pf-v6-c-drawer__panel--ZIndex: var(--pf-t--global--z-index--sm);
12
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--after--BackgroundColor);
13
+ --pf-v6-c-drawer__panel--BorderBlockStartWidth: 0;
14
+ --pf-v6-c-drawer__panel--BorderBlockEndWidth: 0;
15
+ --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
16
+ --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
12
17
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13
18
  --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14
19
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -105,13 +110,14 @@
105
110
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
106
111
  --pf-v6-c-drawer__panel--BoxShadow: none;
107
112
  --pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
108
- --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--border--width--divider--default);
109
- --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
110
- --pf-v6-c-drawer__panel--after--BackgroundColor: transparent;
113
+ --pf-v6-c-drawer__panel--after--Width: var(--pf-t--global--high-contrast--border--width--divider--default);
114
+ --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-t--global--border--width--divider--default);
115
+ --pf-v6-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-t--global--high-contrast--border--width--divider--default);
116
+ --pf-v6-c-drawer__panel--after--BackgroundColor: var(--pf-t--global--border--color--high-contrast);
111
117
  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
112
- --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: var(--pf-v6-c-drawer__panel--after--Width);
113
- --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
114
- --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
118
+ --pf-v6-c-drawer--m-inline__panel--PaddingInlineStart: 0;
119
+ --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
120
+ --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
115
121
  }
116
122
  @media screen and (prefers-reduced-motion: no-preference) {
117
123
  .pf-v6-c-drawer {
@@ -152,6 +158,7 @@
152
158
 
153
159
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
154
160
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
161
+ --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
155
162
  }
156
163
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
157
164
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -252,6 +259,11 @@
252
259
  overflow: auto;
253
260
  visibility: hidden;
254
261
  background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
262
+ border: solid var(--pf-v6-c-drawer__panel--BorderColor);
263
+ border-block-start-width: var(--pf-v6-c-drawer__panel--BorderBlockStartWidth);
264
+ border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
265
+ border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
266
+ border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
255
267
  box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
256
268
  opacity: var(--pf-v6-c-drawer__panel--Opacity);
257
269
  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -260,15 +272,6 @@
260
272
  transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
261
273
  -webkit-overflow-scrolling: touch;
262
274
  }
263
- .pf-v6-c-drawer__panel::after {
264
- position: absolute;
265
- inset-block-start: 0;
266
- inset-inline-start: 0;
267
- width: var(--pf-v6-c-drawer__panel--after--Width);
268
- height: 100%;
269
- content: "";
270
- background-color: var(--pf-v6-c-drawer__panel--after--BackgroundColor);
271
- }
272
275
  .pf-v6-c-drawer__panel:not(.pf-m-resizable) {
273
276
  padding-block-start: var(--pf-v6-c-drawer__panel--PaddingBlockStart);
274
277
  padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
@@ -423,13 +426,13 @@
423
426
  }
424
427
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
425
428
  --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer__panel--m-resizable--md--FlexBasis--min);
429
+ --pf-v6-c-drawer__panel--BorderBlockStartWidth: 0;
430
+ --pf-v6-c-drawer__panel--BorderBlockEndWidth: 0;
431
+ --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
432
+ --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
426
433
  flex-direction: var(--pf-v6-c-drawer__panel--m-resizable--FlexDirection);
427
434
  min-width: var(--pf-v6-c-drawer__panel--m-resizable--MinWidth);
428
435
  }
429
- .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable::after {
430
- width: 0;
431
- height: 0;
432
- }
433
436
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
434
437
  flex-shrink: 0;
435
438
  }
@@ -438,18 +441,17 @@
438
441
  }
439
442
  .pf-v6-c-drawer.pf-m-panel-left {
440
443
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow);
444
+ --pf-v6-c-drawer__panel--BorderInlineEndWidth: var(--pf-v6-c-drawer__panel--after--Width);
445
+ --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
441
446
  }
442
447
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-left.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
448
+ --pf-v6-c-drawer__panel--BorderInlineEndWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
443
449
  padding-inline-start: 0;
444
450
  padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
445
451
  }
446
452
  .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
447
453
  transform: translateX(0);
448
454
  }
449
- .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
450
- inset-inline-start: auto;
451
- inset-inline-end: 0;
452
- }
453
455
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
454
456
  --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
455
457
  order: 1;
@@ -458,19 +460,16 @@
458
460
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v6-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow);
459
461
  --pf-v6-c-drawer__panel--MaxHeight: 100%;
460
462
  --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
463
+ --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
464
+ --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
461
465
  min-width: auto;
462
466
  min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
463
467
  }
464
468
  .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-panel-bottom.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
469
+ --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
465
470
  padding-block-start: var(--pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart);
466
471
  padding-inline-start: 0;
467
472
  }
468
- .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel::after {
469
- inset-block-start: 0;
470
- inset-inline-start: auto;
471
- width: 100%;
472
- height: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
473
- }
474
473
  .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {
475
474
  --pf-v6-c-drawer__panel--md--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min);
476
475
  --pf-v6-c-drawer__panel--m-resizable--FlexDirection: var(--pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection);
@@ -499,6 +498,10 @@
499
498
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border,
500
499
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-no-border {
501
500
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
501
+ --pf-v6-c-drawer__panel--BorderBlockStartWidth: 0;
502
+ --pf-v6-c-drawer__panel--BorderBlockEndWidth: 0;
503
+ --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
504
+ --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
502
505
  }
503
506
  .pf-v6-c-drawer__splitter {
504
507
  display: block;
@@ -593,9 +596,9 @@
593
596
  .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
594
597
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
595
598
  }
596
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
597
- .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
598
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
599
+ .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border),
600
+ .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border) {
601
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
599
602
  }
600
603
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
601
604
  overflow-x: auto;
@@ -660,9 +663,9 @@
660
663
  .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
661
664
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
662
665
  }
663
- .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
664
- .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
665
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
666
+ .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border),
667
+ .pf-v6-c-drawer.pf-m-static-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border) {
668
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
666
669
  }
667
670
  .pf-v6-c-drawer.pf-m-inline-on-lg > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
668
671
  overflow-x: auto;
@@ -727,9 +730,9 @@
727
730
  .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
728
731
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
729
732
  }
730
- .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
731
- .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
732
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
733
+ .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border),
734
+ .pf-v6-c-drawer.pf-m-static-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border) {
735
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
733
736
  }
734
737
  .pf-v6-c-drawer.pf-m-inline-on-xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
735
738
  overflow-x: auto;
@@ -794,9 +797,9 @@
794
797
  .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
795
798
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: none;
796
799
  }
797
- .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after,
798
- .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border)::after {
799
- background-color: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
800
+ .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border),
801
+ .pf-v6-c-drawer.pf-m-static-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border) {
802
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
800
803
  }
801
804
  .pf-v6-c-drawer.pf-m-inline-on-2xl > .pf-v6-c-drawer__main > .pf-v6-c-drawer__content {
802
805
  overflow-x: auto;
@@ -34,8 +34,12 @@
34
34
  --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
35
35
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
36
36
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
37
+ --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
38
+ --pf-v6-c-dual-list-selector__list-item-row--BorderColor: var(--pf-t--global--border--color--high-contrast);
37
39
  --pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
40
+ --pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
38
41
  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
42
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
39
43
  --pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
40
44
  --pf-v6-c-dual-list-selector__list-item--m-ghost-row--Opacity: .4;
41
45
  --pf-v6-c-dual-list-selector__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -141,6 +145,7 @@
141
145
  overflow: auto;
142
146
  border: var(--pf-v6-c-dual-list-selector__menu--BorderWidth) solid var(--pf-v6-c-dual-list-selector__menu--BorderColor);
143
147
  border-radius: var(--pf-v6-c-dual-list-selector__menu--BorderRadius);
148
+ outline-offset: 2px;
144
149
  }
145
150
 
146
151
  .pf-v6-c-dual-list-selector__list {
@@ -165,7 +170,7 @@
165
170
  overflow-anchor: none;
166
171
  }
167
172
 
168
- .pf-v6-c-dual-list-selector__list-item:focus {
173
+ .pf-v6-c-dual-list-selector__list-item:focus-visible {
169
174
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
170
175
  }
171
176
  .pf-v6-c-dual-list-selector__list-item.pf-m-expandable {
@@ -199,12 +204,22 @@
199
204
  }
200
205
 
201
206
  .pf-v6-c-dual-list-selector__list-item-row {
207
+ position: relative;
202
208
  display: flex;
203
209
  font-size: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
204
210
  background-color: var(--pf-v6-c-dual-list-selector__list-item-row--BackgroundColor);
205
211
  }
212
+ .pf-v6-c-dual-list-selector__list-item-row::before {
213
+ position: absolute;
214
+ inset: 0;
215
+ pointer-events: none;
216
+ content: "";
217
+ border-block-start: var(--pf-v6-c-dual-list-selector__list-item-row--BorderWidth) solid var(--pf-v6-c-dual-list-selector__list-item-row--BorderColor);
218
+ border-block-end: var(--pf-v6-c-dual-list-selector__list-item-row--BorderWidth) solid var(--pf-v6-c-dual-list-selector__list-item-row--BorderColor);
219
+ }
206
220
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-selected {
207
221
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor);
222
+ --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderWidth);
208
223
  }
209
224
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-selected .pf-v6-c-dual-list-selector__item-text {
210
225
  --pf-v6-c-dual-list-selector__item-text--Color: var(--pf-v6-c-dual-list-selector__list-item-row--m-selected__text--Color);
@@ -212,9 +227,12 @@
212
227
  }
213
228
  .pf-v6-c-dual-list-selector__list-item-row:hover {
214
229
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
230
+ --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BorderWidth);
215
231
  }
216
232
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-check {
217
233
  --pf-v6-c-dual-list-selector__list-item-row--m-selected--BackgroundColor: transparent;
234
+ --pf-v6-c-dual-list-selector__list-item-row--m-selected--BorderColor: transparent;
235
+ --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: revert;
218
236
  }
219
237
  .pf-v6-c-dual-list-selector__list-item-row.pf-m-ghost-row {
220
238
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item--m-ghost-row--BackgroundColor);
@@ -5,10 +5,11 @@
5
5
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6
6
  --pf-v6-c-label--MaxWidth: 100%;
7
7
  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
8
- --pf-v6-c-label--BorderWidth: 0;
9
- --pf-v6-c-label--BorderColor: transparent;
8
+ --pf-v6-c-label--BorderWidth: var(--pf-t--global--border--width--regular);
9
+ --pf-v6-c-label--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
10
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
11
11
  --pf-v6-c-label--FontSize: var(--pf-t--global--font--size--body--sm);
12
+ --pf-v6-c-label--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
12
13
  --pf-v6-c-label--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
13
14
  --pf-v6-c-label--Color: var(--pf-t--global--text--color--nonstatus--on-gray--default);
14
15
  --pf-v6-c-label__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
@@ -131,8 +132,8 @@
131
132
  --pf-v6-c-label--m-custom--m-outline--BorderColor: var(--pf-t--global--border--color--status--custom--default);
132
133
  --pf-v6-c-label--m-custom--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--status--custom--hover);
133
134
  --pf-v6-c-label--m-custom--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--status--custom--hover);
134
- --pf-v6-c-label--m-clickable--hover--BorderWidth: 0;
135
- --pf-v6-c-label--m-clickable--hover--BorderColor: transparent;
135
+ --pf-v6-c-label--m-clickable--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
136
+ --pf-v6-c-label--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
136
137
  --pf-v6-c-label--m-clickable__content--Cursor: pointer;
137
138
  --pf-v6-c-label--m-filled__actions--c-button__icon--Color: var(--pf-v6-c-label__icon--Color);
138
139
  --pf-v6-c-label--m-outline--BorderWidth: var(--pf-t--global--border--width--action--default);
@@ -145,8 +146,10 @@
145
146
  --pf-v6-c-label--m-outline--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--regular);
146
147
  --pf-v6-c-label--m-overflow--Color: var(--pf-t--global--text--color--brand--default);
147
148
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
149
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-t--global--border--width--action--default);
148
150
  --pf-v6-c-label--m-overflow--hover--Color: var(--pf-t--global--text--color--brand--hover);
149
151
  --pf-v6-c-label--m-overflow--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
152
+ --pf-v6-c-label--m-overflow--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
150
153
  --pf-v6-c-label--m-add--Color: var(--pf-t--global--text--color--brand--default);
151
154
  --pf-v6-c-label--m-add--BackgroundColor: transparent;
152
155
  --pf-v6-c-label--m-add--BorderColor: var(--pf-t--global--border--color--default);
@@ -167,15 +170,15 @@
167
170
  --pf-v6-c-label__content--Cursor: initial;
168
171
  --pf-v6-c-label__icon--FontSize: var(--pf-t--global--icon--size--font--body--sm);
169
172
  --pf-v6-c-label__text--MaxWidth: 100%;
170
- --pf-v6-c-label__actions--MarginInlineEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingInlineEnd) * -1);
173
+ --pf-v6-c-label__actions--MarginInlineEnd: 0;
171
174
  --pf-v6-c-label__actions--c-button--FontSize: var(--pf-t--global--icon--size--font--body--sm);
172
175
  --pf-v6-c-label__actions--c-button--OutlineOffset: -0.1875rem;
173
- --pf-v6-c-label__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockStart) * -1);
174
- --pf-v6-c-label__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-label__actions--c-button--PaddingBlockEnd) * -1);
175
- --pf-v6-c-label__actions--c-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
176
- --pf-v6-c-label__actions--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
177
- --pf-v6-c-label__actions--c-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
178
- --pf-v6-c-label__actions--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
176
+ --pf-v6-c-label__actions--c-button--MarginBlockStart: 0;
177
+ --pf-v6-c-label__actions--c-button--MarginBlockEnd: 0;
178
+ --pf-v6-c-label__actions--c-button--PaddingBlockStart: 0;
179
+ --pf-v6-c-label__actions--c-button--PaddingInlineEnd: 0;
180
+ --pf-v6-c-label__actions--c-button--PaddingBlockEnd: 0;
181
+ --pf-v6-c-label__actions--c-button--PaddingInlineStart: 0;
179
182
  --pf-v6-c-label--m-editable--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--default);
180
183
  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-t--global--text-decoration--editable-text--style--default);
181
184
  --pf-v6-c-label--m-editable--hover--TextDecorationLine: var(--pf-t--global--text-decoration--editable-text--line--hover);
@@ -195,6 +198,7 @@
195
198
 
196
199
  .pf-v6-c-label {
197
200
  position: relative;
201
+ gap: var(--pf-v6-c-label--Gap);
198
202
  min-width: var(--pf-v6-c-label--MinWidth);
199
203
  max-width: var(--pf-v6-c-label--MaxWidth);
200
204
  padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
@@ -394,10 +398,12 @@
394
398
  .pf-v6-c-label.pf-m-overflow {
395
399
  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-overflow--Color);
396
400
  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-overflow--BackgroundColor);
401
+ --pf-v6-c-label--BorderWidth: var(--pf-v6-c-label--m-overflow--BorderWidth);
397
402
  }
398
403
  .pf-v6-c-label.pf-m-overflow:is(:hover, :focus) {
399
404
  --pf-v6-c-label--m-overflow--Color: var(--pf-v6-c-label--m-overflow--hover--Color);
400
405
  --pf-v6-c-label--m-overflow--BackgroundColor: var(--pf-v6-c-label--m-overflow--hover--BackgroundColor);
406
+ --pf-v6-c-label--m-overflow--BorderWidth: var(--pf-v6-c-label--m-overflow--hover--BorderWidth);
401
407
  }
402
408
  .pf-v6-c-label.pf-m-add {
403
409
  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-add--Color);
@@ -496,4 +502,7 @@ input.pf-v6-c-label__content {
496
502
  margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
497
503
  margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
498
504
  outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
505
+ }
506
+ .pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
507
+ --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
499
508
  }
@@ -17,6 +17,8 @@
17
17
  --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18
18
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
19
19
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
20
+ --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
21
+ --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
20
22
  --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
21
23
  --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
22
24
  --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -148,6 +150,7 @@
148
150
  align-self: start;
149
151
  margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
150
152
  background-color: var(--pf-v6-c-login__main--BackgroundColor);
153
+ border: var(--pf-v6-c-login__main--BorderWidth) solid var(--pf-v6-c-login__main--BorderColor);
151
154
  border-radius: var(--pf-v6-c-login__main--BorderRadius);
152
155
  }
153
156
  .pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
@@ -7,6 +7,8 @@
7
7
  --pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
8
8
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--md);
9
9
  --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
10
+ --pf-v6-c-menu--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
11
+ --pf-v6-c-menu--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
12
  --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
11
13
  --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
12
14
  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
@@ -27,6 +29,9 @@
27
29
  --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
28
30
  --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
29
31
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
32
+ --pf-v6-c-menu__list-item--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
33
+ --pf-v6-c-menu__list-item--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
34
+ --pf-v6-c-menu__list-item--BorderColor: var(--pf-t--global--border--color--high-contrast);
30
35
  --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
31
36
  --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
32
37
  --pf-v6-c-menu__list-item--TransitionProperty: background-color;
@@ -202,6 +207,7 @@
202
207
  --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
203
208
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
204
209
  --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
210
+ --pf-v6-c-menu__list-item--hover--BorderColor: transparent;
205
211
  }
206
212
  .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
207
213
  .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) {
@@ -226,6 +232,7 @@
226
232
  overflow: hidden;
227
233
  color: var(--pf-v6-c-menu--Color);
228
234
  background-color: var(--pf-v6-c-menu--BackgroundColor);
235
+ border: var(--pf-v6-c-menu--BorderWidth) solid var(--pf-v6-c-menu--BorderColor);
229
236
  border-radius: var(--pf-v6-c-menu--BorderRadius);
230
237
  box-shadow: var(--pf-v6-c-menu--BoxShadow);
231
238
  transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
@@ -270,6 +277,7 @@
270
277
  }
271
278
  .pf-v6-c-menu.pf-m-drilldown :where(.pf-v6-c-menu) {
272
279
  padding: 0;
280
+ border: 0;
273
281
  }
274
282
  .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__content > .pf-v6-c-menu__list,
275
283
  .pf-v6-c-menu.pf-m-drilldown.pf-m-drilled-in > .pf-v6-c-menu__list {
@@ -412,6 +420,8 @@
412
420
  inset: 0;
413
421
  content: "";
414
422
  background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
423
+ border-block-start: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
424
+ border-block-end: var(--pf-v6-c-menu__list-item--BorderWidth) solid var(--pf-v6-c-menu__list-item--BorderColor);
415
425
  transition: inherit;
416
426
  }
417
427
  .pf-v6-c-menu__list-item.pf-m-load {
@@ -436,6 +446,7 @@
436
446
  }
437
447
  .pf-v6-c-menu__list-item.pf-m-focus, .pf-v6-c-menu__list-item:focus-within, .pf-v6-c-menu__list-item:has(> :hover) {
438
448
  --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-v6-c-menu__list-item--hover--BackgroundColor);
449
+ --pf-v6-c-menu__list-item--BorderWidth: var(--pf-v6-c-menu__list-item--hover--BorderWidth);
439
450
  }
440
451
  .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-select-icon,
441
452
  .pf-v6-c-menu__list-item.pf-m-focus .pf-v6-c-menu__item-external-icon, .pf-v6-c-menu__list-item:focus-within .pf-v6-c-menu__item-select-icon,
@@ -11,19 +11,19 @@
11
11
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
12
12
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
13
13
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
14
- --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--action--default);
14
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
15
15
  --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
16
16
  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17
17
  --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
18
18
  --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
19
19
  --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
20
20
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
21
- --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
21
+ --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
22
22
  --pf-v6-c-menu-toggle--hover--BorderColor: var(--pf-t--global--border--color--hover);
23
23
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
24
24
  --pf-v6-c-menu-toggle--expanded--Color: var(--pf-t--global--text--color--regular);
25
25
  --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
26
- --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
26
+ --pf-v6-c-menu-toggle--expanded--BorderWidth: var(--pf-t--global--border--width--control--clicked);
27
27
  --pf-v6-c-menu-toggle--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
28
28
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
29
29
  --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -110,7 +110,10 @@
110
110
  --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
111
111
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
112
112
  --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
113
- --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
113
+ --pf-v6-c-menu-toggle--m-plain--BorderColor: var(--pf-t--global--border--color--high-contrast);
114
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
115
+ --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
116
+ --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
114
117
  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
115
118
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
116
119
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
@@ -236,6 +239,7 @@
236
239
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-plain--Color);
237
240
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
238
241
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
242
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
239
243
  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-plain--BorderRadius);
240
244
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--BackgroundColor);
241
245
  --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
@@ -248,12 +252,14 @@
248
252
  --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
249
253
  }
250
254
  .pf-v6-c-menu-toggle.pf-m-plain::before {
251
- border: none;
255
+ --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--BorderWidth);
256
+ --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-plain--BorderColor);
252
257
  }
253
258
  .pf-v6-c-menu-toggle:is(:hover, :focus) {
254
259
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--hover--Color);
255
260
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--hover--BackgroundColor);
256
261
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
262
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--hover--BorderWidth);
257
263
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
258
264
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
259
265
  --pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
@@ -265,6 +271,7 @@
265
271
  --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
266
272
  --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--expanded--BackgroundColor);
267
273
  --pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--expanded--BorderWidth);
274
+ --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth);
268
275
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--expanded--BorderColor);
269
276
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--expanded__toggle-icon--Color);
270
277
  }
@@ -1,5 +1,7 @@
1
1
  .pf-v6-c-modal-box {
2
2
  --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
3
+ --pf-v6-c-modal-box--BorderColor: var(--pf-t--global--border--color--high-contrast);
4
+ --pf-v6-c-modal-box--BorderWidth: var(--pf-t--global--high-contrast--border--width--box--default);
3
5
  --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
4
6
  --pf-v6-c-modal-box--BoxShadow: var(--pf-t--global--box-shadow--lg);
5
7
  --pf-v6-c-modal-box--ZIndex: var(--pf-t--global--z-index--xl);
@@ -66,6 +68,7 @@
66
68
  max-height: var(--pf-v6-c-modal-box--MaxHeight);
67
69
  overflow: auto;
68
70
  background-color: var(--pf-v6-c-modal-box--BackgroundColor);
71
+ border: var(--pf-v6-c-modal-box--BorderWidth) solid var(--pf-v6-c-modal-box--BorderColor);
69
72
  border-radius: var(--pf-v6-c-modal-box--BorderRadius);
70
73
  box-shadow: var(--pf-v6-c-modal-box--BoxShadow);
71
74
  }
@@ -42,6 +42,10 @@
42
42
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
43
43
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
44
44
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
45
+ --pf-v6-c-nav__link--BorderColor: var(--pf-t--global--border--color--high-contrast);
46
+ --pf-v6-c-nav__link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
47
+ --pf-v6-c-nav__link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
48
+ --pf-v6-c-nav__link--m-current--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
45
49
  --pf-v6-c-nav__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--default);
46
50
  --pf-v6-c-nav__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
47
51
  --pf-v6-c-nav__link--m-current--TransitionDuration--color: var(--pf-t--global--motion--duration--fade--short);
@@ -76,6 +80,8 @@
76
80
  --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap);
77
81
  --pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
78
82
  --pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--pill);
83
+ --pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
84
+ --pf-v6-c-nav--m-horizontal--m-subnav--BorderColor: var(--pf-t--global--border--color--high-contrast);
79
85
  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--xs);
80
86
  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
81
87
  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -235,12 +241,22 @@
235
241
  transition-duration: var(--pf-v6-c-nav__link--TransitionDuration--background-color), var(--pf-v6-c-nav__link--m-current--TransitionDuration--color);
236
242
  transition-property: background-color, color;
237
243
  }
244
+ .pf-v6-c-nav__link::after {
245
+ position: absolute;
246
+ inset: 0;
247
+ pointer-events: none;
248
+ content: "";
249
+ border: var(--pf-v6-c-nav__link--BorderWidth) solid var(--pf-v6-c-nav__link--BorderColor);
250
+ border-radius: inherit;
251
+ }
238
252
  .pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
253
+ --pf-v6-c-nav__link--BorderWidth: var(--pf-v6-c-nav__link--hover--BorderWidth);
239
254
  color: var(--pf-v6-c-nav__link--hover--Color);
240
255
  background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
241
256
  }
242
257
  .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
243
258
  --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
259
+ --pf-v6-c-nav__link--BorderWidth: var(--pf-v6-c-nav__link--m-current--BorderWidth);
244
260
  color: var(--pf-v6-c-nav__link--m-current--Color);
245
261
  background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
246
262
  }
@@ -343,6 +359,7 @@
343
359
  --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd);
344
360
  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
345
361
  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
362
+ border: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderWidth) solid var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderColor);
346
363
  border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius);
347
364
  }
348
365
  .pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable {