@patternfly/patternfly 6.3.0-prerelease.1 → 6.3.0-prerelease.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/components/Tabs/tabs.css +65 -0
  2. package/components/Tabs/tabs.scss +77 -0
  3. package/components/_index.css +64 -0
  4. package/docs/components/Tabs/examples/Tabs.md +6741 -12
  5. package/docs/demos/Card/examples/Card.md +57 -0
  6. package/docs/demos/DescriptionList/examples/DescriptionList.md +38 -0
  7. package/docs/demos/Drawer/examples/Drawer.md +38 -0
  8. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +76 -0
  9. package/docs/demos/Tabs/examples/Tabs.md +570 -0
  10. package/package.json +5 -5
  11. package/patternfly-no-globals.css +64 -0
  12. package/patternfly.css +64 -0
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/components/Tabs/tabs.css CHANGED
@@ -1,3 +1,13 @@
1
+ @property --pf-v6-c-tabs--link-accent--length {
2
+ syntax: "<length>";
3
+ inherits: true;
4
+ initial-value: 0px;
5
+ }
6
+ @property --pf-v6-c-tabs--link-accent--start {
7
+ syntax: "<length>";
8
+ inherits: true;
9
+ initial-value: 0px;
10
+ }
1
11
  .pf-v6-c-tabs {
2
12
  --pf-v6-c-tabs--inset: 0;
3
13
  --pf-v6-c-tabs--Width: auto;
@@ -59,6 +69,8 @@
59
69
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
60
70
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
61
71
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
72
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
73
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
62
74
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
63
75
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
64
76
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -83,6 +95,26 @@
83
95
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
84
96
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
85
97
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
98
+ --pf-v6-c-tabs--link-accent--start: 0;
99
+ --pf-v6-c-tabs--link-accent--length: auto;
100
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
101
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
102
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
103
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
104
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
105
+ --pf-v6-c-tabs--link-accent--Width: initial;
106
+ --pf-v6-c-tabs--link-accent--Height: 0;
107
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
108
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
109
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
110
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
111
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
112
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
113
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
114
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
115
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
116
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
117
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
86
118
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
87
119
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
88
120
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -240,6 +272,13 @@
240
272
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
241
273
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
242
274
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
275
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
276
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
277
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
278
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
279
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
280
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
281
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
243
282
  display: inline-flex;
244
283
  flex-direction: column;
245
284
  height: 100%;
@@ -502,6 +541,7 @@
502
541
  text-decoration-line: none;
503
542
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
504
543
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
544
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
505
545
  }
506
546
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
507
547
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -812,4 +852,29 @@
812
852
  --pf-v6-c-tabs--m-vertical--inset: var(--pf-t--global--spacer--2xl);
813
853
  --pf-v6-c-tabs--m-vertical--m-box--inset: var(--pf-t--global--spacer--2xl);
814
854
  }
855
+ }
856
+
857
+ @media (prefers-reduced-motion: no-preference) {
858
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
859
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
860
+ content: revert;
861
+ }
862
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
863
+ position: absolute;
864
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
865
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
866
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
867
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
868
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
869
+ content: "";
870
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
871
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
872
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
873
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
874
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
875
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
876
+ }
877
+ .pf-v6-c-tabs.pf-m-initializing-accent {
878
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
879
+ }
815
880
  }
package/components/Tabs/tabs.scss CHANGED
@@ -3,6 +3,20 @@
3
3
  $pf-v6-c-tabs--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
4
4
  $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
5
5
 
6
+ @property --#{$tabs}--link-accent--length {
7
+ syntax: "<length>";
8
+ inherits: true;
9
+ // stylelint-disable-next-line length-zero-no-unit
10
+ initial-value: 0px;
11
+ }
12
+
13
+ @property --#{$tabs}--link-accent--start {
14
+ syntax: "<length>";
15
+ inherits: true;
16
+ // stylelint-disable-next-line length-zero-no-unit
17
+ initial-value: 0px;
18
+ }
19
+
6
20
  @include pf-root($tabs) {
7
21
  --#{$tabs}--inset: 0;
8
22
  --#{$tabs}--Width: auto;
@@ -74,6 +88,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
74
88
  --#{$tabs}--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
75
89
  --#{$tabs}--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
76
90
  --#{$tabs}--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
91
+ --#{$tabs}__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
92
+ --#{$tabs}__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
77
93
 
78
94
  // Link before
79
95
  --#{$tabs}__link--before--border-color--base: var(--pf-t--global--border--color--default);
@@ -103,6 +119,28 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
103
119
  --#{$tabs}__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
104
120
  --#{$tabs}__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
105
121
 
122
+ // Link accent
123
+ --#{$tabs}--link-accent--start: 0; // needed to create react-token
124
+ --#{$tabs}--link-accent--length: auto; // needed to create react-token
125
+ --#{$tabs}--link-accent--color: var(--#{$tabs}__item--m-current__link--after--BorderColor);
126
+ --#{$tabs}--link-accent--border-size: var(--#{$tabs}__item--m-current__link--after--BorderWidth);
127
+ --#{$tabs}--link-accent--InsetBlockStart: auto;
128
+ --#{$tabs}--link-accent--InsetBlockEnd: 0;
129
+ --#{$tabs}--link-accent--InsetInlineStart: initial;
130
+ --#{$tabs}--link-accent--Width: initial;
131
+ --#{$tabs}--link-accent--Height: 0;
132
+ --#{$tabs}--link-accent--BorderBlockEndWidth: var(--#{$tabs}--link-accent--border-size);
133
+ --#{$tabs}--link-accent--BorderInlineStartWidth: 0;
134
+ --#{$tabs}--m-vertical--link-accent--InsetBlockStart: initial;
135
+ --#{$tabs}--m-vertical--link-accent--InsetBlockEnd: auto;
136
+ --#{$tabs}--m-vertical--link-accent--InsetInlineStart: 0;
137
+ --#{$tabs}--m-vertical--link-accent--Width: 0;
138
+ --#{$tabs}--m-vertical--link-accent--Height: initial;
139
+ --#{$tabs}--m-vertical--link-accent--BorderBlockEndWidth: 0;
140
+ --#{$tabs}--m-vertical--link-accent--BorderInlineStartWidth: var(--#{$tabs}--link-accent--border-size);
141
+ --#{$tabs}--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
142
+ --#{$tabs}--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
143
+
106
144
  // Scroll buttons
107
145
  --#{$tabs}__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
108
146
  --#{$tabs}__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -314,6 +352,13 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
314
352
  --#{$tabs}__link--after--InsetBlockEnd: 0;
315
353
  --#{$tabs}__link--after--InsetInlineEnd: auto;
316
354
  --#{$tabs}__list--ScrollSnapTypeAxis: var(--#{$tabs}--m-vertical__list--ScrollSnapTypeAxis);
355
+ --#{$tabs}--link-accent--InsetBlockStart: var(--#{$tabs}--m-vertical--link-accent--InsetBlockStart);
356
+ --#{$tabs}--link-accent--InsetBlockEnd: var(--#{$tabs}--m-vertical--link-accent--InsetBlockEnd);
357
+ --#{$tabs}--link-accent--InsetInlineStart: var(--#{$tabs}--m-vertical--link-accent--InsetInlineStart);
358
+ --#{$tabs}--link-accent--Width: var(--#{$tabs}--m-vertical--link-accent--Width);
359
+ --#{$tabs}--link-accent--Height: var(--#{$tabs}--m-vertical--link-accent--Height);
360
+ --#{$tabs}--link-accent--BorderBlockEndWidth: var(--#{$tabs}--m-vertical--link-accent--BorderBlockEndWidth);
361
+ --#{$tabs}--link-accent--BorderInlineStartWidth: var(--#{$tabs}--m-vertical--link-accent--BorderInlineStartWidth);
317
362
 
318
363
  display: inline-flex;
319
364
  flex-direction: column;
@@ -580,6 +625,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
580
625
  text-decoration-line: none;
581
626
  background-color: var(--#{$tabs}__link--BackgroundColor);
582
627
  border-radius: var(--#{$tabs}__link--BorderRadius);
628
+ transition: background-color var(--#{$tabs}__link--TransitionDuration--background-color) var(--#{$tabs}__link--TransitionTimingFunction--background-color);
583
629
 
584
630
  @at-root .#{$tabs}__item.pf-m-action,
585
631
  & {
@@ -737,3 +783,34 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
737
783
  }
738
784
  }
739
785
  // stylelint-enable
786
+
787
+ @media (prefers-reduced-motion: no-preference) {
788
+ .#{$tabs}:not(.pf-m-box) {
789
+ .#{$tabs}__link,
790
+ .#{$tabs}__item.pf-m-action {
791
+ &::after {
792
+ content: revert;
793
+ }
794
+ }
795
+
796
+ .#{$tabs}__list::after {
797
+ position: absolute;
798
+ inset-block-start: var(--#{$tabs}--link-accent--InsetBlockStart, var(--#{$tabs}--link-accent--start));
799
+ inset-block-end: var(--#{$tabs}--link-accent--InsetBlockEnd);
800
+ inset-inline-start: var(--#{$tabs}--link-accent--InsetInlineStart, var(--#{$tabs}--link-accent--start));
801
+ width: var(--#{$tabs}--link-accent--Width, var(--#{$tabs}--link-accent--length));
802
+ height: var(--#{$tabs}--link-accent--Height, var(--#{$tabs}--link-accent--length));
803
+ content: "";
804
+ border: 0 solid var(--#{$tabs}--link-accent--color);
805
+ border-block-end-width: var(--#{$tabs}--link-accent--BorderBlockEndWidth);
806
+ border-inline-start-width: var(--#{$tabs}--link-accent--BorderInlineStartWidth);
807
+ transition-timing-function: var(--#{$tabs}--link-accent--TransitionTimingFunction);
808
+ transition-duration: var(--#{$tabs}--link-accent--TransitionDuration);
809
+ transition-property: --#{$tabs}--link-accent--length, --#{$tabs}--link-accent--start, width;
810
+ }
811
+ }
812
+
813
+ .#{$tabs}.pf-m-initializing-accent {
814
+ --#{$tabs}--link-accent--TransitionDuration: 0;
815
+ }
816
+ }
package/components/_index.css CHANGED
@@ -18317,6 +18317,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18317
18317
  }
18318
18318
  }
18319
18319
 
18320
+ @property --pf-v6-c-tabs--link-accent--length {
18321
+ syntax: "<length>";
18322
+ inherits: true;
18323
+ initial-value: 0px;
18324
+ }
18325
+ @property --pf-v6-c-tabs--link-accent--start {
18326
+ syntax: "<length>";
18327
+ inherits: true;
18328
+ initial-value: 0px;
18329
+ }
18320
18330
  .pf-v6-c-tabs {
18321
18331
  --pf-v6-c-tabs--inset: 0;
18322
18332
  --pf-v6-c-tabs--Width: auto;
@@ -18378,6 +18388,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18378
18388
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
18379
18389
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
18380
18390
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
18391
+ --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
18392
+ --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
18381
18393
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
18382
18394
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
18383
18395
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -18402,6 +18414,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18402
18414
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
18403
18415
  --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
18404
18416
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
18417
+ --pf-v6-c-tabs--link-accent--start: 0;
18418
+ --pf-v6-c-tabs--link-accent--length: auto;
18419
+ --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
18420
+ --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
18421
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
18422
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
18423
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
18424
+ --pf-v6-c-tabs--link-accent--Width: initial;
18425
+ --pf-v6-c-tabs--link-accent--Height: 0;
18426
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18427
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
18428
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
18429
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
18430
+ --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
18431
+ --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
18432
+ --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
18433
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
18434
+ --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
18435
+ --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
18436
+ --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
18405
18437
  --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18406
18438
  --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
18407
18439
  --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -18559,6 +18591,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18559
18591
  --pf-v6-c-tabs__link--after--InsetBlockEnd: 0;
18560
18592
  --pf-v6-c-tabs__link--after--InsetInlineEnd: auto;
18561
18593
  --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
18594
+ --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
18595
+ --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
18596
+ --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
18597
+ --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
18598
+ --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
18599
+ --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
18600
+ --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
18562
18601
  display: inline-flex;
18563
18602
  flex-direction: column;
18564
18603
  height: 100%;
@@ -18821,6 +18860,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18821
18860
  text-decoration-line: none;
18822
18861
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
18823
18862
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
18863
+ transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
18824
18864
  }
18825
18865
  .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
18826
18866
  --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -19133,6 +19173,30 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19133
19173
  }
19134
19174
  }
19135
19175
 
19176
+ @media (prefers-reduced-motion: no-preference) {
19177
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
19178
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
19179
+ content: revert;
19180
+ }
19181
+ .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
19182
+ position: absolute;
19183
+ inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
19184
+ inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
19185
+ inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
19186
+ width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
19187
+ height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
19188
+ content: "";
19189
+ border: 0 solid var(--pf-v6-c-tabs--link-accent--color);
19190
+ border-block-end-width: var(--pf-v6-c-tabs--link-accent--BorderBlockEndWidth);
19191
+ border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
19192
+ transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
19193
+ transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
19194
+ transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
19195
+ }
19196
+ .pf-v6-c-tabs.pf-m-initializing-accent {
19197
+ --pf-v6-c-tabs--link-accent--TransitionDuration: 0;
19198
+ }
19199
+ }
19136
19200
  .pf-v6-c-text-input-group {
19137
19201
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
19138
19202
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);