@patternfly/patternfly 6.5.0-prerelease.59 → 6.5.0-prerelease.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/components/Tabs/tabs.css +18 -17
  2. package/components/Tabs/tabs.scss +19 -19
  3. package/components/_index.css +18 -17
  4. package/docs/components/Tabs/examples/Tabs.md +1784 -140
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +18 -17
  7. package/patternfly.css +18 -17
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Tabs/tabs.css CHANGED
@@ -38,14 +38,14 @@
38
38
  --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
40
40
  --pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
41
- --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
42
- --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
41
+ --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: transparent;
42
+ --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: transparent;
43
43
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
44
44
  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
45
45
  --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
46
46
  --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
47
47
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
48
- --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
48
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
49
49
  --pf-v6-c-tabs__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
50
50
  --pf-v6-c-tabs__link--BorderColor: transparent;
51
51
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -55,21 +55,21 @@
55
55
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
56
56
  --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
57
57
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
59
- --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
59
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
60
60
  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
61
61
  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
62
62
  --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
63
63
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
64
64
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
65
65
  --pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
66
- --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
67
- --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
66
+ --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--disabled);
67
+ --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: transparent;
68
68
  --pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
69
69
  --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
70
70
  --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
71
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
72
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
71
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--disabled);
72
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
73
73
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
74
74
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
75
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
@@ -89,6 +89,7 @@
89
89
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
90
90
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
91
91
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
92
+ --pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor: var(--pf-t--global--border--color--alt);
92
93
  --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
93
94
  --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
94
95
  --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
@@ -101,7 +102,9 @@
101
102
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
102
103
  --pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
103
104
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
104
- --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
105
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-t--global--border--radius--pill);
106
+ --pf-v6-c-tabs--m-box__link--after--BorderRadius: var(--pf-t--global--border--radius--sharp);
107
+ --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--color--brand--accent--default);
105
108
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
106
109
  --pf-v6-c-tabs--link-accent--start: 0;
107
110
  --pf-v6-c-tabs--link-accent--length: 0;
@@ -242,6 +245,7 @@
242
245
  --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
243
246
  --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
244
247
  --pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
248
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-v6-c-tabs--m-box__link--after--BorderRadius);
245
249
  }
246
250
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
247
251
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -251,7 +255,7 @@
251
255
  }
252
256
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
253
257
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
254
- --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
258
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
255
259
  --pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartColor);
256
260
  --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth);
257
261
  --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor);
@@ -421,7 +425,8 @@
421
425
  --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
422
426
  }
423
427
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
424
- --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
428
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
429
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
425
430
  --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
426
431
  }
427
432
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
@@ -464,11 +469,6 @@
464
469
  align-items: center;
465
470
  }
466
471
 
467
- .pf-v6-c-tabs__toggle-button .pf-v6-c-button {
468
- justify-content: start;
469
- white-space: normal;
470
- }
471
-
472
472
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
473
473
  scale: -1 1;
474
474
  }
@@ -599,6 +599,7 @@
599
599
  border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
600
600
  border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
601
601
  border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
602
+ border-radius: var(--pf-v6-c-tabs__link--after--BorderRadius);
602
603
  }
603
604
 
604
605
  .pf-v6-c-tabs__link:where(:hover, :focus) {
package/components/Tabs/tabs.scss CHANGED
@@ -56,8 +56,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
56
56
  --#{$tabs}--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
57
57
  --#{$tabs}__item--m-current--BackgroundColor: transparent;
58
58
  --#{$tabs}--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
59
- --#{$tabs}--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
60
- --#{$tabs}--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
59
+ --#{$tabs}--m-box__item--m-current--BackgroundColor: transparent;
60
+ --#{$tabs}--m-box--m-secondary__item--BackgroundColor: transparent;
61
61
  --#{$tabs}--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
62
62
  --#{$tabs}__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
63
63
 
@@ -65,7 +65,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
65
65
  --#{$tabs}__link--Color: var(--pf-t--global--text--color--subtle);
66
66
  --#{$tabs}__link--FontSize: var(--pf-t--global--font--size--sm);
67
67
  --#{$tabs}__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
68
- --#{$tabs}__link--BorderRadius: var(--pf-t--global--border--radius--small);
68
+ --#{$tabs}__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
69
69
  --#{$tabs}__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
70
70
  --#{$tabs}__link--BorderColor: transparent;
71
71
  --#{$tabs}__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -75,21 +75,21 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
75
75
  --#{$tabs}__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
76
76
  --#{$tabs}__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
77
77
  --#{$tabs}__link--ColumnGap: var(--pf-t--global--spacer--sm);
78
- --#{$tabs}__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
79
- --#{$tabs}__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
78
+ --#{$tabs}__link--disabled--Color: var(--pf-t--global--text--color--disabled);
79
+ --#{$tabs}__link--disabled--BackgroundColor: transparent;
80
80
  --#{$tabs}__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
81
81
  --#{$tabs}__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
82
82
  --#{$tabs}__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
83
83
  --#{$tabs}--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
84
84
  --#{$tabs}--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
85
85
  --#{$tabs}--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
86
- --#{$tabs}--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
87
- --#{$tabs}--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
86
+ --#{$tabs}--m-box__link--disabled--Color: var(--pf-t--global--text--color--disabled);
87
+ --#{$tabs}--m-box__link--disabled--BackgroundColor: transparent;
88
88
  --#{$tabs}--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
89
89
  --#{$tabs}--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
90
90
  --#{$tabs}--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
91
- --#{$tabs}--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
92
- --#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
91
+ --#{$tabs}--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--disabled);
92
+ --#{$tabs}--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
93
93
  --#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
94
94
  --#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
95
95
  --#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
@@ -111,6 +111,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
111
111
  --#{$tabs}--m-box__link--m-current--before--BorderInlineStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
112
112
  --#{$tabs}--m-box__link--m-current--before--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
113
113
  --#{$tabs}--m-box__link--m-current--before--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
114
+ --#{$tabs}--m-box__link--m-current--before--BorderBlockEndColor: var(--pf-t--global--border--color--alt);
114
115
  --#{$tabs}__link--disabled--before--BorderInlineEndWidth: 0;
115
116
  --#{$tabs}__link--disabled--before--BorderBlockEndWidth: var(--#{$tabs}--before--border-width--base);
116
117
  --#{$tabs}__link--disabled--before--BorderInlineStartWidth: 0;
@@ -125,7 +126,9 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
125
126
  --#{$tabs}__link--after--BorderBlockStartWidth: 0;
126
127
  --#{$tabs}__link--after--BorderInlineEndWidth: 0;
127
128
  --#{$tabs}__link--after--BorderInlineStartWidth: 0;
128
- --#{$tabs}__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
129
+ --#{$tabs}__link--after--BorderRadius: var(--pf-t--global--border--radius--pill);
130
+ --#{$tabs}--m-box__link--after--BorderRadius: var(--pf-t--global--border--radius--sharp);
131
+ --#{$tabs}__item--m-current__link--after--BorderColor: var(--pf-t--global--color--brand--accent--default);
129
132
  --#{$tabs}__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
130
133
 
131
134
  // Link accent
@@ -307,6 +310,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
307
310
  --#{$tabs}__link--before--BorderBlockEndWidth: var(--#{$tabs}__link--before--border-width--base);
308
311
  --#{$tabs}__link--after--InsetBlockStart: 0;
309
312
  --#{$tabs}__link--after--InsetBlockEnd: auto;
313
+ --#{$tabs}__link--after--BorderRadius: var(--#{$tabs}--m-box__link--after--BorderRadius);
310
314
 
311
315
  .#{$tabs}__link {
312
316
  --#{$tabs}__link--after--BorderBlockStartWidth: var(--#{$tabs}__link--after--BorderWidth);
@@ -319,7 +323,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
319
323
 
320
324
  .#{$tabs}__item.pf-m-current {
321
325
  --#{$tabs}__link--BackgroundColor: var(--#{$tabs}__item--m-current__link--BackgroundColor);
322
- --#{$tabs}__link--before--BorderBlockEndColor: var(--#{$tabs}__link--BackgroundColor);
326
+ --#{$tabs}__link--before--BorderBlockEndColor: var(--#{$tabs}--m-box__link--m-current--before--BorderBlockEndColor);
323
327
  --#{$tabs}__link--before--BorderInlineStartColor: var(--#{$tabs}--m-box__link--m-current--before--BorderInlineStartColor);
324
328
  --#{$tabs}__link--before--BorderInlineStartWidth: var(--#{$tabs}--m-box__link--m-current--before--BorderInlineStartWidth);
325
329
  --#{$tabs}__link--before--BorderInlineEndColor: var(--#{$tabs}--m-box__link--m-current--before--BorderInlineEndColor);
@@ -476,13 +480,15 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
476
480
  .#{$tabs}__item:last-child {
477
481
  --#{$tabs}__link--before--BorderInlineEndWidth: var(--#{$tabs}__link--before--border-width--base);
478
482
  }
483
+
479
484
  .#{$tabs}__item:first-child {
480
485
  --#{$tabs}__link--before--BorderBlockStartWidth: var(--#{$tabs}__link--before--border-width--base);
481
486
  }
482
487
 
483
488
  // Add border right color and weight
484
489
  .#{$tabs}__item.pf-m-current {
485
- --#{$tabs}__link--before--BorderInlineEndColor: var(--#{$tabs}__item--m-current__link--BackgroundColor);
490
+ --#{$tabs}__link--before--BorderInlineEndColor: var(--#{$tabs}--m-box__link--m-current--before--BorderBlockEndColor);
491
+ --#{$tabs}__link--before--BorderInlineEndWidth: var(--#{$tabs}__link--before--border-width--base);
486
492
  --#{$tabs}__link--before--BorderBlockEndColor: var(--#{$tabs}__link--before--border-color--base);
487
493
  }
488
494
 
@@ -543,13 +549,6 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
543
549
  align-items: center;
544
550
  }
545
551
 
546
- .#{$tabs}__toggle-button {
547
- .#{$button} {
548
- justify-content: start;
549
- white-space: normal;
550
- }
551
- }
552
-
553
552
  .#{$tabs}__toggle-icon {
554
553
  @include pf-v6-mirror-inline-on-rtl;
555
554
 
@@ -690,6 +689,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
690
689
  border-block-end-width: var(--#{$tabs}__link--after--BorderBlockEndWidth);
691
690
  border-inline-start-width: var(--#{$tabs}__link--after--BorderInlineStartWidth);
692
691
  border-inline-end-width: var(--#{$tabs}__link--after--BorderInlineEndWidth);
692
+ border-radius: var(--#{$tabs}__link--after--BorderRadius);
693
693
  }
694
694
  }
695
695
 
package/components/_index.css CHANGED
@@ -20676,14 +20676,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20676
20676
  --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
20677
20677
  --pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
20678
20678
  --pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
20679
- --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
20680
- --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
20679
+ --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: transparent;
20680
+ --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: transparent;
20681
20681
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
20682
20682
  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
20683
20683
  --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
20684
20684
  --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
20685
20685
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20686
- --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
20686
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
20687
20687
  --pf-v6-c-tabs__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
20688
20688
  --pf-v6-c-tabs__link--BorderColor: transparent;
20689
20689
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -20693,21 +20693,21 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20693
20693
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
20694
20694
  --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
20695
20695
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
20696
- --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20697
- --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
20696
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
20697
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
20698
20698
  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
20699
20699
  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
20700
20700
  --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20701
20701
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
20702
20702
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
20703
20703
  --pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20704
- --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20705
- --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
20704
+ --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--disabled);
20705
+ --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: transparent;
20706
20706
  --pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
20707
20707
  --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20708
20708
  --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20709
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
20710
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
20709
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--disabled);
20710
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
20711
20711
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
20712
20712
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
20713
20713
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
@@ -20727,6 +20727,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20727
20727
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
20728
20728
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
20729
20729
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
20730
+ --pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor: var(--pf-t--global--border--color--alt);
20730
20731
  --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
20731
20732
  --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
20732
20733
  --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
@@ -20739,7 +20740,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20739
20740
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
20740
20741
  --pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
20741
20742
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
20742
- --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
20743
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-t--global--border--radius--pill);
20744
+ --pf-v6-c-tabs--m-box__link--after--BorderRadius: var(--pf-t--global--border--radius--sharp);
20745
+ --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--color--brand--accent--default);
20743
20746
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
20744
20747
  --pf-v6-c-tabs--link-accent--start: 0;
20745
20748
  --pf-v6-c-tabs--link-accent--length: 0;
@@ -20880,6 +20883,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20880
20883
  --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
20881
20884
  --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
20882
20885
  --pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
20886
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-v6-c-tabs--m-box__link--after--BorderRadius);
20883
20887
  }
20884
20888
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
20885
20889
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -20889,7 +20893,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20889
20893
  }
20890
20894
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
20891
20895
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
20892
- --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
20896
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
20893
20897
  --pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartColor);
20894
20898
  --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth);
20895
20899
  --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor);
@@ -21059,7 +21063,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21059
21063
  --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
21060
21064
  }
21061
21065
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
21062
- --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
21066
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
21067
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
21063
21068
  --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
21064
21069
  }
21065
21070
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
@@ -21102,11 +21107,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21102
21107
  align-items: center;
21103
21108
  }
21104
21109
 
21105
- .pf-v6-c-tabs__toggle-button .pf-v6-c-button {
21106
- justify-content: start;
21107
- white-space: normal;
21108
- }
21109
-
21110
21110
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
21111
21111
  scale: -1 1;
21112
21112
  }
@@ -21237,6 +21237,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21237
21237
  border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
21238
21238
  border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
21239
21239
  border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
21240
+ border-radius: var(--pf-v6-c-tabs__link--after--BorderRadius);
21240
21241
  }
21241
21242
 
21242
21243
  .pf-v6-c-tabs__link:where(:hover, :focus) {